Gallery Hub

Before creating a gallery hub, you have to create your gallery pages - the "Gallery Hub" component only generates links to these pages, it does not automatically generate the actual galleries. You have several options.

1. You can create separate CMS pages or "Pages Pages" or posts, just make sure to name them after the slug of the gallery that is shown on that given page. Also, set the URL of the pages to be similar, so that the only difference is in the address of the separate pages is the gallery slug.
   
   For example, let's say you've created a gallery of "ants" and a gallery of "ladybugs" using the back-end Galleries page. You add the keyword "bugs" to both galleries, and now you wish to show a "hub" of all "bug" galleries. You then create a page that shows a gallery of "ants", and you set the page URL to "/galleries/ants". That's fine. You then make a separate page where you show a gallery of ladybugs. Make sure to then set the URL of that page to "/galleries/ladybugs". This way you can then create a third, "Galleries of Bugs" page, add the "Gallery Hub" component to it, and then set the "Link URL" to: /galleries/%slug%
   
   
2. Another option is to create a "dynamic" gallery page where the actual gallery to be shown is passed in as a URL parameter.
   
   You will have to create a dedicated gallery page and set the "URL" to something like: /gallery/:gallery_code?|^[a-z0-9\-\_]+$
   
   ...additionally, you will have to set the "Media Folder or Gallery" in your component inspector to ":gallery_code"
   
   This way the page will show whatever gallery is passed to it in the page URL. Please refer to the Novemeber Gallery Cookbook for a walk-through of this technique. Once your dynamic gallery page is set up, you can create your "Gallery Hub" page and set the "Link URL" to /gallery/%slug%.

  Settings used for this example:

{% component 'galleryHub' %}

Explanation: We use the component inspector to set our options. We only wish to see galleries that we have added the "city" keyword to, so we set the "Hup Type" to "Keyword: city". Note that this option only works with galleries created through the "Galleries" back-end page, since it's not possible to add "keywords" to galleries uploaded into a folder using the OctoberCMS media manager. We also have to set the "Link URL", since this is required. We leave everything else as-is. We don't need to write any custom html/Twig markup, all we need is the component tag as shown in the Page HTML box above.

This example assumes that your gallery component has the alias "galleryHub". The default component partial tries to show the preview image of each gallery, if available.

  Settings used for this example:

{% component 'galleryHub2' %}

Explanation: The only difference from the previous example is that we are showing all galleries with the keyword "Water", and we set the hub to display as a "List of Links with Title Only."

  Settings used for this example:

<div style="width: 100px; height: 100px; margin: 10px; float: left; background: black url('%preview_image_url%') center center/cover; display: flex; align-items: center;"><a href="%url%" style="color: white; text-shadow: 0px 0px 7px #000000; text-align: center;">%name%</a></div>

{% component 'galleryHub3' %}

Explanation: in this example we set the "Display as" option to "Set the Template Below" so we can define our own template. We then use some placeholders that will be replaced with values taken from the given gallery. Some of the available placeholders are:

Hub

