Category view is not responsive

[jb80]

I found an issue where the category view (categories above Images) thumbnail image is not responsive. This is a problem for my site as my thumbnail images are larger than the configured box size (for better clarity). The solution is to simply insert the

class="pg-image img img-responsive"

as done on the category view image page.

The question that I have is which source files need to be modified to fix this problem and whether the core PG code will be updated.

Jason

Class in PG v4.3.4

Code: Select all

<img src="/joomla/images/phocagallery/category1/category2/thumbs/phoca_thumb_m_pa030688.jpg" alt="" class="pg-cat-image" itemprop="thumbnail">

Correct code with class="pg-image img img-responsive"

Code: Select all

<img src="/joomla/images/phocagallery/category1/category2/thumbs/phoca_thumb_m_pa030820.jpg" alt="" class="pg-image img img-responsive" itemprop="thumbnail">

[jb80]

I am guessing there is some code missing somewhere which checks whether the view is configured to be "responsive" . I found a section in com_phocagallery\views\category\view.html.php related to Overlib class but not the one in question

I am requesting some help to identify where and how to fix this issue. Thanks.

Code: Select all

// Overlib class
if ($this->items[$iS]->overlib == 0) {
	$this->items[$iS]->ooverlibclass = array('class' => 'pg-image img img-responsive', 'itemprop' => "thumbnail");
} else { 
	$this->items[$iS]->ooverlibclass = array('class' => 'pimo pg-image img img-responsive img-responsive2', 'itemprop' => "thumbnail");
}

[Jan]

Hi, can you paste a screenshot which part you exactly mean?

Jan

[jb80]

Default html with medium 100x100 thumbnail box but using a 150x150 image to slightly improve image clarity


.... and now with the modified html to include the

Code: Select all

class="pg-image img img-responsive"

the image correctly resizes to fit the 100x100 thumbnail box - refer to the yellow highlighted boxes. This responsive behaviour already works correctly on the categories view image list page but not on the parent categories above the image list, i.e. multi level parent/child categories

[Jan]

Hi, thank you for the info, I will take a look at it for next version.

The categories in category view are located here:

components\com_phocagallery\views\category\tmpl\default_images.php

Try to change on line cca 130
FROM:

Code: Select all

echo JHtml::_( 'image', $cv->linkthumbnailpath, '', array('itemprop' => "thumbnail"));

TO:

Code: Select all

echo JHtml::_( 'image', $cv->linkthumbnailpath, '', $cv->ooverlibclass);

Jan

[jb80]

Nope that didn't work, perhaps it is something to do with line # 92 of default_images.php

The "pg-image" class seems to match but is missing the "img img-responsive" parameter.

Code: Select all

 echo JHtml::_( 'image', $cv->extm, $cv->altvalue, array('style' => 'width:'. $correctImageRes['width'] .'px;height:'.$correctImageRes['height'] .'px;', 'class' => 'pg-image', 'itemprop' => "thumbnail"));

[Jan]

Hi, test to modify this line - cca 118 (in the same file):

FROM:

Code: Select all

echo JHtml::_( 'image', $cv->linkthumbnailpath, '', array( 'class' => PhocaGalleryRenderFront::renderImageClass($cv->linkthumbnailpath), 'itemprop' => "thumbnail") );

TO:

Code: Select all

echo JHtml::_( 'image', $cv->linkthumbnailpath, '', array( 'class' => PhocaGalleryRenderFront::renderImageClass($cv->linkthumbnailpath) . ' pg-image img img-responsive', 'itemprop' => "thumbnail") );

Jan

[jb80]

That did the trick! The code change worked perfectly Thank you.

Code: Select all

echo JHtml::_( 'image', $cv->linkthumbnailpath, '', array( 'class' => PhocaGalleryRenderFront::renderImageClass($cv->linkthumbnailpath) . ' pg-image img img-responsive', 'itemprop' => "thumbnail") );

[Jan]

Ok, I will set it for the next version.

Jan

[juma_2015]

Hello,

I have exactly the same issue, my page with category, category is not responsive. But the images gallery inside the category is.

I tried the code above, but it doesnt seem to have change anything.

Anything else to try ?

Thanks in advance

Julien