I couldn't figure out how to add videos, e.g. from Youtube or Vimeo. The Unitegallery should be able to do it, in the documentation I can find example markup code:

<img alt="Youtube With Images" data-type="youtube" src="thumbs/youtube_thumb.jpg" data-image="images/youtube_image.jpg" data-videoid="A3PDXmYoF5U" data-description="Youtube video description">

Do videos work within grav by any chance?

Copied @MrMacStripe suggestion from #5.

I´ve got another idea that would enhance the usability further.

Implementing a "display only images that contain this string" option.
Since Grav provides the meta option, you should be able to crawl the images within a page for class-names, alt-names, titles and the actual filename. That would enable to simplifiy the use-case for things like:

I´ve got images from 2016, 2015 and 2014. The file names are 2014_1,2014_2,2015_1 and ongoing.
Now display a gallery sorted by years.

The implementation would be pretty simple. PHP offers an actual function for this if I remember correctly.

Using the gallery on a non modular page, I am getting this error:

Uncaught ReferenceError: jQuery is not defined

Looks like jQuery isn't loaded at the time the line is executed, If I run the unitegallery() function from javascript console after page loaded, the gallery shows up!

I am using masonry theme. Didn't tried with others.

I am having two problems:

I have given UG a list of 20 photographs. The last 16 thumbnails all show perfectly but the 1st 4 thumbnails only show the bottom half. I have provided an attachment.

2nd problem is that I have lost the menu items for the website. Can I get some hints as to where to start? But only on the gallery page.

I appreciate the help.

In your readme.md:
Installing the Hypothesis plugin...
Should be unite-gallery I guess?

The css images, example (../images/loader_skype_trans.gif) are trying to load from the root images folder instead of user/plugins/unitegallery/vendor/unitegallery/images/

UG supports multiple formats to show in gallery, but from the description I understand this plugin allows only collection of images to be passed to it. Is there a way to provide a mix of uploaded images and/or YouTube links?

Can't change gallery_ div_id. It's always set to 1.
Should be unite-gallery?

Hello,
For me it's easier to work with gantry. But I do not understand exactly how I must install your plugin. There is no modular folder where I can copy the gallery.html.twig file. (See here: http://docs.gantry.org/gantry5/advanced/creating-a-new-particle)

I hope u can help me.

Two questions...

Is there a list of available gallery parameters we can pass in as json in the twig file? I had a look on the unite gallery site and wanted to try and implement extra padding. I tried this...

{{ unite_gallery(page.media.images, '{"gallery_theme":"tiles", "tiles_type":"justified", "theme_gallery_padding":10}') }}

But it didn't work.

The second question - is there any way of increasing the size of the small thumbnails? Currently they are around 180px.

Thanks for the great grav plugin.

I just made a fresh install of Grav 1.6.23 and the first plugin I tried to install was your UnitGallery 1.1.3. Instead of accepting the default values for the thumbnail size (600), I adjusted it to 150. When I tried to click "save" to finish installing the plugin, I got a weird error message. I previously had a bootstrap theme installed but blew everything under webroot away prior to the fresh install.

Here is a screenshot:

When I go to plugins, it shows your plugin is installed however if I try to adjust the size again, I get the same error.

I inspected the code and noticed this:

<input name="data[thumb_height]" value="600" type="text" minlength="100">

A pixel height value should not be 100 chars. As a workaround, I made it a float and the form accepted it and shows the value now as 150 (rounded out properly).

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.