Gallery Details	Preview Image	First Image	2nd Image	3rd Image
Name: budapest Type: OCTOBER_MEDIA_MANAGER_FOLDER Slug: Description: Keywords: Updated: 2026-11-05 # of images: 38					→ Open
Name: plants-and-flowers Type: OCTOBER_MEDIA_MANAGER_FOLDER Slug: Description: Keywords: Updated: 2026-11-05 # of images: 14					→ Open
Name: travels-and-landscapes Type: OCTOBER_MEDIA_MANAGER_FOLDER Slug: Description: Keywords: Updated: 2026-11-05 # of images: 31					→ Open
Name: Budapest Is Beautiful Type: NOVEMBER_GALLERY Slug: budapest_gallery Description: Europe's most beautiful capital! Keywords: city, landscape, water Updated: 2022-08-02 # of images: 7					→ Open
Name: Cute Cat Pix Type: NOVEMBER_GALLERY Slug: cute-cat-pix Description: cats, feline, felis catus, macska, cica, gata, gato, katze, kot Keywords: Updated: 2019-08-22 # of images: 1	No preview image set!		Unavailable	Unavailable	→ Open
Name: Mountains Type: NOVEMBER_GALLERY Slug: mountains Description: mountain, Appalachian, Alps, Armenia, Ararat Keywords: landscape Updated: 2020-07-07 # of images: 9					→ Open
Name: Patterns in Nature Type: NOVEMBER_GALLERY Slug: patterns-nature Description: patterns, nature, desktop, wallpaper, high resolution, field Keywords: Updated: 2022-08-01 # of images: 18					→ Open
Name: Philippines Type: NOVEMBER_GALLERY Slug: philippines Description: Keywords: water Updated: 2020-07-08 # of images: 10					→ Open
Name: U.S.A. Type: NOVEMBER_GALLERY Slug: usa Description: Photos from the land of the free Keywords: city Updated: 2020-07-07 # of images: 6					→ Open
Name: Waters Type: NOVEMBER_GALLERY Slug: waters Description: lakes, oceans, rivers, stream, ponds Keywords: water, landscape Updated: 2020-07-07 # of images: 14					→ Open
Name: Weddings Type: NOVEMBER_GALLERY Slug: weddings Description: Keywords: Updated: 2019-11-02 # of images: 4	No preview image set!				→ Open

  Settings used for this example:

{% component 'galleryHub4' %}
{{ debug(galleryHub4.galleries) }}
{% set galleries = galleryHub4.galleries %}
{% if galleries|length > 0 %}
	<div id="{{galleryHub4.id}}">
		<table>
			<tr>
				<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>
			</tr>
		{% for gallery in galleries %}
			<tr>
				<td>Name: {{ gallery.name }}<br>
					Type: {{ gallery.type }}<br>
					Slug: {{ gallery.slug }}<br>
					Description: {{ gallery.description }}<br>
					Keywords: {{ gallery.keywords }}<br>
					Updated: {{ gallery.updatedAt|date('Y-m-d') }}<br>
					# of images: {{ gallery.items|length }}
				</td>
				<td>
					{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>
					{% else %}No preview image set!{% endif %}
				</td>
				<td>
					{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>
					{% else %}Unavailable{% endif %}
				</td>
				<td>
					{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>
					{% else %}Unavailable{% endif %}
				</td>
				<td>
					{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>
					{% else %}Unavailable{% endif %}
				</td>
				<td>
					<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>
				</td>
			</tr>
		{% endfor %}
		</table>
	</div>
{% endif %}

Explanation: here we illustrate how you can write your own Twig code to render your gallery hub page. We set the "Display as" to "Write your own Twig code". This way the component will not render any links. The Galleries that match the criteria set in "Hub Type" using the component inspector will be avaiable from the page variable galleryHub.galleries, where "galleryHub" should be replaced with the alias of your component. The collection includes information about each gallery. In case of galleries uploaded using the "Galleries" back-end page, the collection will even include information on the images in those galleries. So, if you wanted, you could write code to render all of the images in all of the matching galleries. In this example we show some information about the galleries, the preview image, and the first three images in each gallery.

Hint: To dig into the galleries (or any other) variable/collection, you have two options. You can simply add {{ dump(galleryHub.galleries.toArray) }} on your page after the component definition and it will print debug information about that variable straight in your page. You should then see something like this:

Click any of the gallery names to "drill-down" and see its public properties. To see all of the properties of the components itself, do: {{ dump(galleryHub.toArray) }}. The result in this instance is:

Learn more aboud dump in the official Twig docs. Note that "the dump function won’t display anything if the debug option on the environment is not enabled". To enable debug mode on your site, edit the app.php config file in your config directory. Learn more about debug mode in the OctoberCMS docs!

Alternatively, you can install the Debugbar plugin and then add {{ debug(galleryHub.galleries) }} to your page to show debug information in the Laravel debugbar. To see all public properties of a gallery, do: {{ debug(galleryHub.galleries.first.toArray) }}. Make sure to replace "galleryHub" with the alias of your component as set in the component options!