Page 1 of 1
Clicking an image in a gallery opens the large thumbnail instead of the original image
Posted: 22 Feb 2022, 14:02
by GPLab
Hi!
I was expecting to see the original image when clicking on the thumbnail in the gallery, but the image displayed is
the large thumbnail of the image (thumbs/phoca_thumb_l_...) instead of the image itself.
As an example, below is the html code of one gallery thumbnail:
Code: Select all
<a class="pg-photoswipe-button" href="/images/phocagallery/test_top/t-roc/thumbs/phoca_thumb_l_T-ROC_01.jpg" data-img-title="Title: t-roc" id="pgImg33" itemprop="contentUrl" data-size="680x382">
<div class="pg-item-box-image">
<img src="/images/phocagallery/test_top/t-roc/thumbs/phoca_thumb_m_T-ROC_01.jpg" alt="Title: t-roc" class="pg-image c-Image c-Image--shaded" itemprop="thumbnail">
</div>
</a>
In the example above the image belongs to a sub-category (test_top --> t-roc), but the behaviour is the same for all the images in all the galleries.
Is there a way to use the original image as the href for the link?
In other word, is it possible to have the href as in (a) insted of (b)?
(a) href="/images/phocagallery/test_top/t-roc/T-ROC_01.jpg"
(b) href="/images/phocagallery/test_top/t-roc/thumbs/phoca_thumb_l_T-ROC_01.jpg"
System info:
PhocaGallery version: 4.5.0Beta2
Joomla! version: 4.1.0 Stable
PHP version: 7.4.3
Web server: Apache/2.4.41 (Ubuntu)
Phoca Gallery Options
Detail View -> Detail View Settings -> Detail Window: Photoswipe
Re: Clicking an image in a gallery opens the large thumbnail instead of the original image
Posted: 23 Feb 2022, 21:07
by GPLab
I post here a workaround that works for me using the Photoswipe popup window.
The problem is not the thumbnail href anchor (well, it can be modified but makes a difference only opening the link in a new tab/window, not clicking on the image, which triggers the Photoswipe popup), but the href and the image size passed to Photoswipe in the
box_image.php file.
The diff output below contains the changes made to
com_phocagallery/layouts/box_image.php and to
com_phocagallery/views/category/tmpl/default_images.php
Code: Select all
diff components/com_phocagallery/layouts/box_image.php.orig components/com_phocagallery/layouts/box_image.php
18,19c18,20
<
< echo '<a class="'.$item->class.'" href="'. $item->link.'" data-img-title="'.$item->title.'" id="pgImg'.$item->id.'"';
---
> #echo '<a class="'.$item->class.'" href="'. $item->link.'" data-img-title="'.$item->title.'" id="pgImg'.$item->id.'"';
> $gp_real_image_link = str_replace("thumbs/phoca_thumb_l_", "", $item->link);
> echo '<a class="'.$item->class.'" href="'.$gp_real_image_link.'" data-img-title="'.$item->title.'" id="pgImg'.$item->id.'"';
29c30,36
< if (isset($item->datasize)) { echo ' '. $item->datasize;}
---
> #if (isset($item->datasize)) { echo ' '. $item->datasize;}
> $gp_image_absolute_path = str_replace("http://", "", $gp_real_image_link);
> $gp_image_absolute_path = str_replace("https://", "", $gp_image_absolute_path);
> $gp_image_absolute_path = str_replace("***website_address_here***", "", $gp_image_absolute_path);
> list($gp_width, $gp_height, $gp_type, $gp_attr) = getimagesize($gp_image_absolute_path);
> if (isset($item->datasize)) { echo ' data-size="'.$gp_width.'x'.$gp_height.'"';}
>
diff components/com_phocagallery/views/category/tmpl/default_images.php.orig components/com_phocagallery/views/category/tmpl/default_images.php
121c121
<
---
> $gp_real_image_link = str_replace("thumbs/phoca_thumb_l_", "", $item->link);
128c128,129
< echo '<a href="' . Route::_($item->link) . '">' . $item->title. '</a>';
---
> #echo '<a href="' . Route::_($item->link) . '">' . $item->title. '</a>';
> echo '<a href="' . Route::_($gp_real_image_link) . '">' . $item->title. '</a>';
138c139,140
< echo '<a href="' . Route::_($item->link) . '">' . $item->title. '</a>';
---
> #echo '<a href="' . Route::_($item->link) . '">' . $item->title. '</a>';
> echo '<a href="' . Route::_($gp_real_image_link) . '">' . $item->title. '</a>';
There is for sure a better solution than using str_replace to strip "thumbs/phoca_thumb_l_" from the item link...
Re: Clicking an image in a gallery opens the large thumbnail instead of the original image
Posted: 26 Feb 2022, 18:33
by Jan
Hi, thank you for the info.
Jan
Re: Clicking an image in a gallery opens the large thumbnail instead of the original image
Posted: 30 May 2022, 21:05
by rdekker
This issue still exits in beta 4.5.1, will it be solved in the final version of 4.5.1?
Re: Clicking an image in a gallery opens the large thumbnail instead of the original image
Posted: 30 May 2022, 22:00
by GPLab
Quick update on the workaroud.
The workaround itself works (original image passed to Photoswipe instead of the large thumbnail), but Photoswipe does not display "huge" images correctly (cropped or wrong height/width proportion). I've read somewere (sorry, can't remember where), that Photoswipe does not handle correctly very large images.
I think that "Magnific" popup is better (I didn't notice any distortion and it shows the original images correctly), but is not able to go back and forth to previous/next image.
So, in the end
- Photoswipe
- is able to loop through the gallery (which in my opinion is a mandatory feature)
- does not handle correctly "big" images
- Magnific
- handles correctly any size
- shows only one image (the one clicked in the gallery) [hint: Magnific requires something like an array of images to loop through the image set; if only one image is given to the popup, it cannot do anything else than show this single image]
I had to switch to another gallery manager, but would be happy to come back to Phoca Gallery if we can achieve this goal:
* click on any gallery image -> popup opens that can show correctly the original-full-size-image and move back and forth to the whole set of images in the gallery
Cheers,
Gabriele
Re: Clicking an image in a gallery opens the large thumbnail instead of the original image
Posted: 31 May 2022, 00:08
by Jan
Hi,
generally, thumbnails are used on web because of web. Usually standard users load images to server which are e.g. 2mb to 5mb and such images do not belong on a website because of many many reasons. This is why thumbnails are used. In case, somebody really needs to display large images, there is a way - just set the large image width and height like the original has. Another way could be improvement like this. But the user who will be displaying the originals on the web needs to know what the consequences may be.
So this task is not easy to do in some open projects, as there needs to be some responsibility because of common users
Jan
Re: Clicking an image in a gallery opens the large thumbnail instead of the original image
Posted: 31 May 2022, 13:03
by rdekker
Hi Jan,
What about the link issue/behavior on the thumbnails.
When clicking on the photo from "Architecture1" the larger image is opened with navigation. If you click on the name/link "Architecture1" in your J4 demo the larger image is shown, but without navigation or "X" to close
https://www.phoca.cz/demo/1-architecture
Re: Clicking an image in a gallery opens the large thumbnail instead of the original image
Posted: 07 Jun 2022, 17:48
by Jan
Hi, thank you for the info, this is bug, I will take a look at it.
Jan
Re: Clicking an image in a gallery opens the large thumbnail instead of the original image
Posted: 07 Jun 2022, 19:33
by Jan
Found, fixed, will be set in next version.
Jan
Re: Clicking an image in a gallery opens the large thumbnail instead of the original image
Posted: 13 May 2023, 00:12
by antoniojosetorres
Hello, my solution is to replace the large images with the original ones and the problem is solved.
I delete the large images and copy the original ones in the thumbs folder preceded by phoca_thumb_l_