Clicking an image in a gallery opens the large thumbnail instead of the original image

[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

[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...

[Jan]

Hi, thank you for the info.

Jan

[rdekker]

This issue still exits in beta 4.5.1, will it be solved in the final version of 4.5.1?

[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

[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

[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

[Jan]

Hi, thank you for the info, this is bug, I will take a look at it.

Jan

[Jan]

Found, fixed, will be set in next version.

Jan

[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_