Page 1 of 2
Category view is not responsive
Posted: 28 Mar 2017, 18:49
by 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">
Re: Category view is not responsive
Posted: 30 Mar 2017, 00:48
by 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");
}
Re: Category view is not responsive
Posted: 01 Apr 2017, 15:03
by Jan
Hi, can you paste a screenshot which part you exactly mean?
Jan
Re: Category view is not responsive
Posted: 01 Apr 2017, 16:18
by 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
Re: Category view is not responsive
Posted: 05 Apr 2017, 14:53
by 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
Re: Category view is not responsive
Posted: 05 Apr 2017, 15:41
by 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"));
Re: Category view is not responsive
Posted: 11 Apr 2017, 23:37
by 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
Re: Category view is not responsive
Posted: 13 Apr 2017, 00:04
by 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") );
Re: Category view is not responsive
Posted: 15 Apr 2017, 22:20
by Jan
Ok, I will set it for the next version.
Jan
Re: Category view is not responsive
Posted: 27 Jul 2017, 14:28
by 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