I wonder if this plugin candle handle the situation where I have multiple sizes of an image in the same folder. Can it automatically pick a resolution depending on the viewers screen resolution? Or as a turnaround, take the biggest size of an image (i.e. [email protected] ?

I am looking for a way to have a page with a photo gallery with hundreds of images. Daily photoblog. Three columns, three rows and pagination. So only 9 photos at the time. I would like the columns to be responsive so on mobile only one is shown.

Will I achieve this with this plugin? Especially the pagination? Maybe with the pagination plugin? Seems like that one only works with pages.

tile_width option gives unexpected results; the thumbnail size does not correspond to the value in the option (gallery.html.twig):

<div class="modular-row gallery-container {{ page.header.class }}">
  {{ unite_gallery(page.media.images, '{"gallery_theme":"carousel","tile_width":"100"}') }}
</div>

I'm getting an error with my Grav install using Unite Gallery.

Uncaught TypeError: jQuery(...).unitegallery is not a function
    at HTMLDocument.<anonymous> ((index):93)
    at i (jquery-2.x.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.x.min.js:2)
    at Function.ready (jquery-2.x.min.js:2)
    at HTMLDocument.J (jquery-2.x.min.js:2)

Line 93 of my index.html is where the gallery is being called (Starting from line 91)

<script type="text/javascript">
              jQuery(document).ready(function(){
                jQuery("#unite-gallery").unitegallery({"gallery_theme":"tiles"});
              });
        </script>

Looking in the earlier stages of the index.html I can see jQuery is being sourced, but I don't see that for the unitegallery.min.js (Starting from line 22)

    <script src="/grav/system/assets/jquery/jquery-2.x.min.js" type="text/javascript" ></script>
<script src="/grav/user/themes/deliver/js/modernizr.custom.71422.js" type="text/javascript" ></script>
<script src="/grav/user/plugins/cookiesnotice/assets/js/jquery.cookie.js" type="text/javascript" ></script>
<script src="/grav/user/plugins/cookiesnotice/assets/js/cookiesnotice.js" type="text/javascript" ></script>
<script src="/grav/user/themes/deliver/js/deliver.js" type="text/javascript" ></script>
<script src="/grav/user/themes/deliver/js/slidebars.min.js" type="text/javascript" ></script>
<script src="/grav/user/themes/deliver/js/jquery.slideme2.js" type="text/javascript" ></script>

Looking at unitegallery_extension.php it seems like it might be an issue around line 63 / 80 / 85 which is where the unitegallery.min.js should be added to the grav['assets'] but nothing is standing out to me as an issue. Could this be caused by me having an incorrect configuration of the plugin? I'd appreciate any advice as the gallery looks really nice and It'd be great to get it up and running with Grav. -Thanks!-

Just tried it out on an almost empty site. The Plugins JS and CSS is loaded and the HTML code rendered from the twig template. However, the gallery doesn't render in the browser, JS error console shows:

unitegallery.min.js:8 Uncaught Error: The gallery can't run without theme
    at validateParams (unitegallery.min.js:8)
    at runGallery (unitegallery.min.js:8)
    at UniteGalleryMain.run (unitegallery.min.js:9)
    at n.fn.init.jQuery.fn.unitegallery (unitegallery.min.js:10)
    at HTMLDocument.<anonymous> (gallerie:121)
    at i (jquery-2.x.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.x.min.js:2)
    at Function.ready (jquery-2.x.min.js:2)
    at HTMLDocument.J (jquery-2.x.min.js:2)

URL: http://34.67.216.167/fish/gallerie
Content Repository: https://github.com/TLINDEN/gravititate-backwards

I'm using Grav 1.2.3 and unitegallery plugin v1.1.2.
No JS and CSS assets are being added to the page. Despite switching off the caches.
I'm not using your modular sample, just directly on one page:

{% extends 'partials/base.html.twig' %}
{% block content %}
    {{ page.content }}

    <div class="modular-row gallery-container {{ page.header.class }}">
	{{ unite_gallery(page.media.images) }}
    </div>
{% endblock %}

Does this matter? The html is being generated correctly by the plugin.
I poked around the source a bit and it doesn't seem that the addJS and addCSS Methods do anything inside the addAssets function. The $jsAssets paths are correct.

I am quite new with Grav. I have set up a blog page which contains a unitgallery container. The container appears, but the images are not shown. so probably the script can’t find the images. The documentation of the gallery shows where to place the images for a modular page, but not for a non-modular page… How should I do it???

I'd like to use different types of galleries for different pages.

Is there any way I can add twig for one page only? I tried with the gallery_id in the json string, but need some help.

{{ unite_gallery(page.media.images, '{"gallery_theme":"compact","grav_gallery_div_id":"gallery2"}') }}

Hi,

Was happy to find this plugin but struggling to get it working with gantry templates. The plugin is outputting raw HTML to the page: http://dev.khr.creativelogic.io/page-with-gallery

If I switch to the antimatter template, it works just fine. Any suggestions?

Hi
I don't understand how to include a gallery in my modular. Does a shortcode exist?

I really want to add titles to each image. Is there a way to pass these into the gallery?

It would be useful, but i cant find how

1. display filename in the gallery under the image (using yaml is a nightmare with 1000 + images)
2. display filename on the ug-textpanel (also, without using yaml for each file)

This is describe what i need , but text on the textpanel is something like {{ image.filename|rtrim('.jpg') }}

http://unitegallery.net/index.php?page=tilesgrid-variuos#text_panel_always

Very useful plugin. I added yaml meta files as suggested, but the full-size image displays the contents of meta.alt-text, when I think it should display meta.description.

Alt is correct in the HTML, so I do not just want to switch them.

Hi,

with PHP 7.2.10 define Warnings are now thrown as Exception. With your Plugin, an Exception is thrown.

File: unitegallery_extension.php
$output .= '<img alt="' . $image[basename] . '"';
$output .= ' data-description="' . $image[basename] . '"';

Change to:
$output .= '<img alt="' . $image['basename'] . '"';
$output .= ' data-description="' . $image['basename'] . '"';

will be resolve this Exception:

0 - An exception has been thrown during the rendering of a template ("Use of undefined constant basenme - assumed 'basename' (this will throw an Error in a future version of PHP)") in "@page:/.........." at line 1.

At the moment there is no way to add several galleries into one page. I´d like to add galleries based on folders (that would be no problem), but the custom ID feature doesn´t change when rendered, even if you put gallery_div_id into the json options.

I'm breaking the protocol of issue reporting, but I'll ask two questions in one:

1. How can I set the location of the images manually? My pics are located in a different folder: /users/images/photostore and its subfoldes. How could I define a subfolder as the origin for my pictures?

2. Can I freely decide which lightbox to use? I'd like to go for photoswipe for lightbox, but use the logic of your plugin for creating the galleries.

I feel like I must be missing something fairly simple here but the unite_gallery function seems to be outputting its generated HTML as plain text.

Example screenshot:

Screenshot of source code:

Twig template file:

I am new to both Grav and Twig and am having a difficult time figuring this out. I haven't run into this problem anywhere else on the site.
Any help would be greatly appreciated. Thanks,

I want to add this plugin on blog item page, and created a special template just for the pages with galleries. The plugin seems to load, but it generates this JS error:

Uncaught TypeError: jQuery(...).unitegallery is not a function
    at HTMLDocument.<anonymous> (design:153)
    at i (jquery-2.x.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.x.min.js:2)
    at Function.ready (jquery-2.x.min.js:2)
    at HTMLDocument.J (jquery-2.x.min.js:2)

Neither the CSS nor the JS seems to load in the header. Any help is appreciated

Hi, can any one write step by step how to get full width slider on home page? For example in Quark theme.

ERROR: An exception has been thrown during the rendering of a template ("copy(/f/a/l/l/b/fallback.jpg): failed to open stream: No such file or directory").

Issue has to do with the images cache dir missing

I have a number of files, 0001.jpg 0002.jpg 0003.jpg etc
they are displayed in asc order.
How to display them in desc? 0099.jpg 0098.jpg ... 0001.jpg

Hello,
I implented your plugin on my test-page. (http://test1.prinla.com/en/includes)
Works quite fine, except for the opacity of the overlay.

Due to the fact that there are multiple galleries on the modular page, the script puts the overlay over most of the images even if the mouse it not hovering.

Any idea how to fix?

Also when the slider starts it doesn't show the main picture in the middle but several images with padding.

Any possibility to change this?

Hi Anton,

I try to intergrade several galleries into one Blog post. The Blog is based on the Quark Theme.

I tried your modular examples and the Page Inject Plugin. Unfortunately this works only once per page.

Do you have a solution for the problem?

Regards,
Reto