Gallery not showing prettyPhoto inlet after upgrading ModX to 2.8.4 and Gallery to 2.0.0

Problem

The album is displayed as a thumbnail for each item (but smaller as before - this may be a related problem). The click on the thumbnail anchors to
https://***/index.php?id=64&galItem=137&galAlbum=38&galTag=
however, this does not show the big version of the image (as an inlet to the page). Instead, it displays the same page. It appears as if there is no link function at all, where in fact the link is followed, only the contents is identical to
https://***/index.php?id=64. In other words, galItem=137&galAlbum=38& are ignored. The connector to prettyPhoto seems to be lost.

Implementation

The gallery is inserted in the main template in a specific area with:

[[*galerie-anzeigen:notempty=`
<script type="text/javascript">	
$(function(){$(".gallery:not(.slideshow) a[rel^='prettyPhoto']").prettyPhoto({theme: 'dark_square' /* light_rounded / dark_rounded / light_square / dark_square / facebook */});

$(".gallery.slideshow a[rel^='prettyPhoto']").prettyPhoto({
slideshow:5000, 
autoplay_slideshow:true
});	
});</script>`]]

Update process

ModX from 2.2.X to 2.8.4 and Gallery from 1.5.2 to 2.0.0 and migrating to another server
DB is mysql 8.0.29-commercial

Maybe to get to the bottom of the problem, can you do a test without prettyPhoto to see if there is a general problem with the Gallery extra on your system.

For example use the example code from here

https://docs.modx.com/current/en/extras/gallery/gallery.example1

or here

https://docs.modx.com/current/en/extras/gallery/gallery.setting-up-your-gallery

to see if all the Snippets (especially [[!GalleryItem]]) work correctly.

Thank you, good idea. Yes, there seem to be very general problems with the Gallery on my system.

[[!Gallery? &toPlaceholder=`gallery`]]
[[!GalleryItem]]
[[!GalleryAlbums? &toPlaceholder=`galleries`]]
[[+galleries]]

None of these, written in the resource shows anything. It is as if not a single album exists.
I checked it out in the network section of browsers debug console, and the only thing that shows something is the link
https://***/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=200&h=200&zc=1&far=C&q=90&src=%2F***2%2Fassets%2Fgallery%2F6%2F11.jpg
but this is only because the position of the file is explicitly given.

A possible explanation is that the SQL which retrieves the album/item information fails for syntactical reasons.

In the pull request that I linked in your last topic, did you copy all 8 files to your system? Especially the file core/components/gallery/model/gallery/galalbum.class.php?


This code is wrong.
[[!Gallery? &toPlaceholder=`gallery`]] → You never output the placeholder [[!+gallery]].
[[!GalleryItem]] → this will set the properties of the Item to placeholders that are never output.

Use the code from the examples I linked above or maybe use something like this

[[!Gallery? &toPlaceholder=`gallery`]]
[[!+gallery]]

[[!GalleryItem? &toPlaceholders=`0`]]

[[!GalleryAlbums? &toPlaceholder=`galleries`]]
[[!+galleries]]

Yes, I copies all 8 files to the system. While this repaired the gallery manager, the problem reported here persists.

However,

[[!GalleryItem]]
[[!+galitem.image:notempty=`
<div class="image">
  <a href="[[+galitem.image]]"><img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]" /></a>
  <br />Albums: [[+galitem.albums]]
  <br />Tags: [[+galitem.tags]]
</div>
`]]

shows a larger version of the image. The click on the larger images leads to https://***/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=0&h=0&zc=0&far=&q=90&src=%2F***2%2Fassets%2Fgallery%2F6%2F11.jpg
which display the image on its own.

What you describe is the normal behaviour of the example code.
So is it correct to say that the example code works correctly?

I’m really confused now what the remaining problem is!
How exactly do you call [[!GalleryItem]] in your setup with prettyPhoto, where the image doesn’t show?

What you describe is the normal behaviour of the example code. So is it correct to say that the example code works correctly?

I’m not sure. I miss the caption text of the item. It is entered in the item’s “Beschreibung” in the gallery manager. It is in the description field in table modx_gallery_items.

I don’t call [[!GalleryItem]]. As far as I can see, the code

[[*galerie-anzeigen:notempty=`
<script type="text/javascript">	
$(function(){$(".gallery:not(.slideshow) a[rel^='prettyPhoto']").prettyPhoto({theme: 'dark_square' /* light_rounded / dark_rounded / light_square / dark_square / facebook */});

$(".gallery.slideshow a[rel^='prettyPhoto']").prettyPhoto({
slideshow:5000, 
autoplay_slideshow:true
});	
});</script>`]]

is supposed to show the gallery. It shows thumbnails smaller than before, but worse, the click on it does nothing at all. As I said, it calls https://***/index.php?id=64&galItem=137&galAlbum=38&galTag= which does not show the item but simply the page again. There are two options: either the generated link is not correct or the link is correct and it does not show the image.

Before the update, there were thumbnails for each item of an gallery. After a click on a picture, the original, large version of the image is shown with the caption below it. Unfortuantely, I don’t have the old page running to get more details. I do not know all details how it worked because I didn’t program it.

The caption gets put into the placeholder [[+galitem.description]]. So if you add this placeholder to the example code then you should see the description.
For other available placeholders please read the documentation.


This code doesn’t show the gallery. It just conditionally adds some javascript code to the page.

