Clicking on an image results in a zoomed image

[Heraes-git]

Hello,

It's been a few months since I first installed the plugin. All was working a few weeks ago. I'm actually under Grav v1.7.0-beta.4, UniteGallery is updated.

• Firstly, the thumbnails aren't centered correctly. Meaning that tiles are created with excentred images.
• Secondly, when clicking on a image of a gallery, the JS opens the view, but the image isn't forced to fit the screen anymore. So if the image is very big, we're like zoomed in.

Here my page structure :

Page "Gallery" (collection.md, template "collection.html.twig" used)
    Sub-page "Gallery1" for a gallery (gallery.md, template "gallery.html.twig" used)
    Sub-page "Gallery2" for a gallery (gallery.md, template "gallery.html.twig" used)
    Sub-page "Gallery3" for a gallery (gallery.md, template "gallery.html.twig" used)
    etc...

The gallery page gather some galleries and display a preview of them, so the user can preview a few images and access the full gallery if he wants.

Here's the way it works :

• The main gallery page uses a general collection template I created to automize the process of displaying children rapidly. Each child found will launch the process of the inclusion of its template (so, "gallery.html.twig).
• I chose, in each sub-page's frontmatter, if I want to display it in that general gallery page (nb : allow the final user to hide/show a gallery in the main gallery page).
• When finally displaying the galleries excerpts by browsing the main gallery's children, I limit the number of images for each preview of the galleries, based on a sub-page's frontmatter option I created (so the template "gallery.html.twig" receive a limited number of images).

{% if piclimit %}{% set images_set = images_set|merge(page.media.images|slice(0, piclimit)) %}{% else %}{% set images_set = images_set|merge(page.media.images) %}{% endif %}

• A button is added below each preview, to access each full gallery.
• When clicking on one button and reaching the page (wich correspond to the Sub-page "Gallery1", etc), the same "gallery.html.twig" is used again. But this time, no limit is used for the thumbnails generation.

The code used

collection.md :

content:
    items: '@self.children'
unitegallery:
    assets_in_meta: true
    tiles_type: justified

gallery.md of sub-pages :

unitegallery:
    gallery_id: unite-gallery1
    gallery_theme: tiles
    assets_in_meta: true

I manually change the gallery_id number so each gallery has a special identifier.

gallery.html.twig :

{% set container = container ?: (page.url == base_url ~ uri.path) and (container is not same as(false)) ? true : false %}

{% if container %}
	{% set DNA_classes = thispage.DNA.classes ? thispage.DNA.classes ~ ' ' %}
	<{{ thispage.DNA.htmltag }} class="{{ thispage.DNA.Hsize }} {{ thispage.DNA.Vsize }} {{ DNA_classes }}container">{# We don't want that when already collecting modular pages (see : collection.html.twig) #}
	{% set piclimit = thispage.DNA.piclimit %}{# If we're not a modular page, we don't want to limit the galerie preview. #}
{% else %}
	{%- set piclimit = thispage.DNA_item.piclimit ?: thispage.DNA_items.piclimit %}{# Images' limit is useful only when a master page display several galeries from children. #}
{% endif %}
{% set images_set = {} %}

{# ___DISPLAY___ #}
{% if collecting %}<h2>{{ page.title }}</h2>
{% else %}{% include "#{theme_config.DNA_settings.partials}/content/page_content.html.twig" %}{% endif %}

{# ---- UNITE GALLERY ---- #}

{%- if config.plugins.unitegallery.enabled and page.header.unitegallery %}
	{% if piclimit %}{% set images_set = images_set|merge(page.media.images|slice(0, piclimit)) %}{% else %}{% set images_set = images_set|merge(page.media.images) %}{% endif %}
	{# We call the plugin "unitegallery" #}
	{# <div class="modular-row gallery-container {{ page.header.DNA_class }}"> #}
	{{ unite_gallery(
		images_set, 
		'{
		"gallery_theme":"' ~ page.header.unitegallery.gallery_theme|defined(config.plugins.unitegallery.gallery_theme) ~ '", 
		"tiles_type":"' ~ page.header.unitegallery.tiles_type|defined(config.plugins.unitegallery.tiles_type) ~ '"
		}',
		page.header.unitegallery.gallery_id
	) }}
	{# </div> #}
{% endif %}
{# ----------------------- #}

{% if page.url != base_url ~ uri.path and not page.modular %}
	<div class="button_centered">
		<a class="button_M1" href="{{ page.url }}">Accéder à la galerie</a>
	</div>
{% endif %}

{% if container %}
	</{{ thispage.DNA.htmltag }}>
{% endif %}

It's just the logic. I skipped the {% extends %} and {% block %} here.

Plugin's config (unitegallery.yaml)

enabled: true
assets_in_meta: true
gallery_theme: tiles
tiles_type: justified
gallery_div_id: unite-gallery
thumb_width: 600
thumb_height: 600

Result

The asset is correctly loaded :

Some code is added in the bottom of the page :

Precision : I use

{% block jsexecute deferred %}
	{{- assets.js() }}
{%- endblock %}

to defer the moment where the JS is used. But not using this option doesn't fix the problem.

And the gallery do display, and the JS opens the images, excepted the bug.

How the bug did occur

Firstly, a few weeks ago (or let say, 2 months ago), for no known reason, the thumbnails of the main gallery and of each gallery, started to be badly generated, and cropped/resized with no respect of the image.

Then (and it may be connected) when clicking on a thumbnail, it appeared that the image wasn't correctly handled by the JS or something.

The same two problems do occur with a widget I created to grab the last images of each gallery and gather them in the homepage.