If there is no call to [[!GalleryItem]] then there should be at least a call to [[!Gallery? ...]]. Can you post the whole content of the page that relates to the gallery?

There is one more thing about the code

[[*galerie-anzeigen:notempty=`
<script type="text/javascript">	
$(function(){$(".gallery:not(.slideshow) a[rel^='prettyPhoto']").prettyPhoto({theme: 'dark_square' /* light_rounded / dark_rounded / light_square / dark_square / facebook */});

$(".gallery.slideshow a[rel^='prettyPhoto']").prettyPhoto({
slideshow:5000, 
autoplay_slideshow:true
});	
});</script>`]]

It seems to half-work in the template (it shows the thumbnail) but not directly in the resource.

I’d be happy when I had a running version of gallery code, which resides directly in the resource, shows the thumbnail, and upon click opens the image with description.

From there on I would try to move it to the template (important) and couple it with prettyPhoto (maybe not essential). The template has the variable, whether to show the gallery, and this is set for ~50 pages.

Ah, it is this one:

[[*galerie-anzeigen:notempty=`<br class="clear"/>[[*galerie-anzeigen]]<br class="clear"/>`]]

It translates to this final html (^-u of the displayed page)

br class="clear"/><div class="gal-item gal-item-active">
    <a href="index.php?id=23&amp;galItem=11&amp;galAlbum=6&amp;galTag=" title="Foto_ZV18.jpg" >

        <img class="" src="/bienenkunde2/assets/components/gallery/connector.php?action=web/phpthumb&amp;ctx=web&amp;w=100&amp;h=100&amp;zc=1&amp;far=C&amp;q=90&amp;src=%2Fbienenkunde2%2Fassets%2Fgallery%2F6%2F11.jpg" alt="Foto_ZV18.jpg"  />
    </a>
</div><br class="clear"/>

I’m not sure how this got translated. galerie-anzeigen is only a variable defined in the section “Template variables” in “Elements”.

So what is the “Input Type” (in the tab “Input Options”) of this TV (template variable) galerie-anzeigen?
Is there a default value? What is the value of this TV in the resource?

It is:
Ja==[[*gallerieauswaehlen:notempty=`[[!Gallery? &album=`[[*gallerieauswaehlen]]` &width=`800`]]`]]||Nein==
No default variable.
It is Ja in this resource.

Ok, so if the TV is set to “Yes” then the snippet “Gallery” is executed:

[[!Gallery? &album=`[[*gallerieauswaehlen]]` &width=`800`]]`]]

The value of the TV “gallerieauswaehlen” defines the album where the images are loaded from.
But according to the documentation there is no property &width. Maybe try changing that property to &thumbWidth instead.

I checked out, which code gives me the image plus the description directly in the resource. It is

[[!GalleryItem? &toPlaceholders=`0`]]
<br>
[[+galitem.description]]
[[!GalleryItem? &toPlaceholders=`description`]]

So it retrieves the description from the database, fine.
But now I would like to have the description in the

https://***/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=0&h=0&zc=0&far=&q=90&src=%2Fbienenkunde2%2Fassets%2Fgallery%2F6%2F11.jpg

not in the resource.

Well this URL is supposed to return an image. You can’t have a description here!

I did. It didn’t affect the thumbnail’s size. The ^-u of the page is still:

<img class="" src="/bienenkunde2/assets/components/gallery/connector.php?action=web/phpthumb&amp;ctx=web&amp;w=100&amp;h=100&amp;zc=1&amp;far=C&amp;q=90&amp;src=%2Fbienenkunde2%2Fassets%2Fgallery%2F6%2F11.jpg" alt="Foto_ZV18.jpg"  />

Where is the w=100&amp;h=100&amp; assigned? Is it Gallery`s default?

Ah, then this is the reason the original implementer used prettyPhoto, right?

Yes, 100 is the default value for width and height, but the properties thumbWidth and thumbHeight should overwrite them.

Maybe you can also add a custom thumbTpl to your “Gallery”-call and add the image description there.


My recommendation would be to read the documentation of the extra to get familiar with how it works:

https://docs.modx.com/current/en/extras/gallery

My guess (with the limited information I have) is, that the “original implementer” changed the default template (chunk galItemThumb) and that this changed chunk got overwritten on the update.

So you probably have to create a custom template to make the gallery work again with prettyPhoto. Something like this:

[[!Gallery?
    &album=`1`
    &thumbTpl=`myThumbTpl`
    &containerTpl=`myContainerTpl`
]]

<script type="text/javascript">	
    $(function(){
        $(".gallery:not(.slideshow) a[rel^='prettyPhoto']").prettyPhoto({theme: 'dark_square'});
    });
</script>

Chunk myContainerTpl:

<div class="gallery">[[+thumbnails]]</div>

This adds the class “gallery” to match the JS code ($(".gallery ...").prettyPhoto(...))


Chunk myThumbTpl:

<div class="[[+cls]]">
    <a rel="prettyPhoto[pp_gal]" title="[[+description:htmlspecialchars]]" href="[[+image_absolute]]">
        <img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" [[+image_attributes]] />
    </a>
</div>

This adds the rel="prettyPhoto[...]" to match the JS code ($("... a[rel^='prettyPhoto']").prettyPhoto(...)) and title="[[+description]]" to show the description in the lightbox.

The placeholder [[+image_absolute]] links to the original image.
Maybe use [[+image]] instead (and define the different properties like &imageWidth, &imageHeight etc.) if you want to show a smaller image.