Gallery Hub

This component loads a list of galleries without actually rendering any galleries. Use this if you wish to show a "hub" page with a link to all of your galleries.

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

Hub

  Settings used for this example:

Component Inspector

Hub TypeKeyword: city
Order byDefault
Max Galleries100
Link URL/demos/dynamic-gallery/%slug%
Open in new tab?Checked
Display asLinks with Preview Image
Link Template

Page HTML

{% 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 Inspector

Hub TypeKeyword: water
Order byDefault
Max Galleries100
Link URL/demos/dynamic-gallery/%slug%
Open in new tab?Checked
Display asList of Links with Title Only
Link Template

Page HTML

{% 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:

Component Inspector

Hub TypeKeyword: water
Order byDefault
Max Galleries100
Link URL/demos/dynamic-gallery/%slug%
Open in new tab?Checked
Display asSet the Template Below
Link Template
<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>

Page HTML

{% 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:

%type% Gallery type, can be NOVEMBER_GALLERY, OCTOBER_MEDIA_MANAGER_FOLDER, or BLOG_POST
%url% Gallery URL
%slug% Gallery slug*
%folder% Gallery description*
%name% Gallery name (or the folder name in case of galleries uploaded using the OctoberCMS media manager
%description% Gallery description*
%keywords% Gallery keywords*
%created_at% Gallery creation date*
%updated_at% Gallery last update date*
%preview_image_url% Preview image URL (if set)*
%published% Gallery is published or not*
%preview_image_title% Preview image title*
%preview_image_description% Preview image description*
%preview_image_width% Preview image width*
%preview_image_height% Preview image height*
%preview_image_filename% Preview image filename*
%preview_image_filesize% Preview image file size*
%items_count% Count of images
* available for galleries created on the "Galleries" back-end page

Hub

Gallery DetailsPreview ImageFirst Image2nd Image3rd Image
Name: travels-and-landscapes
Type: OCTOBER_MEDIA_MANAGER_FOLDER
Slug:
Description:
Keywords:
Updated: 2021-09-19
# of images: 0
No preview image set! Unavailable Unavailable Unavailable → Open
Name: plants-and-flowers
Type: OCTOBER_MEDIA_MANAGER_FOLDER
Slug:
Description:
Keywords:
Updated: 2021-09-19
# of images: 0
No preview image set! Unavailable Unavailable Unavailable → Open
Name: budapest
Type: OCTOBER_MEDIA_MANAGER_FOLDER
Slug:
Description:
Keywords:
Updated: 2021-09-19
# of images: 0
No preview image set! Unavailable Unavailable Unavailable → Open
Name: Budapest Is Beautiful
Type: NOVEMBER_GALLERY
Slug: budapest_gallery
Description: Europe's most beautiful capital!
Keywords: city, landscape, water
Updated: 2020-07-08
# 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: 2019-08-22
# of images: 17
→ 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 Inspector

Hub TypeAll Galleries
Order byDefault
Max Galleries100
Link URL/demos/dynamic-gallery/%slug%
Open in new tab?Checked
Display asWrite your own Twig Code
Link Template

Page HTML

{% 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:

Array variables
budapest_gallery Gallery
Gallery {#1005
  +type: "NOVEMBER_GALLERY"
  +folder: null
  +dbg: null
  +name: "Budapest Is Beautiful"
  +slug: "budapest_gallery"
  +description: "Europe's most beautiful capital!"
  +keywords: "city, landscape, water"
  +publishedAt: null
  +createdAt: Argon {#1025
    +"date": "2019-08-22 11:26:48.000000"
    +"timezone_type": 3
    +"timezone": "UTC"
  }
  +updatedAt: Argon {#1105
    +"date": "2020-07-08 11:22:50.000000"
    +"timezone_type": 3
    +"timezone": "UTC"
  }
  +previewImage: GalleryItem {#1104
    -component: GalleryHub {#909
      +dbg: null
      +galleries: Collection {#1242
        #items: array:2 [
          "budapest_gallery" => Gallery {#1005}
          "usa" => Gallery {#928
            +type: "NOVEMBER_GALLERY"
            +folder: null
            +dbg: null
            +name: "U.S.A."
            +slug: "usa"
            +description: "Photos from the land of the free"
            +keywords: "city"
            +publishedAt: Argon {#1106
              +"date": "2019-08-22 00:00:00.000000"
              +"timezone_type": 3
              +"timezone": "UTC"
            }
            +createdAt: Argon {#1238
              +"date": "2019-08-21 18:31:15.000000"
              +"timezone_type": 3
              +"timezone": "UTC"
            }
            +updatedAt: Argon {#1237
              +"date": "2020-07-07 14:54:37.000000"
              +"timezone_type": 3
              +"timezone": "UTC"
            }
            +previewImage: GalleryItem {#1239
              -component: GalleryHub {#909}
              +title: null
              +description: null
              +sortOrder: 32
              +file: null
              +octoberImageFile: File {#1300
                #table: "system_files"
                +morphTo: array:1 [ …1]
                #guarded: array:1 [ …1]
                #hidden: array:3 [ …3]
                #appends: array:2 [ …2]
                +data: null
                #autoMimeTypes: array:9 [ …9]
                +implement: null
                +attributes: array:14 [ …14]
                #jsonable: []
                #dates: []
                +duplicateCache: true
                #connection: "mysql"
                #primaryKey: "id"
                #keyType: "int"
                +incrementing: true
                #with: []
                #withCount: []
                #perPage: 15
                +exists: true
                +wasRecentlyCreated: false
                #original: array:14 [ …14]
                #changes: []
                #casts: []
                #dateFormat: null
                #dispatchesEvents: []
                #observables: []
                #relations: []
                #touches: []
                +timestamps: true
                #visible: []
                #fillable: []
                +hasMany: []
                +hasOne: []
                +belongsTo: []
                +belongsToMany: []
                +morphOne: []
                +morphMany: []
                +morphToMany: []
                +morphedByMany: []
                +attachOne: []
                +attachMany: []
                +hasManyThrough: []
                #emitterSingleEventCollection: []
                #emitterEventCollection: []
                #emitterEventSorted: []
                #extensionData: array:4 [ …4]
                +sessionKey: null
              }
              +width: 1110
              +height: 741
              +type: 2
              +orientation: "horizontal"
              +fileNameWithoutExtension: "5d5e781c8a022349018179"
              +fileExtension: "jpg"
              +fileName: "5d5e781c8a022349018179.jpg"
              +filePath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e78/1c8"
              +fileRealPath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e78/1c8/5d5e781c8a022349018179.jpg"
              +fileSize: 50327
              +relativeFilePath: "/storage/app/uploads/public/5d5/e78/1c8/5d5e781c8a022349018179.jpg"
              +uploaded: DateTime {#1113
                +"date": "2019-08-22 11:10:20.000000"
                +"timezone_type": 3
                +"timezone": "UTC"
              }
              +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e78/1c8/5d5e781c8a022349018179.jpg"
            }
            +published: 1
            +items: Collection {#1107
              #items: array:6 [
                0 => GalleryItem {#1163 …19}
                1 => GalleryItem {#1226 …19}
                2 => GalleryItem {#1170 …19}
                3 => GalleryItem {#1232 …19}
                4 => GalleryItem {#1234 …19}
                5 => GalleryItem {#1236 …19}
              ]
            }
            +sortBy: "default"
            +sortDirection: "ASC"
            +url: "/demos/dynamic-gallery/usa"
          }
        ]
      }
      +dirs: null
      +hubType: "CITY"
      +keyword: "CITY"
      +sortBy: "name"
      +sortDir: "ASC"
      +maxItems: 100
      +linkUrl: "/demos/dynamic-gallery/%slug%"
      +openInNewTab: true
      +visualization: "title"
      +visualizationTemplate: ""
      +id: "galleryHub6146b7dc8484e"
      +alias: "galleryHub"
      +name: "galleryHub"
      +isHidden: false
      +pluginIcon: null
      +componentCssClass: null
      +inspectorEnabled: true
      #dirName: "/zenware/novembergallery/components/galleryhub"
      #controller: Controller {#448
        #theme: Theme {#449
          #dirName: "demo"
          #configCache: null
        }
        #router: Router {#521
          #theme: Theme {#449}
          #url: "demo/gallery-hub"
          #parameters: []
          #urlMap: array:18 [
            0 => array:2 [
              "file" => "cookbook/overriding-partials.htm"
              "pattern" => "/cookbook/overriding-partials"
            ]
            1 => array:2 [
              "file" => "cookbook/blog-page.htm"
              "pattern" => "/blog/:slug"
            ]
            2 => array:2 [
              "file" => "cookbook/swiper-any-device.htm"
              "pattern" => "/cookbook/swiper-for-any-device"
            ]
            3 => array:2 [
              "file" => "error.htm"
              "pattern" => "/error"
            ]
            4 => array:2 [
              "file" => "plugins.htm"
              "pattern" => "/demo/plugins"
            ]
            5 => array:2 [
              "file" => "home.htm"
              "pattern" => "/"
            ]
            6 => array:2 [
              "file" => "demos/embedded-gallery-combined.htm"
              "pattern" => "/demo/embedded-gallery-combined"
            ]
            7 => array:2 [
              "file" => "demos/swiper.htm"
              "pattern" => "/demo/swiper"
            ]
            8 => array:2 [
              "file" => "demos/popup-lightbox.htm"
              "pattern" => "/demo/popup-lightbox"
            ]
            9 => array:2 [
              "file" => "demos/dynamic-gallery.htm"
              "pattern" => "/demos/dynamic-gallery/:gallery_code|^budapest|plants-and-flowers|travels-and-landscapes|cute-cat-pix|mountains|patterns-nature|philippines|usa|waters|weddings$"
            ]
            10 => array:2 [
              "file" => "demos/image-list-only.htm"
              "pattern" => "/demo/image-list-only"
            ]
            11 => array:2 [
              "file" => "demos/customization.htm"
              "pattern" => "/demo/customization"
            ]
            12 => array:2 [
              "file" => "demos/embedded-gallery-slider.htm"
              "pattern" => "/demo/embedded-gallery-slider"
            ]
            13 => array:2 [
              "file" => "demos/gallery-hub.htm"
              "pattern" => "/demo/gallery-hub"
            ]
            14 => array:2 [
              "file" => "demos/video-gallery.htm"
              "pattern" => "/demo/video-gallery"
            ]
            15 => array:2 [
              "file" => "demos/embedded-gallery-carousel.htm"
              "pattern" => "/demo/embedded-gallery-carousel"
            ]
            16 => array:2 [
              "file" => "demos/embedded-gallery-tiles.htm"
              "pattern" => "/demo/embedded-gallery-tiles"
            ]
            17 => array:2 [
              "file" => "404.htm"
              "pattern" => "/404"
            ]
          ]
          #routerObj: Router {#445
            #routeMap: array:18 [
              "cookbook/overriding-partials.htm" => Rule {#815
                #ruleName: "cookbook/overriding-partials.htm"
                #rulePattern: "/cookbook/overriding-partials"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/cookbook/overriding-partials"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/gallery-hub.htm" => Rule {#836
                #ruleName: "demos/gallery-hub.htm"
                #rulePattern: "/demo/gallery-hub"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/gallery-hub"
                +segments: array:2 [
                  0 => "demo"
                  1 => "gallery-hub"
                ]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "cookbook/swiper-any-device.htm" => Rule {#821
                #ruleName: "cookbook/swiper-any-device.htm"
                #rulePattern: "/cookbook/swiper-for-any-device"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/cookbook/swiper-for-any-device"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/embedded-gallery-tiles.htm" => Rule {#839
                #ruleName: "demos/embedded-gallery-tiles.htm"
                #rulePattern: "/demo/embedded-gallery-tiles"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/embedded-gallery-tiles"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "plugins.htm" => Rule {#827
                #ruleName: "plugins.htm"
                #rulePattern: "/demo/plugins"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/plugins"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/embedded-gallery-carousel.htm" => Rule {#838
                #ruleName: "demos/embedded-gallery-carousel.htm"
                #rulePattern: "/demo/embedded-gallery-carousel"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/embedded-gallery-carousel"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/embedded-gallery-combined.htm" => Rule {#829
                #ruleName: "demos/embedded-gallery-combined.htm"
                #rulePattern: "/demo/embedded-gallery-combined"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/embedded-gallery-combined"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/swiper.htm" => Rule {#830
                #ruleName: "demos/swiper.htm"
                #rulePattern: "/demo/swiper"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/swiper"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/popup-lightbox.htm" => Rule {#831
                #ruleName: "demos/popup-lightbox.htm"
                #rulePattern: "/demo/popup-lightbox"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/popup-lightbox"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/video-gallery.htm" => Rule {#837
                #ruleName: "demos/video-gallery.htm"
                #rulePattern: "/demo/video-gallery"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/video-gallery"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/image-list-only.htm" => Rule {#833
                #ruleName: "demos/image-list-only.htm"
                #rulePattern: "/demo/image-list-only"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/image-list-only"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/customization.htm" => Rule {#834
                #ruleName: "demos/customization.htm"
                #rulePattern: "/demo/customization"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/customization"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/embedded-gallery-slider.htm" => Rule {#835
                #ruleName: "demos/embedded-gallery-slider.htm"
                #rulePattern: "/demo/embedded-gallery-slider"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/embedded-gallery-slider"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/dynamic-gallery.htm" => Rule {#832
                #ruleName: "demos/dynamic-gallery.htm"
                #rulePattern: "/demos/dynamic-gallery/:gallery_code|^budapest|plants-and-flowers|travels-and-landscapes|cute-cat-pix|mountains|patterns-nature|philippines|usa|waters|weddings$"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demos/dynamic-gallery"
                +segments: array:3 [ …3]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 1
                +wildSegmentCount: 0
              }
              "error.htm" => Rule {#824
                #ruleName: "error.htm"
                #rulePattern: "/error"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/error"
                +segments: array:1 [ …1]
                +staticSegmentCount: 1
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "404.htm" => Rule {#840
                #ruleName: "404.htm"
                #rulePattern: "/404"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/404"
                +segments: array:1 [ …1]
                +staticSegmentCount: 1
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "cookbook/blog-page.htm" => Rule {#825
                #ruleName: "cookbook/blog-page.htm"
                #rulePattern: "/blog/:slug"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/blog"
                +segments: array:2 [ …2]
                +staticSegmentCount: 1
                +dynamicSegmentCount: 1
                +wildSegmentCount: 0
              }
              "home.htm" => Rule {#828
                #ruleName: "home.htm"
                #rulePattern: "/"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/"
                +segments: []
                +staticSegmentCount: 0
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
            ]
            #matchedRouteRule: Rule {#836}
            #parameters: []
          }
        }
        #loader: Loader {#464
          #obj: ComponentPartial {#2849
            #component: GalleryHub {#912
              +dbg: "/var/www/novembergallery.zenware.hu/public_html/storage/app/media/galleries"
              +galleries: Collection {#2563
                #items: array:11 [
                  "travels-and-landscapes" => Gallery {#1850 …16}
                  "plants-and-flowers" => Gallery {#1704 …16}
                  "budapest" => Gallery {#1849 …16}
                  "budapest_gallery" => Gallery {#1842 …16}
                  "cute-cat-pix" => Gallery {#1845 …16}
                  "mountains" => Gallery {#1947 …16}
                  "patterns-nature" => Gallery {#1953 …16}
                  "philippines" => Gallery {#2150 …16}
                  "usa" => Gallery {#2327 …16}
                  "waters" => Gallery {#2416 …16}
                  "weddings" => Gallery {#2443 …16}
                ]
              }
              +dirs: array:3 [
                0 => "/var/www/novembergallery.zenware.hu/public_html/storage/app/media/galleries/travels-and-landscapes"
                1 => "/var/www/novembergallery.zenware.hu/public_html/storage/app/media/galleries/plants-and-flowers"
                2 => "/var/www/novembergallery.zenware.hu/public_html/storage/app/media/galleries/budapest"
              ]
              +hubType: "[ALL]"
              +keyword: false
              +sortBy: "name"
              +sortDir: "ASC"
              +maxItems: 100
              +linkUrl: "/demos/dynamic-gallery/%slug%"
              +openInNewTab: true
              +visualization: "custom"
              +visualizationTemplate: ""
              +id: "galleryHub46146b7dc910a8"
              +alias: "galleryHub4"
              +name: "galleryHub"
              +isHidden: false
              +pluginIcon: null
              +componentCssClass: null
              +inspectorEnabled: true
              #dirName: "/zenware/novembergallery/components/galleryhub"
              #controller: Controller {#448}
              #page: Cms60fc337298a8a939074938_ca15071c65bc5d0bd90bcde9c887b3a8Class {#896
                +page: Page {#851
                  #dirName: "pages"
                  #fillable: array:10 [
                    0 => "url"
                    1 => "layout"
                    2 => "title"
                    3 => "description"
                    4 => "is_hidden"
                    5 => "meta_title"
                    6 => "meta_description"
                    7 => "markup"
                    8 => "settings"
                    9 => "code"
                  ]
                  +apiBag: []
                  +rules: array:2 [
                    "title" => "required"
                    "url" => array:2 [
                      0 => "required"
                      1 => "regex:/^\/[a-z0-9\/\:_\-\*\[\]\+\?\|\.\^\\$]*$/i"
                    ]
                  ]
                  +components: array:4 [
                    "galleryHub" => GalleryHub {#909}
                    "galleryHub2" => GalleryHub {#910
                      +dbg: null
                      +galleries: Collection {#1650
                        #items: array:3 [
                          "budapest_gallery" => Gallery {#1353 …16}
                          "philippines" => Gallery {#952 …16}
                          "waters" => Gallery {#1387 …16}
                        ]
                      }
                      +dirs: null
                      +hubType: "WATER"
                      +keyword: "WATER"
                      +sortBy: "name"
                      +sortDir: "ASC"
                      +maxItems: 100
                      +linkUrl: "/demos/dynamic-gallery/%slug%"
                      +openInNewTab: true
                      +visualization: "titleOnly"
                      +visualizationTemplate: ""
                      +id: "galleryHub26146b7dc8f672"
                      +alias: "galleryHub2"
                      +name: "galleryHub"
                      +isHidden: false
                      +pluginIcon: null
                      +componentCssClass: null
                      +inspectorEnabled: true
                      #dirName: "/zenware/novembergallery/components/galleryhub"
                      #controller: Controller {#448}
                      #page: Cms60fc337298a8a939074938_ca15071c65bc5d0bd90bcde9c887b3a8Class {#896}
                      #externalPropertyNames: []
                      +implement: null
                      #extensionData: array:4 [
                        "extensions" => []
                        "methods" => []
                        "dynamicMethods" => []
                        "dynamicProperties" => []
                      ]
                      #assets: array:3 [
                        "js" => array:1 [ …1]
                        "css" => array:1 [ …1]
                        "rss" => []
                      ]
                      +assetPath: "/plugins/zenware/novembergallery"
                      #emitterSingleEventCollection: []
                      #emitterEventCollection: []
                      #emitterEventSorted: []
                      #properties: array:6 [
                        "hubType" => "WATER"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "template" => ""
                        "visualization" => "titleOnly"
                      ]
                    }
                    "galleryHub3" => GalleryHub {#911
                      +dbg: null
                      +galleries: Collection {#1833
                        #items: array:3 [
                          "budapest_gallery" => Gallery {#1706 …16}
                          "philippines" => Gallery {#1296 …16}
                          "waters" => Gallery {#1745 …16}
                        ]
                      }
                      +dirs: null
                      +hubType: "WATER"
                      +keyword: "WATER"
                      +sortBy: "name"
                      +sortDir: "ASC"
                      +maxItems: 100
                      +linkUrl: "/demos/dynamic-gallery/%slug%"
                      +openInNewTab: true
                      +visualization: "template"
                      +visualizationTemplate: "<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; width: 100px;">%name%</a></div>"
                      +id: "galleryHub36146b7dc9032a"
                      +alias: "galleryHub3"
                      +name: "galleryHub"
                      +isHidden: false
                      +pluginIcon: null
                      +componentCssClass: null
                      +inspectorEnabled: true
                      #dirName: "/zenware/novembergallery/components/galleryhub"
                      #controller: Controller {#448}
                      #page: Cms60fc337298a8a939074938_ca15071c65bc5d0bd90bcde9c887b3a8Class {#896}
                      #externalPropertyNames: []
                      +implement: null
                      #extensionData: array:4 [
                        "extensions" => []
                        "methods" => []
                        "dynamicMethods" => []
                        "dynamicProperties" => []
                      ]
                      #assets: array:3 [
                        "js" => array:1 [ …1]
                        "css" => array:1 [ …1]
                        "rss" => []
                      ]
                      +assetPath: "/plugins/zenware/novembergallery"
                      #emitterSingleEventCollection: []
                      #emitterEventCollection: []
                      #emitterEventSorted: []
                      #properties: array:6 [
                        "hubType" => "WATER"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "template" => "<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; width: 100px;">%name%</a></div>"
                        "visualization" => "template"
                      ]
                    }
                    "galleryHub4" => GalleryHub {#912}
                  ]
                  +settings: array:5 [
                    "title" => "Gallery Hub"
                    "url" => "/demo/gallery-hub"
                    "layout" => "default"
                    "is_hidden" => "0"
                    "components" => array:4 [
                      "galleryHub" => array:5 [
                        "hubType" => "CITY"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "visualization" => "default"
                      ]
                      "galleryHub galleryHub2" => array:5 [
                        "hubType" => "WATER"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "visualization" => "titleOnly"
                      ]
                      "galleryHub galleryHub3" => array:6 [
                        "hubType" => "WATER"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "visualization" => "template"
                        "template" => "<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; width: 100px;">%name%</a></div>"
                      ]
                      "galleryHub galleryHub4" => array:5 [
                        "hubType" => "[ALL]"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "visualization" => "custom"
                      ]
                    ]
                  ]
                  +viewBag: []
                  #passthru: array:5 [
                    0 => "lists"
                    1 => "where"
                    2 => "sortBy"
                    3 => "whereComponent"
                    4 => "withComponent"
                  ]
                  #isCompoundObject: true
                  #viewBagCache: ViewBag {#857
                    +isHidden: true
                    +id: null
                    +alias: null
                    +name: "viewBag"
                    +pluginIcon: null
                    +componentCssClass: null
                    +inspectorEnabled: true
                    #dirName: "/cms/components/viewbag"
                    #controller: null
                    #page: null
                    #externalPropertyNames: []
                    +implement: null
                    #extensionData: array:4 [
                      "extensions" => []
                      "methods" => []
                      "dynamicMethods" => []
                      "dynamicProperties" => []
                    ]
                    #assets: array:3 [
                      "js" => []
                      "css" => []
                      "rss" => []
                    ]
                    +assetPath: "/plugins/cms"
                    #emitterSingleEventCollection: []
                    #emitterEventCollection: []
                    #emitterEventSorted: []
                    #properties: []
                  }
                  +attributeNames: []
                  +customMessages: array:1 [
                    "url.regex" => "Invalid URL format. The URL should start with the forward slash symbol and can contain digits, Latin letters and the following symbols: ._-[]:?|/+*^$"
                  ]
                  #themeCache: Theme {#906
                    #dirName: "demo"
                    #configCache: null
                  }
                  #datasource: "demo"
                  +attributes: array:13 [
                    "fileName" => "demos/gallery-hub.htm"
                    "content" => """
                      title = "Gallery Hub"\n
                      url = "/demo/gallery-hub"\n
                      layout = "default"\n
                      is_hidden = 0\n
                      \n
                      [galleryHub]\n
                      hubType = "CITY"\n
                      maxItems = 100\n
                      linkUrl = "/demos/dynamic-gallery/%slug%"\n
                      openInNewTab = 1\n
                      visualization = "default"\n
                      \n
                      [galleryHub galleryHub2]\n
                      hubType = "WATER"\n
                      maxItems = 100\n
                      linkUrl = "/demos/dynamic-gallery/%slug%"\n
                      openInNewTab = 1\n
                      visualization = "titleOnly"\n
                      \n
                      [galleryHub galleryHub3]\n
                      hubType = "WATER"\n
                      maxItems = 100\n
                      linkUrl = "/demos/dynamic-gallery/%slug%"\n
                      openInNewTab = 1\n
                      visualization = "template"\n
                      template = "<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; width: 100px;\">%name%</a></div>"\n
                      \n
                      [galleryHub galleryHub4]\n
                      hubType = "[ALL]"\n
                      maxItems = 100\n
                      linkUrl = "/demos/dynamic-gallery/%slug%"\n
                      openInNewTab = 1\n
                      visualization = "custom"\n
                      ==\n
                      <?php\n
                      function onTest()\n
                      {\n
                      }\n
                      ?>\n
                      ==\n
                      <div class="jumbotron title-js">\n
                          <div class="container">\n
                              <div class="row">\n
                                  <div class="col-8">\n
                                      <h1>Gallery Hub</h1>\n
                                      <p>This component loads a list of galleries without actually rendering any galleries. Use this if you wish to show a "hub" page with a link to all of your galleries.</p>\n
                                  </div>\n
                              </div>\n
                          </div>\n
                      </div>\n
                      \n
                      <div class="container">\n
                      \n
                      \t<!-- Intro -->\n
                      \t<p>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.</p>\n
                      \t<ol>\n
                      \t\t<li>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.<br><br>\n
                      \t\tFor example, let's say you've created a gallery of "ants" and a gallery of "ladybugs" using the back-end <i>Galleries</i> 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: <i>/galleries/%slug%</i><br><br></li>\n
                      \t\t<li>Another option is to create a "dynamic" gallery page where the actual gallery to be shown is passed in as a URL parameter.<br><br>You will have to create a dedicated gallery page and set the "URL" to something like: <i>/gallery/:gallery_code?|^[a-z0-9\-\_]+$</i><br><br>...additionally, you will have to set the "Media Folder or Gallery" in your component inspector to ":gallery_code"<br><br> This way the page will show whatever gallery is passed to it in the page URL. Please refer to the <a href="https://its.zensoft.hu/books/november-gallery-cookbook/page/dynamic-gallery-using-url-parameters" target="_blank">Novemeber Gallery Cookbook</a> 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 <i>/gallery/%slug%</i>.\n
                      \t</ol>\n
                      \n
                      \t\t\n
                          \n
                          <!-- Demo #1 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "CITY" Galleries</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub' %}\n
                      \n
                                  {{ debug(galleryHub.galleries) }}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: city</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Links with Preview Image</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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 <i>Page HTML</i> box above.<br>\n
                          <br>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.</p>\n
                          <br>\n
                      \n
                      \t\t\n
                          \n
                          <!-- Demo #2 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "WATER" Galleries, Title Only</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub2' %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>List of Links with Title Only</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub2' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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."</p>\n
                          <br>\n
                      \t\n
                      \t\t\n
                          \n
                          <!-- Demo #3 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "WATER" Galleries with a Custom Template</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub3' %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Set the Template Below</td></tr>\n
                                      <tr><td>Link Template</td><td>\n
                      \t\t\t\t\t<pre><code>{% filter escape %}{% verbatim %}<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>{% endverbatim %}{% endfilter %}</code></pre>\t\n
                      \t\t\t\t</td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub3' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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:\n
                      \t</p>\n
                      \t<table>\n
                      \t\t<tr><td>%type%                        </td><td>Gallery type, can be NOVEMBER_GALLERY, OCTOBER_MEDIA_MANAGER_FOLDER, or BLOG_POST</td></tr>\n
                      \t\t<tr><td>%url%                         </td><td>Gallery URL</td></tr>\n
                      \t\t<tr><td>%slug%                        </td><td>Gallery slug*</td></tr>\n
                      \t\t<tr><td>%folder%                      </td><td>Gallery description*</td></tr>\n
                      \t\t<tr><td>%name%                        </td><td>Gallery name (or the folder name in case of galleries uploaded using the OctoberCMS media manager</td></tr>\n
                      \t\t<tr><td>%description%                 </td><td>Gallery description*</td></tr>\n
                      \t\t<tr><td>%keywords%                    </td><td>Gallery keywords*</td></tr>\n
                      \t\t<tr><td>%created_at%                  </td><td>Gallery creation date*</td></tr>\n
                      \t\t<tr><td>%updated_at%                  </td><td>Gallery last update date*</td></tr>\n
                      \t\t<tr><td>%preview_image_url%           </td><td>Preview image URL (if set)*</td></tr>\n
                      \t\t<tr><td>%published%                   </td><td>Gallery is published or not*</td></tr>\n
                      \t\t<tr><td>%preview_image_title%         </td><td>Preview image title*</td></tr>\n
                      \t\t<tr><td>%preview_image_description%   </td><td>Preview image description*</td></tr>\n
                      \t\t<tr><td>%preview_image_width%         </td><td>Preview image width*</td></tr>\n
                      \t\t<tr><td>%preview_image_height%        </td><td>Preview image height*</td></tr>\n
                      \t\t<tr><td>%preview_image_filename%      </td><td>Preview image filename*</td></tr>\n
                      \t\t<tr><td>%preview_image_filesize%      </td><td>Preview image file size*</td></tr>\n
                      \t\t<tr><td>%items_count%                 </td><td>Count of images</td></tr>\n
                      \t</table>\n
                      * available for galleries created on the "Galleries" back-end page\n
                          <br>\n
                          <br>\n
                          \n
                      \t\t\n
                          \n
                          <!-- Demo #4 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all available Galleries, Custom Visualization with Twig Code</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body" style="overflow-x: scroll;">\n
                                  \n
                                  {% component 'galleryHub4' %}\n
                      \t\t\t\n
                      \t\t\t{{ debug(galleryHub4.galleries) }}\n
                      \n
                      \t\t\t{% set galleries = galleryHub4.galleries %}\n
                      \n
                      \t\t\t{% if galleries|length > 0 %}\n
                      \n
                      \t\t\t\t<div id="{{galleryHub4.id}}">\n
                      \t\t\t\t\t<table>\n
                      \t\t\t\t\t\t<tr>\n
                      \t\t\t\t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                      \t\t\t\t\t\t</tr>\n
                      \t\t\t\t\t{% for gallery in galleries %}\n
                      \t\t\t\t\t\t<tr>\n
                      \t\t\t\t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                      \t\t\t\t\t\t\t\tType: {{ gallery.type }}<br>\n
                      \t\t\t\t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                      \t\t\t\t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                      \t\t\t\t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                      \t\t\t\t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                      \t\t\t\t\t\t\t\t# of images: {{ gallery.items|length }}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t</tr>\n
                      \t\t\t\t\t{% endfor %}\n
                      \t\t\t\t\t</table>\n
                      \t\t\t\t</div>\n
                      \n
                      \t\t\t{% endif %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>All Galleries</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Write your own Twig Code</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div style="max-width: 100%;">\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre style="overflow-x: scroll;"><code style="display: block; white-space: pre;">{% filter escape %}{% verbatim %}{% component 'galleryHub4' %}\n
                      {{ debug(galleryHub4.galleries) }}\n
                      {% set galleries = galleryHub4.galleries %}\n
                      {% if galleries|length > 0 %}\n
                      \t<div id="{{galleryHub4.id}}">\n
                      \t\t<table>\n
                      \t\t\t<tr>\n
                      \t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                      \t\t\t</tr>\n
                      \t\t{% for gallery in galleries %}\n
                      \t\t\t<tr>\n
                      \t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                      \t\t\t\t\tType: {{ gallery.type }}<br>\n
                      \t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                      \t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                      \t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                      \t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                      \t\t\t\t\t# of images: {{ gallery.items|length }}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                      \t\t\t\t</td>\n
                      \t\t\t</tr>\n
                      \t\t{% endfor %}\n
                      \t\t</table>\n
                      \t</div>\n
                      {% endif %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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 <code>galleryHub.galleries</code>, 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.</p>\n
                      \t<p>\n
                      \tHint: To dig into the galleries (or any other) variable/collection, you have two options. You can simply add <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.galleries.toArray) }}{% endverbatim %}{% endfilter %}</code> 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:</p>\n
                      \t{{ dump(galleryHub.galleries.toArray) }}\n
                      \t<p>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: <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.toArray) }}{% endverbatim %}{% endfilter %}</code>. The result in this instance is:\n
                      \t</p>\n
                      \t{{ dump(galleryHub.toArray) }}\n
                      \t<p><a href="https://twig.symfony.com/doc/2.x/functions/dump.html" target="_blank">Learn more aboud <i>dump</i> in the official Twig docs</a>. 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 <a href="https://octobercms.com/docs/setup/configuration#debug-mode">in the OctoberCMS docs!</a></p>\n
                      \t<p>Alternatively, you can install the Debugbar plugin and then add <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries) }}{% endverbatim %}{% endfilter %}</code> to your page to show debug information in the Laravel debugbar. To see all public properties of a gallery, do: <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries.first.toArray) }}{% endverbatim %}{% endfilter %}</code>. Make sure to replace "galleryHub" with the alias of your component as set in the component options!</p>\n
                      \n
                          \n
                          \n
                          \n
                      \n
                      \t\n
                          <!-- Details -->    \n
                          <br>\n
                          <br>\n
                          <div class="text-center">\n
                      \t\t\t<p><a href="{{ 'demos/image-list-only'|page }}" class="btn btn-lg btn-default">Continue to Image List Only</a></p>\n
                          </div>\n
                      \n
                      </div>
                      """
                    "mtime" => 1594283451
                    "markup" => """
                      <div class="jumbotron title-js">\n
                          <div class="container">\n
                              <div class="row">\n
                                  <div class="col-8">\n
                                      <h1>Gallery Hub</h1>\n
                                      <p>This component loads a list of galleries without actually rendering any galleries. Use this if you wish to show a "hub" page with a link to all of your galleries.</p>\n
                                  </div>\n
                              </div>\n
                          </div>\n
                      </div>\n
                      \n
                      <div class="container">\n
                      \n
                      \t<!-- Intro -->\n
                      \t<p>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.</p>\n
                      \t<ol>\n
                      \t\t<li>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.<br><br>\n
                      \t\tFor example, let's say you've created a gallery of "ants" and a gallery of "ladybugs" using the back-end <i>Galleries</i> 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: <i>/galleries/%slug%</i><br><br></li>\n
                      \t\t<li>Another option is to create a "dynamic" gallery page where the actual gallery to be shown is passed in as a URL parameter.<br><br>You will have to create a dedicated gallery page and set the "URL" to something like: <i>/gallery/:gallery_code?|^[a-z0-9\-\_]+$</i><br><br>...additionally, you will have to set the "Media Folder or Gallery" in your component inspector to ":gallery_code"<br><br> This way the page will show whatever gallery is passed to it in the page URL. Please refer to the <a href="https://its.zensoft.hu/books/november-gallery-cookbook/page/dynamic-gallery-using-url-parameters" target="_blank">Novemeber Gallery Cookbook</a> 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 <i>/gallery/%slug%</i>.\n
                      \t</ol>\n
                      \n
                      \t\t\n
                          \n
                          <!-- Demo #1 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "CITY" Galleries</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub' %}\n
                      \n
                                  {{ debug(galleryHub.galleries) }}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: city</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Links with Preview Image</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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 <i>Page HTML</i> box above.<br>\n
                          <br>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.</p>\n
                          <br>\n
                      \n
                      \t\t\n
                          \n
                          <!-- Demo #2 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "WATER" Galleries, Title Only</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub2' %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>List of Links with Title Only</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub2' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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."</p>\n
                          <br>\n
                      \t\n
                      \t\t\n
                          \n
                          <!-- Demo #3 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "WATER" Galleries with a Custom Template</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub3' %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Set the Template Below</td></tr>\n
                                      <tr><td>Link Template</td><td>\n
                      \t\t\t\t\t<pre><code>{% filter escape %}{% verbatim %}<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>{% endverbatim %}{% endfilter %}</code></pre>\t\n
                      \t\t\t\t</td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub3' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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:\n
                      \t</p>\n
                      \t<table>\n
                      \t\t<tr><td>%type%                        </td><td>Gallery type, can be NOVEMBER_GALLERY, OCTOBER_MEDIA_MANAGER_FOLDER, or BLOG_POST</td></tr>\n
                      \t\t<tr><td>%url%                         </td><td>Gallery URL</td></tr>\n
                      \t\t<tr><td>%slug%                        </td><td>Gallery slug*</td></tr>\n
                      \t\t<tr><td>%folder%                      </td><td>Gallery description*</td></tr>\n
                      \t\t<tr><td>%name%                        </td><td>Gallery name (or the folder name in case of galleries uploaded using the OctoberCMS media manager</td></tr>\n
                      \t\t<tr><td>%description%                 </td><td>Gallery description*</td></tr>\n
                      \t\t<tr><td>%keywords%                    </td><td>Gallery keywords*</td></tr>\n
                      \t\t<tr><td>%created_at%                  </td><td>Gallery creation date*</td></tr>\n
                      \t\t<tr><td>%updated_at%                  </td><td>Gallery last update date*</td></tr>\n
                      \t\t<tr><td>%preview_image_url%           </td><td>Preview image URL (if set)*</td></tr>\n
                      \t\t<tr><td>%published%                   </td><td>Gallery is published or not*</td></tr>\n
                      \t\t<tr><td>%preview_image_title%         </td><td>Preview image title*</td></tr>\n
                      \t\t<tr><td>%preview_image_description%   </td><td>Preview image description*</td></tr>\n
                      \t\t<tr><td>%preview_image_width%         </td><td>Preview image width*</td></tr>\n
                      \t\t<tr><td>%preview_image_height%        </td><td>Preview image height*</td></tr>\n
                      \t\t<tr><td>%preview_image_filename%      </td><td>Preview image filename*</td></tr>\n
                      \t\t<tr><td>%preview_image_filesize%      </td><td>Preview image file size*</td></tr>\n
                      \t\t<tr><td>%items_count%                 </td><td>Count of images</td></tr>\n
                      \t</table>\n
                      * available for galleries created on the "Galleries" back-end page\n
                          <br>\n
                          <br>\n
                          \n
                      \t\t\n
                          \n
                          <!-- Demo #4 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all available Galleries, Custom Visualization with Twig Code</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body" style="overflow-x: scroll;">\n
                                  \n
                                  {% component 'galleryHub4' %}\n
                      \t\t\t\n
                      \t\t\t{{ debug(galleryHub4.galleries) }}\n
                      \n
                      \t\t\t{% set galleries = galleryHub4.galleries %}\n
                      \n
                      \t\t\t{% if galleries|length > 0 %}\n
                      \n
                      \t\t\t\t<div id="{{galleryHub4.id}}">\n
                      \t\t\t\t\t<table>\n
                      \t\t\t\t\t\t<tr>\n
                      \t\t\t\t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                      \t\t\t\t\t\t</tr>\n
                      \t\t\t\t\t{% for gallery in galleries %}\n
                      \t\t\t\t\t\t<tr>\n
                      \t\t\t\t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                      \t\t\t\t\t\t\t\tType: {{ gallery.type }}<br>\n
                      \t\t\t\t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                      \t\t\t\t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                      \t\t\t\t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                      \t\t\t\t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                      \t\t\t\t\t\t\t\t# of images: {{ gallery.items|length }}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t</tr>\n
                      \t\t\t\t\t{% endfor %}\n
                      \t\t\t\t\t</table>\n
                      \t\t\t\t</div>\n
                      \n
                      \t\t\t{% endif %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>All Galleries</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Write your own Twig Code</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div style="max-width: 100%;">\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre style="overflow-x: scroll;"><code style="display: block; white-space: pre;">{% filter escape %}{% verbatim %}{% component 'galleryHub4' %}\n
                      {{ debug(galleryHub4.galleries) }}\n
                      {% set galleries = galleryHub4.galleries %}\n
                      {% if galleries|length > 0 %}\n
                      \t<div id="{{galleryHub4.id}}">\n
                      \t\t<table>\n
                      \t\t\t<tr>\n
                      \t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                      \t\t\t</tr>\n
                      \t\t{% for gallery in galleries %}\n
                      \t\t\t<tr>\n
                      \t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                      \t\t\t\t\tType: {{ gallery.type }}<br>\n
                      \t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                      \t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                      \t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                      \t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                      \t\t\t\t\t# of images: {{ gallery.items|length }}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                      \t\t\t\t</td>\n
                      \t\t\t</tr>\n
                      \t\t{% endfor %}\n
                      \t\t</table>\n
                      \t</div>\n
                      {% endif %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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 <code>galleryHub.galleries</code>, 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.</p>\n
                      \t<p>\n
                      \tHint: To dig into the galleries (or any other) variable/collection, you have two options. You can simply add <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.galleries.toArray) }}{% endverbatim %}{% endfilter %}</code> 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:</p>\n
                      \t{{ dump(galleryHub.galleries.toArray) }}\n
                      \t<p>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: <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.toArray) }}{% endverbatim %}{% endfilter %}</code>. The result in this instance is:\n
                      \t</p>\n
                      \t{{ dump(galleryHub.toArray) }}\n
                      \t<p><a href="https://twig.symfony.com/doc/2.x/functions/dump.html" target="_blank">Learn more aboud <i>dump</i> in the official Twig docs</a>. 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 <a href="https://octobercms.com/docs/setup/configuration#debug-mode">in the OctoberCMS docs!</a></p>\n
                      \t<p>Alternatively, you can install the Debugbar plugin and then add <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries) }}{% endverbatim %}{% endfilter %}</code> to your page to show debug information in the Laravel debugbar. To see all public properties of a gallery, do: <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries.first.toArray) }}{% endverbatim %}{% endfilter %}</code>. Make sure to replace "galleryHub" with the alias of your component as set in the component options!</p>\n
                      \n
                          \n
                          \n
                          \n
                      \n
                      \t\n
                          <!-- Details -->    \n
                          <br>\n
                          <br>\n
                          <div class="text-center">\n
                      \t\t\t<p><a href="{{ 'demos/image-list-only'|page }}" class="btn btn-lg btn-default">Continue to Image List Only</a></p>\n
                          </div>\n
                      \n
                      </div>
                      """
                    "code" => """
                      function onTest()\n
                      {\n
                      }
                      """
                    "title" => "Gallery Hub"
                    "url" => "/demo/gallery-hub"
                    "layout" => "default"
                    "is_hidden" => "0"
                    "galleryHub" => array:5 [
                      "hubType" => "CITY"
                      "maxItems" => "100"
                      "linkUrl" => "/demos/dynamic-gallery/%slug%"
                      "openInNewTab" => "1"
                      "visualization" => "default"
                    ]
                    "galleryHub galleryHub2" => array:5 [
                      "hubType" => "WATER"
                      "maxItems" => "100"
                      "linkUrl" => "/demos/dynamic-gallery/%slug%"
                      "openInNewTab" => "1"
                      "visualization" => "titleOnly"
                    ]
                    "galleryHub galleryHub3" => array:6 [
                      "hubType" => "WATER"
                      "maxItems" => "100"
                      "linkUrl" => "/demos/dynamic-gallery/%slug%"
                      "openInNewTab" => "1"
                      "visualization" => "template"
                      "template" => "<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; width: 100px;">%name%</a></div>"
                    ]
                    "galleryHub galleryHub4" => array:5 [
                      "hubType" => "[ALL]"
                      "maxItems" => "100"
                      "linkUrl" => "/demos/dynamic-gallery/%slug%"
                      "openInNewTab" => "1"
                      "visualization" => "custom"
                    ]
                  ]
                  #original: array:13 [
                    "fileName" => "demos/gallery-hub.htm"
                    "content" => """
                      title = "Gallery Hub"\n
                      url = "/demo/gallery-hub"\n
                      layout = "default"\n
                      is_hidden = 0\n
                      \n
                      [galleryHub]\n
                      hubType = "CITY"\n
                      maxItems = 100\n
                      linkUrl = "/demos/dynamic-gallery/%slug%"\n
                      openInNewTab = 1\n
                      visualization = "default"\n
                      \n
                      [galleryHub galleryHub2]\n
                      hubType = "WATER"\n
                      maxItems = 100\n
                      linkUrl = "/demos/dynamic-gallery/%slug%"\n
                      openInNewTab = 1\n
                      visualization = "titleOnly"\n
                      \n
                      [galleryHub galleryHub3]\n
                      hubType = "WATER"\n
                      maxItems = 100\n
                      linkUrl = "/demos/dynamic-gallery/%slug%"\n
                      openInNewTab = 1\n
                      visualization = "template"\n
                      template = "<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; width: 100px;\">%name%</a></div>"\n
                      \n
                      [galleryHub galleryHub4]\n
                      hubType = "[ALL]"\n
                      maxItems = 100\n
                      linkUrl = "/demos/dynamic-gallery/%slug%"\n
                      openInNewTab = 1\n
                      visualization = "custom"\n
                      ==\n
                      <?php\n
                      function onTest()\n
                      {\n
                      }\n
                      ?>\n
                      ==\n
                      <div class="jumbotron title-js">\n
                          <div class="container">\n
                              <div class="row">\n
                                  <div class="col-8">\n
                                      <h1>Gallery Hub</h1>\n
                                      <p>This component loads a list of galleries without actually rendering any galleries. Use this if you wish to show a "hub" page with a link to all of your galleries.</p>\n
                                  </div>\n
                              </div>\n
                          </div>\n
                      </div>\n
                      \n
                      <div class="container">\n
                      \n
                      \t<!-- Intro -->\n
                      \t<p>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.</p>\n
                      \t<ol>\n
                      \t\t<li>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.<br><br>\n
                      \t\tFor example, let's say you've created a gallery of "ants" and a gallery of "ladybugs" using the back-end <i>Galleries</i> 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: <i>/galleries/%slug%</i><br><br></li>\n
                      \t\t<li>Another option is to create a "dynamic" gallery page where the actual gallery to be shown is passed in as a URL parameter.<br><br>You will have to create a dedicated gallery page and set the "URL" to something like: <i>/gallery/:gallery_code?|^[a-z0-9\-\_]+$</i><br><br>...additionally, you will have to set the "Media Folder or Gallery" in your component inspector to ":gallery_code"<br><br> This way the page will show whatever gallery is passed to it in the page URL. Please refer to the <a href="https://its.zensoft.hu/books/november-gallery-cookbook/page/dynamic-gallery-using-url-parameters" target="_blank">Novemeber Gallery Cookbook</a> 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 <i>/gallery/%slug%</i>.\n
                      \t</ol>\n
                      \n
                      \t\t\n
                          \n
                          <!-- Demo #1 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "CITY" Galleries</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub' %}\n
                      \n
                                  {{ debug(galleryHub.galleries) }}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: city</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Links with Preview Image</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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 <i>Page HTML</i> box above.<br>\n
                          <br>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.</p>\n
                          <br>\n
                      \n
                      \t\t\n
                          \n
                          <!-- Demo #2 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "WATER" Galleries, Title Only</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub2' %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>List of Links with Title Only</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub2' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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."</p>\n
                          <br>\n
                      \t\n
                      \t\t\n
                          \n
                          <!-- Demo #3 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "WATER" Galleries with a Custom Template</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub3' %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Set the Template Below</td></tr>\n
                                      <tr><td>Link Template</td><td>\n
                      \t\t\t\t\t<pre><code>{% filter escape %}{% verbatim %}<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>{% endverbatim %}{% endfilter %}</code></pre>\t\n
                      \t\t\t\t</td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub3' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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:\n
                      \t</p>\n
                      \t<table>\n
                      \t\t<tr><td>%type%                        </td><td>Gallery type, can be NOVEMBER_GALLERY, OCTOBER_MEDIA_MANAGER_FOLDER, or BLOG_POST</td></tr>\n
                      \t\t<tr><td>%url%                         </td><td>Gallery URL</td></tr>\n
                      \t\t<tr><td>%slug%                        </td><td>Gallery slug*</td></tr>\n
                      \t\t<tr><td>%folder%                      </td><td>Gallery description*</td></tr>\n
                      \t\t<tr><td>%name%                        </td><td>Gallery name (or the folder name in case of galleries uploaded using the OctoberCMS media manager</td></tr>\n
                      \t\t<tr><td>%description%                 </td><td>Gallery description*</td></tr>\n
                      \t\t<tr><td>%keywords%                    </td><td>Gallery keywords*</td></tr>\n
                      \t\t<tr><td>%created_at%                  </td><td>Gallery creation date*</td></tr>\n
                      \t\t<tr><td>%updated_at%                  </td><td>Gallery last update date*</td></tr>\n
                      \t\t<tr><td>%preview_image_url%           </td><td>Preview image URL (if set)*</td></tr>\n
                      \t\t<tr><td>%published%                   </td><td>Gallery is published or not*</td></tr>\n
                      \t\t<tr><td>%preview_image_title%         </td><td>Preview image title*</td></tr>\n
                      \t\t<tr><td>%preview_image_description%   </td><td>Preview image description*</td></tr>\n
                      \t\t<tr><td>%preview_image_width%         </td><td>Preview image width*</td></tr>\n
                      \t\t<tr><td>%preview_image_height%        </td><td>Preview image height*</td></tr>\n
                      \t\t<tr><td>%preview_image_filename%      </td><td>Preview image filename*</td></tr>\n
                      \t\t<tr><td>%preview_image_filesize%      </td><td>Preview image file size*</td></tr>\n
                      \t\t<tr><td>%items_count%                 </td><td>Count of images</td></tr>\n
                      \t</table>\n
                      * available for galleries created on the "Galleries" back-end page\n
                          <br>\n
                          <br>\n
                          \n
                      \t\t\n
                          \n
                          <!-- Demo #4 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all available Galleries, Custom Visualization with Twig Code</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body" style="overflow-x: scroll;">\n
                                  \n
                                  {% component 'galleryHub4' %}\n
                      \t\t\t\n
                      \t\t\t{{ debug(galleryHub4.galleries) }}\n
                      \n
                      \t\t\t{% set galleries = galleryHub4.galleries %}\n
                      \n
                      \t\t\t{% if galleries|length > 0 %}\n
                      \n
                      \t\t\t\t<div id="{{galleryHub4.id}}">\n
                      \t\t\t\t\t<table>\n
                      \t\t\t\t\t\t<tr>\n
                      \t\t\t\t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                      \t\t\t\t\t\t</tr>\n
                      \t\t\t\t\t{% for gallery in galleries %}\n
                      \t\t\t\t\t\t<tr>\n
                      \t\t\t\t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                      \t\t\t\t\t\t\t\tType: {{ gallery.type }}<br>\n
                      \t\t\t\t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                      \t\t\t\t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                      \t\t\t\t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                      \t\t\t\t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                      \t\t\t\t\t\t\t\t# of images: {{ gallery.items|length }}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t</tr>\n
                      \t\t\t\t\t{% endfor %}\n
                      \t\t\t\t\t</table>\n
                      \t\t\t\t</div>\n
                      \n
                      \t\t\t{% endif %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>All Galleries</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Write your own Twig Code</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div style="max-width: 100%;">\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre style="overflow-x: scroll;"><code style="display: block; white-space: pre;">{% filter escape %}{% verbatim %}{% component 'galleryHub4' %}\n
                      {{ debug(galleryHub4.galleries) }}\n
                      {% set galleries = galleryHub4.galleries %}\n
                      {% if galleries|length > 0 %}\n
                      \t<div id="{{galleryHub4.id}}">\n
                      \t\t<table>\n
                      \t\t\t<tr>\n
                      \t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                      \t\t\t</tr>\n
                      \t\t{% for gallery in galleries %}\n
                      \t\t\t<tr>\n
                      \t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                      \t\t\t\t\tType: {{ gallery.type }}<br>\n
                      \t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                      \t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                      \t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                      \t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                      \t\t\t\t\t# of images: {{ gallery.items|length }}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                      \t\t\t\t</td>\n
                      \t\t\t</tr>\n
                      \t\t{% endfor %}\n
                      \t\t</table>\n
                      \t</div>\n
                      {% endif %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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 <code>galleryHub.galleries</code>, 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.</p>\n
                      \t<p>\n
                      \tHint: To dig into the galleries (or any other) variable/collection, you have two options. You can simply add <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.galleries.toArray) }}{% endverbatim %}{% endfilter %}</code> 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:</p>\n
                      \t{{ dump(galleryHub.galleries.toArray) }}\n
                      \t<p>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: <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.toArray) }}{% endverbatim %}{% endfilter %}</code>. The result in this instance is:\n
                      \t</p>\n
                      \t{{ dump(galleryHub.toArray) }}\n
                      \t<p><a href="https://twig.symfony.com/doc/2.x/functions/dump.html" target="_blank">Learn more aboud <i>dump</i> in the official Twig docs</a>. 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 <a href="https://octobercms.com/docs/setup/configuration#debug-mode">in the OctoberCMS docs!</a></p>\n
                      \t<p>Alternatively, you can install the Debugbar plugin and then add <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries) }}{% endverbatim %}{% endfilter %}</code> to your page to show debug information in the Laravel debugbar. To see all public properties of a gallery, do: <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries.first.toArray) }}{% endverbatim %}{% endfilter %}</code>. Make sure to replace "galleryHub" with the alias of your component as set in the component options!</p>\n
                      \n
                          \n
                          \n
                          \n
                      \n
                      \t\n
                          <!-- Details -->    \n
                          <br>\n
                          <br>\n
                          <div class="text-center">\n
                      \t\t\t<p><a href="{{ 'demos/image-list-only'|page }}" class="btn btn-lg btn-default">Continue to Image List Only</a></p>\n
                          </div>\n
                      \n
                      </div>
                      """
                    "mtime" => 1594283451
                    "markup" => """
                      <div class="jumbotron title-js">\n
                          <div class="container">\n
                              <div class="row">\n
                                  <div class="col-8">\n
                                      <h1>Gallery Hub</h1>\n
                                      <p>This component loads a list of galleries without actually rendering any galleries. Use this if you wish to show a "hub" page with a link to all of your galleries.</p>\n
                                  </div>\n
                              </div>\n
                          </div>\n
                      </div>\n
                      \n
                      <div class="container">\n
                      \n
                      \t<!-- Intro -->\n
                      \t<p>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.</p>\n
                      \t<ol>\n
                      \t\t<li>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.<br><br>\n
                      \t\tFor example, let's say you've created a gallery of "ants" and a gallery of "ladybugs" using the back-end <i>Galleries</i> 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: <i>/galleries/%slug%</i><br><br></li>\n
                      \t\t<li>Another option is to create a "dynamic" gallery page where the actual gallery to be shown is passed in as a URL parameter.<br><br>You will have to create a dedicated gallery page and set the "URL" to something like: <i>/gallery/:gallery_code?|^[a-z0-9\-\_]+$</i><br><br>...additionally, you will have to set the "Media Folder or Gallery" in your component inspector to ":gallery_code"<br><br> This way the page will show whatever gallery is passed to it in the page URL. Please refer to the <a href="https://its.zensoft.hu/books/november-gallery-cookbook/page/dynamic-gallery-using-url-parameters" target="_blank">Novemeber Gallery Cookbook</a> 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 <i>/gallery/%slug%</i>.\n
                      \t</ol>\n
                      \n
                      \t\t\n
                          \n
                          <!-- Demo #1 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "CITY" Galleries</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub' %}\n
                      \n
                                  {{ debug(galleryHub.galleries) }}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: city</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Links with Preview Image</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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 <i>Page HTML</i> box above.<br>\n
                          <br>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.</p>\n
                          <br>\n
                      \n
                      \t\t\n
                          \n
                          <!-- Demo #2 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "WATER" Galleries, Title Only</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub2' %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>List of Links with Title Only</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub2' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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."</p>\n
                          <br>\n
                      \t\n
                      \t\t\n
                          \n
                          <!-- Demo #3 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "WATER" Galleries with a Custom Template</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub3' %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Set the Template Below</td></tr>\n
                                      <tr><td>Link Template</td><td>\n
                      \t\t\t\t\t<pre><code>{% filter escape %}{% verbatim %}<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>{% endverbatim %}{% endfilter %}</code></pre>\t\n
                      \t\t\t\t</td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub3' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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:\n
                      \t</p>\n
                      \t<table>\n
                      \t\t<tr><td>%type%                        </td><td>Gallery type, can be NOVEMBER_GALLERY, OCTOBER_MEDIA_MANAGER_FOLDER, or BLOG_POST</td></tr>\n
                      \t\t<tr><td>%url%                         </td><td>Gallery URL</td></tr>\n
                      \t\t<tr><td>%slug%                        </td><td>Gallery slug*</td></tr>\n
                      \t\t<tr><td>%folder%                      </td><td>Gallery description*</td></tr>\n
                      \t\t<tr><td>%name%                        </td><td>Gallery name (or the folder name in case of galleries uploaded using the OctoberCMS media manager</td></tr>\n
                      \t\t<tr><td>%description%                 </td><td>Gallery description*</td></tr>\n
                      \t\t<tr><td>%keywords%                    </td><td>Gallery keywords*</td></tr>\n
                      \t\t<tr><td>%created_at%                  </td><td>Gallery creation date*</td></tr>\n
                      \t\t<tr><td>%updated_at%                  </td><td>Gallery last update date*</td></tr>\n
                      \t\t<tr><td>%preview_image_url%           </td><td>Preview image URL (if set)*</td></tr>\n
                      \t\t<tr><td>%published%                   </td><td>Gallery is published or not*</td></tr>\n
                      \t\t<tr><td>%preview_image_title%         </td><td>Preview image title*</td></tr>\n
                      \t\t<tr><td>%preview_image_description%   </td><td>Preview image description*</td></tr>\n
                      \t\t<tr><td>%preview_image_width%         </td><td>Preview image width*</td></tr>\n
                      \t\t<tr><td>%preview_image_height%        </td><td>Preview image height*</td></tr>\n
                      \t\t<tr><td>%preview_image_filename%      </td><td>Preview image filename*</td></tr>\n
                      \t\t<tr><td>%preview_image_filesize%      </td><td>Preview image file size*</td></tr>\n
                      \t\t<tr><td>%items_count%                 </td><td>Count of images</td></tr>\n
                      \t</table>\n
                      * available for galleries created on the "Galleries" back-end page\n
                          <br>\n
                          <br>\n
                          \n
                      \t\t\n
                          \n
                          <!-- Demo #4 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all available Galleries, Custom Visualization with Twig Code</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body" style="overflow-x: scroll;">\n
                                  \n
                                  {% component 'galleryHub4' %}\n
                      \t\t\t\n
                      \t\t\t{{ debug(galleryHub4.galleries) }}\n
                      \n
                      \t\t\t{% set galleries = galleryHub4.galleries %}\n
                      \n
                      \t\t\t{% if galleries|length > 0 %}\n
                      \n
                      \t\t\t\t<div id="{{galleryHub4.id}}">\n
                      \t\t\t\t\t<table>\n
                      \t\t\t\t\t\t<tr>\n
                      \t\t\t\t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                      \t\t\t\t\t\t</tr>\n
                      \t\t\t\t\t{% for gallery in galleries %}\n
                      \t\t\t\t\t\t<tr>\n
                      \t\t\t\t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                      \t\t\t\t\t\t\t\tType: {{ gallery.type }}<br>\n
                      \t\t\t\t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                      \t\t\t\t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                      \t\t\t\t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                      \t\t\t\t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                      \t\t\t\t\t\t\t\t# of images: {{ gallery.items|length }}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t</tr>\n
                      \t\t\t\t\t{% endfor %}\n
                      \t\t\t\t\t</table>\n
                      \t\t\t\t</div>\n
                      \n
                      \t\t\t{% endif %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>All Galleries</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Write your own Twig Code</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div style="max-width: 100%;">\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre style="overflow-x: scroll;"><code style="display: block; white-space: pre;">{% filter escape %}{% verbatim %}{% component 'galleryHub4' %}\n
                      {{ debug(galleryHub4.galleries) }}\n
                      {% set galleries = galleryHub4.galleries %}\n
                      {% if galleries|length > 0 %}\n
                      \t<div id="{{galleryHub4.id}}">\n
                      \t\t<table>\n
                      \t\t\t<tr>\n
                      \t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                      \t\t\t</tr>\n
                      \t\t{% for gallery in galleries %}\n
                      \t\t\t<tr>\n
                      \t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                      \t\t\t\t\tType: {{ gallery.type }}<br>\n
                      \t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                      \t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                      \t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                      \t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                      \t\t\t\t\t# of images: {{ gallery.items|length }}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                      \t\t\t\t</td>\n
                      \t\t\t</tr>\n
                      \t\t{% endfor %}\n
                      \t\t</table>\n
                      \t</div>\n
                      {% endif %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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 <code>galleryHub.galleries</code>, 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.</p>\n
                      \t<p>\n
                      \tHint: To dig into the galleries (or any other) variable/collection, you have two options. You can simply add <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.galleries.toArray) }}{% endverbatim %}{% endfilter %}</code> 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:</p>\n
                      \t{{ dump(galleryHub.galleries.toArray) }}\n
                      \t<p>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: <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.toArray) }}{% endverbatim %}{% endfilter %}</code>. The result in this instance is:\n
                      \t</p>\n
                      \t{{ dump(galleryHub.toArray) }}\n
                      \t<p><a href="https://twig.symfony.com/doc/2.x/functions/dump.html" target="_blank">Learn more aboud <i>dump</i> in the official Twig docs</a>. 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 <a href="https://octobercms.com/docs/setup/configuration#debug-mode">in the OctoberCMS docs!</a></p>\n
                      \t<p>Alternatively, you can install the Debugbar plugin and then add <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries) }}{% endverbatim %}{% endfilter %}</code> to your page to show debug information in the Laravel debugbar. To see all public properties of a gallery, do: <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries.first.toArray) }}{% endverbatim %}{% endfilter %}</code>. Make sure to replace "galleryHub" with the alias of your component as set in the component options!</p>\n
                      \n
                          \n
                          \n
                          \n
                      \n
                      \t\n
                          <!-- Details -->    \n
                          <br>\n
                          <br>\n
                          <div class="text-center">\n
                      \t\t\t<p><a href="{{ 'demos/image-list-only'|page }}" class="btn btn-lg btn-default">Continue to Image List Only</a></p>\n
                          </div>\n
                      \n
                      </div>
                      """
                    "code" => """
                      function onTest()\n
                      {\n
                      }
                      """
                    "title" => "Gallery Hub"
                    "url" => "/demo/gallery-hub"
                    "layout" => "default"
                    "is_hidden" => "0"
                    "galleryHub" => array:5 [
                      "hubType" => "CITY"
                      "maxItems" => "100"
                      "linkUrl" => "/demos/dynamic-gallery/%slug%"
                      "openInNewTab" => "1"
                      "visualization" => "default"
                    ]
                    "galleryHub galleryHub2" => array:5 [
                      "hubType" => "WATER"
                      "maxItems" => "100"
                      "linkUrl" => "/demos/dynamic-gallery/%slug%"
                      "openInNewTab" => "1"
                      "visualization" => "titleOnly"
                    ]
                    "galleryHub galleryHub3" => array:6 [
                      "hubType" => "WATER"
                      "maxItems" => "100"
                      "linkUrl" => "/demos/dynamic-gallery/%slug%"
                      "openInNewTab" => "1"
                      "visualization" => "template"
                      "template" => "<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; width: 100px;">%name%</a></div>"
                    ]
                    "galleryHub galleryHub4" => array:5 [
                      "hubType" => "[ALL]"
                      "maxItems" => "100"
                      "linkUrl" => "/demos/dynamic-gallery/%slug%"
                      "openInNewTab" => "1"
                      "visualization" => "custom"
                    ]
                  ]
                  #appends: []
                  #purgeable: []
                  #allowedExtensions: array:1 [
                    0 => "htm"
                  ]
                  #defaultExtension: "htm"
                  #wrapCode: true
                  #maxNesting: 2
                  #loadedFromCache: true
                  #observables: []
                  +exists: true
                  +implement: null
                  #extensionData: array:4 [
                    "extensions" => []
                    "methods" => []
                    "dynamicMethods" => []
                    "dynamicProperties" => []
                  ]
                  #emitterSingleEventCollection: []
                  #emitterEventCollection: array:3 [
                    "model.saveInternal" => array:1 [
                      500 => array:1 [
                        0 => Closure {#850 …5}
                      ]
                    ]
                    "model.beforeDelete" => array:1 [
                      0 => array:1 [
                        0 => Closure {#853 …4}
                      ]
                    ]
                    "model.beforeSave" => array:1 [
                      0 => array:1 [
                        0 => Closure {#854 …4}
                      ]
                    ]
                  ]
                  #emitterEventSorted: []
                  #validationErrors: null
                }
                +layout: Layout {#897
                  #dirName: "layouts"
                  +components: []
                  +settings: array:2 [
                    "description" => "Default layout"
                    "components" => []
                  ]
                  +viewBag: []
                  #fillable: array:3 [
                    0 => "markup"
                    1 => "settings"
                    2 => "code"
                  ]
                  #passthru: array:5 [
                    0 => "lists"
                    1 => "where"
                    2 => "sortBy"
                    3 => "whereComponent"
                    4 => "withComponent"
                  ]
                  #isCompoundObject: true
                  #viewBagCache: ViewBag {#901
                    +isHidden: true
                    +id: null
                    +alias: null
                    +name: "viewBag"
                    +pluginIcon: null
                    +componentCssClass: null
                    +inspectorEnabled: true
                    #dirName: "/cms/components/viewbag"
                    #controller: null
                    #page: null
                    #externalPropertyNames: []
                    +implement: null
                    #extensionData: array:4 [
                      "extensions" => []
                      "methods" => []
                      "dynamicMethods" => []
                      "dynamicProperties" => []
                    ]
                    #assets: array:3 [
                      "js" => []
                      "css" => []
                      "rss" => []
                    ]
                    +assetPath: "/plugins/cms"
                    #emitterSingleEventCollection: []
                    #emitterEventCollection: []
                    #emitterEventSorted: []
                    #properties: []
                  }
                  +rules: []
                  +attributeNames: []
                  +customMessages: []
                  #themeCache: Theme {#903
                    #dirName: "demo"
                    #configCache: null
                  }
                  #datasource: "demo"
                  +attributes: array:6 [
                    "fileName" => "default.htm"
                    "content" => """
                      description = "Default layout"\n
                      ==\n
                      <!DOCTYPE html>\r\n
                      <html>\r\n
                          <head>\r\n
                              <meta charset="utf-8">\r\n
                              <title>{{ this.page.title }}</title>\r\n
                              <meta name="description" content="{{ this.page.meta_description }}">\r\n
                              <meta name="title" content="{{ this.page.meta_title }}">\r\n
                              <meta name="author" content="OctoberCMS">\r\n
                              <meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n
                              <meta name="generator" content="OctoberCMS">\r\n
                              <link rel="icon" type="image/png" href="{{ 'assets/images/october.png'|theme }}">\r\n
                              <link href="{{ 'assets/css/vendor.css'|theme }}" rel="stylesheet">\r\n
                              <link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">\r\n
                              <link href="{{ 'assets/css/custom.css?191102.01'|theme }}" rel="stylesheet">\r\n
                              <link href="{{ 'assets/vendor/font-awesome/css/font-awesome.css'|theme }}" rel="stylesheet">\r\n
                              {% styles %}\r\n
                          </head>\r\n
                          <body>\r\n
                      \r\n
                              <!-- Header -->\r\n
                              <header id="layout-header">\r\n
                                  {% partial 'site/header' %}\r\n
                              </header>\r\n
                      \r\n
                              <!-- Content -->\r\n
                              <section id="layout-content">\r\n
                                  {% page %}\r\n
                              </section>\r\n
                      \r\n
                              <!-- Footer -->\r\n
                              <footer id="layout-footer">\r\n
                                  {% partial 'site/footer' %}\r\n
                              </footer>\r\n
                      \r\n
                              <!-- Scripts -->\r\n
                              <script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>\r\n
                              <script src="{{ 'assets/vendor/bootstrap.js'|theme }}"></script>\r\n
                              <script src="{{ 'assets/javascript/app.js'|theme }}"></script>\r\n
                              {% framework extras %}\r\n
                              {% scripts %}\r\n
                      \r\n
                          </body>\r\n
                      </html>
                      """
                    "mtime" => 1602439639
                    "markup" => """
                      <!DOCTYPE html>\r\n
                      <html>\r\n
                          <head>\r\n
                              <meta charset="utf-8">\r\n
                              <title>{{ this.page.title }}</title>\r\n
                              <meta name="description" content="{{ this.page.meta_description }}">\r\n
                              <meta name="title" content="{{ this.page.meta_title }}">\r\n
                              <meta name="author" content="OctoberCMS">\r\n
                              <meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n
                              <meta name="generator" content="OctoberCMS">\r\n
                              <link rel="icon" type="image/png" href="{{ 'assets/images/october.png'|theme }}">\r\n
                              <link href="{{ 'assets/css/vendor.css'|theme }}" rel="stylesheet">\r\n
                              <link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">\r\n
                              <link href="{{ 'assets/css/custom.css?191102.01'|theme }}" rel="stylesheet">\r\n
                              <link href="{{ 'assets/vendor/font-awesome/css/font-awesome.css'|theme }}" rel="stylesheet">\r\n
                              {% styles %}\r\n
                          </head>\r\n
                          <body>\r\n
                      \r\n
                              <!-- Header -->\r\n
                              <header id="layout-header">\r\n
                                  {% partial 'site/header' %}\r\n
                              </header>\r\n
                      \r\n
                              <!-- Content -->\r\n
                              <section id="layout-content">\r\n
                                  {% page %}\r\n
                              </section>\r\n
                      \r\n
                              <!-- Footer -->\r\n
                              <footer id="layout-footer">\r\n
                                  {% partial 'site/footer' %}\r\n
                              </footer>\r\n
                      \r\n
                              <!-- Scripts -->\r\n
                              <script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>\r\n
                              <script src="{{ 'assets/vendor/bootstrap.js'|theme }}"></script>\r\n
                              <script src="{{ 'assets/javascript/app.js'|theme }}"></script>\r\n
                              {% framework extras %}\r\n
                              {% scripts %}\r\n
                      \r\n
                          </body>\r\n
                      </html>
                      """
                    "code" => null
                    "description" => "Default layout"
                  ]
                  #original: array:6 [
                    "fileName" => "default.htm"
                    "content" => """
                      description = "Default layout"\n
                      ==\n
                      <!DOCTYPE html>\r\n
                      <html>\r\n
                          <head>\r\n
                              <meta charset="utf-8">\r\n
                              <title>{{ this.page.title }}</title>\r\n
                              <meta name="description" content="{{ this.page.meta_description }}">\r\n
                              <meta name="title" content="{{ this.page.meta_title }}">\r\n
                              <meta name="author" content="OctoberCMS">\r\n
                              <meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n
                              <meta name="generator" content="OctoberCMS">\r\n
                              <link rel="icon" type="image/png" href="{{ 'assets/images/october.png'|theme }}">\r\n
                              <link href="{{ 'assets/css/vendor.css'|theme }}" rel="stylesheet">\r\n
                              <link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">\r\n
                              <link href="{{ 'assets/css/custom.css?191102.01'|theme }}" rel="stylesheet">\r\n
                              <link href="{{ 'assets/vendor/font-awesome/css/font-awesome.css'|theme }}" rel="stylesheet">\r\n
                              {% styles %}\r\n
                          </head>\r\n
                          <body>\r\n
                      \r\n
                              <!-- Header -->\r\n
                              <header id="layout-header">\r\n
                                  {% partial 'site/header' %}\r\n
                              </header>\r\n
                      \r\n
                              <!-- Content -->\r\n
                              <section id="layout-content">\r\n
                                  {% page %}\r\n
                              </section>\r\n
                      \r\n
                              <!-- Footer -->\r\n
                              <footer id="layout-footer">\r\n
                                  {% partial 'site/footer' %}\r\n
                              </footer>\r\n
                      \r\n
                              <!-- Scripts -->\r\n
                              <script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>\r\n
                              <script src="{{ 'assets/vendor/bootstrap.js'|theme }}"></script>\r\n
                              <script src="{{ 'assets/javascript/app.js'|theme }}"></script>\r\n
                              {% framework extras %}\r\n
                              {% scripts %}\r\n
                      \r\n
                          </body>\r\n
                      </html>
                      """
                    "mtime" => 1602439639
                    "markup" => """
                      <!DOCTYPE html>\r\n
                      <html>\r\n
                          <head>\r\n
                              <meta charset="utf-8">\r\n
                              <title>{{ this.page.title }}</title>\r\n
                              <meta name="description" content="{{ this.page.meta_description }}">\r\n
                              <meta name="title" content="{{ this.page.meta_title }}">\r\n
                              <meta name="author" content="OctoberCMS">\r\n
                              <meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n
                              <meta name="generator" content="OctoberCMS">\r\n
                              <link rel="icon" type="image/png" href="{{ 'assets/images/october.png'|theme }}">\r\n
                              <link href="{{ 'assets/css/vendor.css'|theme }}" rel="stylesheet">\r\n
                              <link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">\r\n
                              <link href="{{ 'assets/css/custom.css?191102.01'|theme }}" rel="stylesheet">\r\n
                              <link href="{{ 'assets/vendor/font-awesome/css/font-awesome.css'|theme }}" rel="stylesheet">\r\n
                              {% styles %}\r\n
                          </head>\r\n
                          <body>\r\n
                      \r\n
                              <!-- Header -->\r\n
                              <header id="layout-header">\r\n
                                  {% partial 'site/header' %}\r\n
                              </header>\r\n
                      \r\n
                              <!-- Content -->\r\n
                              <section id="layout-content">\r\n
                                  {% page %}\r\n
                              </section>\r\n
                      \r\n
                              <!-- Footer -->\r\n
                              <footer id="layout-footer">\r\n
                                  {% partial 'site/footer' %}\r\n
                              </footer>\r\n
                      \r\n
                              <!-- Scripts -->\r\n
                              <script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>\r\n
                              <script src="{{ 'assets/vendor/bootstrap.js'|theme }}"></script>\r\n
                              <script src="{{ 'assets/javascript/app.js'|theme }}"></script>\r\n
                              {% framework extras %}\r\n
                              {% scripts %}\r\n
                      \r\n
                          </body>\r\n
                      </html>
                      """
                    "code" => null
                    "description" => "Default layout"
                  ]
                  #appends: []
                  #purgeable: []
                  #allowedExtensions: array:1 [
                    0 => "htm"
                  ]
                  #defaultExtension: "htm"
                  #wrapCode: true
                  #maxNesting: 2
                  #loadedFromCache: true
                  #observables: []
                  +exists: true
                  +implement: null
                  #extensionData: array:4 [
                    "extensions" => []
                    "methods" => []
                    "dynamicMethods" => []
                    "dynamicProperties" => []
                  ]
                  #emitterSingleEventCollection: []
                  #emitterEventCollection: array:3 [
                    "model.saveInternal" => array:1 [
                      500 => array:1 [
                        0 => Closure {#898 …5}
                      ]
                    ]
                    "model.beforeDelete" => array:1 [
                      0 => array:1 [
                        0 => Closure {#899 …4}
                      ]
                    ]
                    "model.beforeSave" => array:1 [
                      0 => array:1 [
                        0 => Closure {#900 …4}
                      ]
                    ]
                  ]
                  #emitterEventSorted: []
                  #validationErrors: null
                }
                +controller: Controller {#448}
                +implement: null
                #extensionData: array:4 [
                  "extensions" => []
                  "methods" => []
                  "dynamicMethods" => []
                  "dynamicProperties" => []
                ]
              }
              #externalPropertyNames: []
              +implement: null
              #extensionData: array:4 [
                "extensions" => []
                "methods" => []
                "dynamicMethods" => []
                "dynamicProperties" => []
              ]
              #assets: array:3 [
                "js" => array:1 [ …1]
                "css" => array:1 [ …1]
                "rss" => []
              ]
              +assetPath: "/plugins/zenware/novembergallery"
              #emitterSingleEventCollection: []
              #emitterEventCollection: []
              #emitterEventSorted: []
              #properties: array:6 [
                "hubType" => "[ALL]"
                "maxItems" => "100"
                "linkUrl" => "/demos/dynamic-gallery/%slug%"
                "openInNewTab" => "1"
                "template" => ""
                "visualization" => "custom"
              ]
            }
            +fileName: "blank.htm"
            +mtime: 1594238583
            +content: """
              {##}\n
              {# You only need the previous line if you use the OctoberCMS Template Language extension in VS Code #}\n
              \n
              {# The following line shows you how you can assign a property of this component instance to a page variable: #}\n
              {% set galleries = __SELF__.galleries %}\n
              \n
              {# Please leave the following in the template, it allows the component to show error messages to the user: #}\n
              {% if __SELF__.error %}\n
              \t<div class="alert zen-alert">{{ __SELF__.error }}</div>\n
              {% endif %}\n
              \n
              {#\n
              \n
              Drop your own code here. For example:\n
              \n
              {% if galleries|length > 0 %}\n
              \n
              \t<div id="{{__SELF__.id}}">\n
              \t\t{% for gallery in galleries %}\n
              \t\t\t<img alt="{{ gallery.name }}" \n
              \t\t\t\tsrc="{{ gallery.previewImage.url | resize(280, false,  { mode: 'portrait', quality: '90', extension: 'png' }) }}" \n
              \t\t\t\tstyle="margin: 20px;"\n
              \t\t\t\t/>\n
              \t\t{% endfor %}\n
              \t</div>\n
              \n
              {% endif %}\n
              \n
              Hint: To dig into the galleries (or any other) variable/collection, you have two options. \n
              You can simply add \n
              \n
              {{ dump(galleryHub.galleries.toArray) }} \n
              \n
              on your page after the component definition and it will print debug information about that \n
              variable straight in your page. Alternatively, you can install the Debugbar plugin and then add \n
              \n
              {{ debug(galleryHub.galleries) }} \n
              \n
              to your page to show debug information in the Laravel debugbar. To see all public properties \n
              of a gallery, do: \n
              \n
              {{ debug(galleryHub.galleries.first.toArray) }}. \n
              \n
              Make sure to replace "galleryHub" with the alias of your component as set in the component options!\n
              \n
              #}
              """
            #maxNesting: 2
            #allowedExtensions: array:1 [
              0 => "htm"
            ]
            #defaultExtension: "htm"
            +implement: null
            #extensionData: array:4 [
              "extensions" => []
              "methods" => []
              "dynamicMethods" => []
              "dynamicProperties" => []
            ]
          }
          #fallbackCache: []
          #extension: "htm"
          #cache: []
        }
        #page: Page {#851}
        #pageObj: Cms60fc337298a8a939074938_ca15071c65bc5d0bd90bcde9c887b3a8Class {#896}
        #layout: Layout {#897}
        #layoutObj: Cms60fa920c9f47d626294640_9613885fac035fa9077c5e7b37fd140fClass {#904
          +page: Page {#851}
          +layout: Layout {#897}
          +controller: Controller {#448}
          +implement: null
          #extensionData: array:4 [
            "extensions" => []
            "methods" => []
            "dynamicMethods" => []
            "dynamicProperties" => []
          ]
        }
        #twig: Environment {#522
          -charset: "UTF-8"
          -loader: Loader {#464}
          -debug: true
          -autoReload: true
          -cache: FilesystemCache {#520
            -directory: "/var/www/novembergallery.zenware.hu/public_html/storage/cms/twig/"
            -options: 1
          }
          -lexer: null
          -parser: null
          -compiler: null
          -baseTemplateClass: "\Twig\Template"
          -globals: []
          -resolvedGlobals: []
          -loadedTemplates: array:5 [
            "__TwigTemplate_1802c3bf3f8b4b99f33dc75b8b9f9524d525941f5330a8aa3958c5d0afd3d68f" => __TwigTemplate_1802c3bf3f8b4b99f33dc75b8b9f9524d525941f5330a8aa3958c5d0afd3d68f {#1841
              -source: Source {#1901
                -code: """
                  <div class="jumbotron title-js">\n
                      <div class="container">\n
                          <div class="row">\n
                              <div class="col-8">\n
                                  <h1>Gallery Hub</h1>\n
                                  <p>This component loads a list of galleries without actually rendering any galleries. Use this if you wish to show a "hub" page with a link to all of your galleries.</p>\n
                              </div>\n
                          </div>\n
                      </div>\n
                  </div>\n
                  \n
                  <div class="container">\n
                  \n
                  \t<!-- Intro -->\n
                  \t<p>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.</p>\n
                  \t<ol>\n
                  \t\t<li>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.<br><br>\n
                  \t\tFor example, let's say you've created a gallery of "ants" and a gallery of "ladybugs" using the back-end <i>Galleries</i> 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: <i>/galleries/%slug%</i><br><br></li>\n
                  \t\t<li>Another option is to create a "dynamic" gallery page where the actual gallery to be shown is passed in as a URL parameter.<br><br>You will have to create a dedicated gallery page and set the "URL" to something like: <i>/gallery/:gallery_code?|^[a-z0-9\-\_]+$</i><br><br>...additionally, you will have to set the "Media Folder or Gallery" in your component inspector to ":gallery_code"<br><br> This way the page will show whatever gallery is passed to it in the page URL. Please refer to the <a href="https://its.zensoft.hu/books/november-gallery-cookbook/page/dynamic-gallery-using-url-parameters" target="_blank">Novemeber Gallery Cookbook</a> 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 <i>/gallery/%slug%</i>.\n
                  \t</ol>\n
                  \n
                  \t\t\n
                      \n
                      <!-- Demo #1 -->\n
                      <div class="page-header">\n
                          <h2>Hub of all "CITY" Galleries</h2>\n
                      </div>\n
                      <div class="panel panel-default">\n
                          <div class="panel-heading">\n
                              <h3 class="panel-title">Hub</h3>\n
                          </div>\n
                          <div class="panel-body">\n
                              \n
                              {% component 'galleryHub' %}\n
                  \n
                              {{ debug(galleryHub.galleries) }}\n
                  \n
                          </div>\n
                      </div>\n
                      <p class="lead">\n
                          <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                      </p>    \n
                       <div class="flex-horizontal">\n
                          <div>\n
                              <p><strong>Component Inspector</strong></p>\n
                              <table>\n
                                  <tr><td>Hub Type</td><td>Keyword: city</td></tr>\n
                                  <tr><td>Order by</td><td>Default</td></tr>\n
                                  <tr><td>Max Galleries</td><td>100</td></tr>\n
                                  <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                  <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                  <tr><td>Display as</td><td>Links with Preview Image</td></tr>\n
                                  <tr><td>Link Template</td><td></td></tr>\n
                              </table>\n
                          </div>\n
                          <div>\n
                              <p><strong>Page HTML</strong></p>\n
                              <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                          </div>\n
                      </div>\n
                      <p>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 <i>Page HTML</i> box above.<br>\n
                      <br>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.</p>\n
                      <br>\n
                  \n
                  \t\t\n
                      \n
                      <!-- Demo #2 -->\n
                      <div class="page-header">\n
                          <h2>Hub of all "WATER" Galleries, Title Only</h2>\n
                      </div>\n
                      <div class="panel panel-default">\n
                          <div class="panel-heading">\n
                              <h3 class="panel-title">Hub</h3>\n
                          </div>\n
                          <div class="panel-body">\n
                              \n
                              {% component 'galleryHub2' %}\n
                  \n
                          </div>\n
                      </div>\n
                      <p class="lead">\n
                          <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                      </p>    \n
                       <div class="flex-horizontal">\n
                          <div>\n
                              <p><strong>Component Inspector</strong></p>\n
                              <table>\n
                                  <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                  <tr><td>Order by</td><td>Default</td></tr>\n
                                  <tr><td>Max Galleries</td><td>100</td></tr>\n
                                  <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                  <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                  <tr><td>Display as</td><td>List of Links with Title Only</td></tr>\n
                                  <tr><td>Link Template</td><td></td></tr>\n
                              </table>\n
                          </div>\n
                          <div>\n
                              <p><strong>Page HTML</strong></p>\n
                              <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub2' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                          </div>\n
                      </div>\n
                      <p>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."</p>\n
                      <br>\n
                  \t\n
                  \t\t\n
                      \n
                      <!-- Demo #3 -->\n
                      <div class="page-header">\n
                          <h2>Hub of all "WATER" Galleries with a Custom Template</h2>\n
                      </div>\n
                      <div class="panel panel-default">\n
                          <div class="panel-heading">\n
                              <h3 class="panel-title">Hub</h3>\n
                          </div>\n
                          <div class="panel-body">\n
                              \n
                              {% component 'galleryHub3' %}\n
                  \n
                          </div>\n
                      </div>\n
                      <p class="lead">\n
                          <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                      </p>    \n
                       <div class="flex-horizontal">\n
                          <div>\n
                              <p><strong>Component Inspector</strong></p>\n
                              <table>\n
                                  <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                  <tr><td>Order by</td><td>Default</td></tr>\n
                                  <tr><td>Max Galleries</td><td>100</td></tr>\n
                                  <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                  <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                  <tr><td>Display as</td><td>Set the Template Below</td></tr>\n
                                  <tr><td>Link Template</td><td>\n
                  \t\t\t\t\t<pre><code>{% filter escape %}{% verbatim %}<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>{% endverbatim %}{% endfilter %}</code></pre>\t\n
                  \t\t\t\t</td></tr>\n
                              </table>\n
                          </div>\n
                          <div>\n
                              <p><strong>Page HTML</strong></p>\n
                              <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub3' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                          </div>\n
                      </div>\n
                      <p>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:\n
                  \t</p>\n
                  \t<table>\n
                  \t\t<tr><td>%type%                        </td><td>Gallery type, can be NOVEMBER_GALLERY, OCTOBER_MEDIA_MANAGER_FOLDER, or BLOG_POST</td></tr>\n
                  \t\t<tr><td>%url%                         </td><td>Gallery URL</td></tr>\n
                  \t\t<tr><td>%slug%                        </td><td>Gallery slug*</td></tr>\n
                  \t\t<tr><td>%folder%                      </td><td>Gallery description*</td></tr>\n
                  \t\t<tr><td>%name%                        </td><td>Gallery name (or the folder name in case of galleries uploaded using the OctoberCMS media manager</td></tr>\n
                  \t\t<tr><td>%description%                 </td><td>Gallery description*</td></tr>\n
                  \t\t<tr><td>%keywords%                    </td><td>Gallery keywords*</td></tr>\n
                  \t\t<tr><td>%created_at%                  </td><td>Gallery creation date*</td></tr>\n
                  \t\t<tr><td>%updated_at%                  </td><td>Gallery last update date*</td></tr>\n
                  \t\t<tr><td>%preview_image_url%           </td><td>Preview image URL (if set)*</td></tr>\n
                  \t\t<tr><td>%published%                   </td><td>Gallery is published or not*</td></tr>\n
                  \t\t<tr><td>%preview_image_title%         </td><td>Preview image title*</td></tr>\n
                  \t\t<tr><td>%preview_image_description%   </td><td>Preview image description*</td></tr>\n
                  \t\t<tr><td>%preview_image_width%         </td><td>Preview image width*</td></tr>\n
                  \t\t<tr><td>%preview_image_height%        </td><td>Preview image height*</td></tr>\n
                  \t\t<tr><td>%preview_image_filename%      </td><td>Preview image filename*</td></tr>\n
                  \t\t<tr><td>%preview_image_filesize%      </td><td>Preview image file size*</td></tr>\n
                  \t\t<tr><td>%items_count%                 </td><td>Count of images</td></tr>\n
                  \t</table>\n
                  * available for galleries created on the "Galleries" back-end page\n
                      <br>\n
                      <br>\n
                      \n
                  \t\t\n
                      \n
                      <!-- Demo #4 -->\n
                      <div class="page-header">\n
                          <h2>Hub of all available Galleries, Custom Visualization with Twig Code</h2>\n
                      </div>\n
                      <div class="panel panel-default">\n
                          <div class="panel-heading">\n
                              <h3 class="panel-title">Hub</h3>\n
                          </div>\n
                          <div class="panel-body" style="overflow-x: scroll;">\n
                              \n
                              {% component 'galleryHub4' %}\n
                  \t\t\t\n
                  \t\t\t{{ debug(galleryHub4.galleries) }}\n
                  \n
                  \t\t\t{% set galleries = galleryHub4.galleries %}\n
                  \n
                  \t\t\t{% if galleries|length > 0 %}\n
                  \n
                  \t\t\t\t<div id="{{galleryHub4.id}}">\n
                  \t\t\t\t\t<table>\n
                  \t\t\t\t\t\t<tr>\n
                  \t\t\t\t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                  \t\t\t\t\t\t</tr>\n
                  \t\t\t\t\t{% for gallery in galleries %}\n
                  \t\t\t\t\t\t<tr>\n
                  \t\t\t\t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                  \t\t\t\t\t\t\t\tType: {{ gallery.type }}<br>\n
                  \t\t\t\t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                  \t\t\t\t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                  \t\t\t\t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                  \t\t\t\t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                  \t\t\t\t\t\t\t\t# of images: {{ gallery.items|length }}\n
                  \t\t\t\t\t\t\t</td>\n
                  \t\t\t\t\t\t\t<td>\n
                  \t\t\t\t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                  \t\t\t\t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                  \t\t\t\t\t\t\t</td>\n
                  \t\t\t\t\t\t\t<td>\n
                  \t\t\t\t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                  \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                  \t\t\t\t\t\t\t</td>\n
                  \t\t\t\t\t\t\t<td>\n
                  \t\t\t\t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                  \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                  \t\t\t\t\t\t\t</td>\n
                  \t\t\t\t\t\t\t<td>\n
                  \t\t\t\t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                  \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                  \t\t\t\t\t\t\t</td>\n
                  \t\t\t\t\t\t\t<td>\n
                  \t\t\t\t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                  \t\t\t\t\t\t\t</td>\n
                  \t\t\t\t\t\t</tr>\n
                  \t\t\t\t\t{% endfor %}\n
                  \t\t\t\t\t</table>\n
                  \t\t\t\t</div>\n
                  \n
                  \t\t\t{% endif %}\n
                  \n
                          </div>\n
                      </div>\n
                      <p class="lead">\n
                          <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                      </p>    \n
                       <div class="flex-horizontal">\n
                          <div>\n
                              <p><strong>Component Inspector</strong></p>\n
                              <table>\n
                                  <tr><td>Hub Type</td><td>All Galleries</td></tr>\n
                                  <tr><td>Order by</td><td>Default</td></tr>\n
                                  <tr><td>Max Galleries</td><td>100</td></tr>\n
                                  <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                  <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                  <tr><td>Display as</td><td>Write your own Twig Code</td></tr>\n
                                  <tr><td>Link Template</td><td></td></tr>\n
                              </table>\n
                          </div>\n
                          <div style="max-width: 100%;">\n
                              <p><strong>Page HTML</strong></p>\n
                              <pre style="overflow-x: scroll;"><code style="display: block; white-space: pre;">{% filter escape %}{% verbatim %}{% component 'galleryHub4' %}\n
                  {{ debug(galleryHub4.galleries) }}\n
                  {% set galleries = galleryHub4.galleries %}\n
                  {% if galleries|length > 0 %}\n
                  \t<div id="{{galleryHub4.id}}">\n
                  \t\t<table>\n
                  \t\t\t<tr>\n
                  \t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                  \t\t\t</tr>\n
                  \t\t{% for gallery in galleries %}\n
                  \t\t\t<tr>\n
                  \t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                  \t\t\t\t\tType: {{ gallery.type }}<br>\n
                  \t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                  \t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                  \t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                  \t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                  \t\t\t\t\t# of images: {{ gallery.items|length }}\n
                  \t\t\t\t</td>\n
                  \t\t\t\t<td>\n
                  \t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                  \t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                  \t\t\t\t</td>\n
                  \t\t\t\t<td>\n
                  \t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                  \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                  \t\t\t\t</td>\n
                  \t\t\t\t<td>\n
                  \t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                  \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                  \t\t\t\t</td>\n
                  \t\t\t\t<td>\n
                  \t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                  \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                  \t\t\t\t</td>\n
                  \t\t\t\t<td>\n
                  \t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                  \t\t\t\t</td>\n
                  \t\t\t</tr>\n
                  \t\t{% endfor %}\n
                  \t\t</table>\n
                  \t</div>\n
                  {% endif %}{% endverbatim %}{% endfilter %}</code></pre>\n
                          </div>\n
                      </div>\n
                      <p>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 <code>galleryHub.galleries</code>, 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.</p>\n
                  \t<p>\n
                  \tHint: To dig into the galleries (or any other) variable/collection, you have two options. You can simply add <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.galleries.toArray) }}{% endverbatim %}{% endfilter %}</code> 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:</p>\n
                  \t{{ dump(galleryHub.galleries.toArray) }}\n
                  \t<p>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: <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.toArray) }}{% endverbatim %}{% endfilter %}</code>. The result in this instance is:\n
                  \t</p>\n
                  \t{{ dump(galleryHub.toArray) }}\n
                  \t<p><a href="https://twig.symfony.com/doc/2.x/functions/dump.html" target="_blank">Learn more aboud <i>dump</i> in the official Twig docs</a>. 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 <a href="https://octobercms.com/docs/setup/configuration#debug-mode">in the OctoberCMS docs!</a></p>\n
                  \t<p>Alternatively, you can install the Debugbar plugin and then add <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries) }}{% endverbatim %}{% endfilter %}</code> to your page to show debug information in the Laravel debugbar. To see all public properties of a gallery, do: <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries.first.toArray) }}{% endverbatim %}{% endfilter %}</code>. Make sure to replace "galleryHub" with the alias of your component as set in the component options!</p>\n
                  \n
                      \n
                      \n
                      \n
                  \n
                  \t\n
                      <!-- Details -->    \n
                      <br>\n
                      <br>\n
                      <div class="text-center">\n
                  \t\t\t<p><a href="{{ 'demos/image-list-only'|page }}" class="btn btn-lg btn-default">Continue to Image List Only</a></p>\n
                      </div>\n
                  \n
                  </div>
                  """
                -name: "/var/www/novembergallery.zenware.hu/public_html/themes/demo/pages/demos/gallery-hub.htm"
                -path: ""
              }
              -macros: []
              #parent: false
              #parents: []
              #env: Environment {#522}
              #blocks: array:9 [
                "__internal_325981346dbe121c439d9faed3cedca0ee2179401fd2e45756588d6f3308fda6" => array:2 [ …2]
                "__internal_0ac86ab9130749cb2e3179ab717b5b0965cf8d55d3bb66dd0967428a526ba1f1" => array:2 [ …2]
                "__internal_89044cd59601c43fecaa9a618d92a56c7e0d5e16625870c7a0f94b95189a8bab" => array:2 [ …2]
                "__internal_fb378956d03f356eec261f78aa8735a817f96a5900e81e1e7109195b218e9e74" => array:2 [ …2]
                "__internal_0ef3fbd58eaf33c8f69d458505fadb4f22204133c9469d848d24293083597eaa" => array:2 [ …2]
                "__internal_3685c761058c1863c5acc445c8765dde1f4956a458ea229ba5648889937afe80" => array:2 [ …2]
                "__internal_88a711ab680f0a2ef4b989a2970a0c22fa858e5af85001332b45247f8de2ad9e" => array:2 [ …2]
                "__internal_b44d5c73086fa0de51f71407eea7ac81aaf0e321bb2a98d18a1e0734fe260ce8" => array:2 [ …2]
                "__internal_3b7c72a8f724fd5390c107288f29aad109e2e3e87d243cb491d986a732977682" => array:2 [ …2]
              ]
              #traits: []
              #extensions: array:8 [
                "Twig\Extension\CoreExtension" => CoreExtension {#525
                  -dateFormats: array:2 [ …2]
                  -numberFormat: array:3 [ …3]
                  -timezone: DateTimeZone {#2912 …2}
                  -escapers: []
                }
                "Twig\Extension\EscaperExtension" => EscaperExtension {#526
                  -defaultStrategy: "html"
                  -escapers: []
                  +safeClasses: []
                  +safeLookup: []
                }
                "Twig\Extension\OptimizerExtension" => OptimizerExtension {#527
                  -optimizers: -1
                }
                "Cms\Twig\Extension" => Extension {#528
                  #controller: Controller {#448}
                }
                "System\Twig\Extension" => Extension {#529
                  #markupManager: MarkupManager {#200 …5}
                }
                "Cms\Twig\DebugExtension" => DebugExtension {#530
                  #controller: Controller {#448}
                  #zebra: 0
                  #variablePrefix: false
                  #commentMap: []
                  #blockMethods: array:7 [ …7]
                }
                "Barryvdh\Debugbar\Twig\Extension\Debug" => Debug {#869
                  #debugbar: LaravelDebugbar {#289 …14}
                }
                "Barryvdh\Debugbar\Twig\Extension\Stopwatch" => Stopwatch {#874
                  #debugbar: LaravelDebugbar {#289 …14}
                }
              ]
              #sandbox: null
            }
            "__TwigTemplate_f52d8ffaa2ccd00fd70c6472b846ec3f59cddd4163f469fbf8df5bb1d85723f5" => __TwigTemplate_f52d8ffaa2ccd00fd70c6472b846ec3f59cddd4163f469fbf8df5bb1d85723f5 {#2642
              -source: Source {#2643
                -code: """
                  {##}\n
                  {# You only need the previous line if you use the OctoberCMS Template Language extension in VS Code #}\n
                  \n
                  {# The following line isn't actually required, it just shows you how you can assign a property of this component \n
                     instance to a page variable: #}\n
                  {#{% set galleries = __SELF__.galleries %}#}\n
                  \n
                  {% if __SELF__.error %}\n
                  \t<div class="alert zen-alert">{{ __SELF__.error }}</div>\n
                  {% endif %}\n
                  \n
                  {% if galleries|length > 0 %}\n
                  \n
                  \t{# Some opinionated styles, modify as needed: #}\n
                  \t{% put styles %}\n
                  \t<style>\n
                  \t\t#{{__SELF__.id}} {\n
                  \t\t\twidth: 100%;\n
                  \t\t\theight: 100%;\n
                  \t\t\tmin-width: 50px;\n
                  \t\t\tmin-height: 50px;\n
                  \t\t}\n
                  \t\t#{{__SELF__.id}} {\n
                  \t\t\tlist-style-type: none;\n
                  \t\t}\n
                  \t\t#{{__SELF__.id}} li {\n
                  \t\t\tdisplay: inline-block;\n
                  \t\t}\n
                  \t</style>\n
                  \t{% endput %}\n
                  \n
                  \t<ul id="{{__SELF__.id}}">\n
                  \t\t{% for gallery in galleries %}\n
                  \t\t\t<li><a href="{{ gallery.url }}" class="november-gallery-name" {{ __SELF__.openInNewTab ? 'target="_blank"' : '' }}>\n
                  \t\t\t\t{% if gallery.previewImage.url|length > 0 %}\n
                  \t\t\t\t\t<img alt="{{ gallery.name }}" \n
                  \t\t\t\t\t\tsrc="{{ gallery.previewImage.url | resize(false, 140,  { mode: 'portrait', quality: '90', extension: 'png' }) }}" \n
                  \t\t\t\t\t\tstyle="margin: 20px;"\n
                  \t\t\t\t\t\t/>\n
                  \t\t\t\t{% else %}\n
                  \t\t\t\t\t{{ gallery.name }}\n
                  \t\t\t\t{% endif %}\n
                  \t\t\t\t</a></li>\n
                  \t\t{% endfor %}\n
                  \t</ul>\n
                  \n
                  {% endif %}
                  """
                -name: "/var/www/novembergallery.zenware.hu/public_html/plugins/zenware/novembergallery/components/galleryhub/default.htm"
                -path: ""
              }
              -macros: []
              #parent: false
              #parents: []
              #env: Environment {#522}
              #blocks: []
              #traits: []
              #extensions: array:8 [
                "Twig\Extension\CoreExtension" => CoreExtension {#525}
                "Twig\Extension\EscaperExtension" => EscaperExtension {#526}
                "Twig\Extension\OptimizerExtension" => OptimizerExtension {#527}
                "Cms\Twig\Extension" => Extension {#528}
                "System\Twig\Extension" => Extension {#529}
                "Cms\Twig\DebugExtension" => DebugExtension {#530}
                "Barryvdh\Debugbar\Twig\Extension\Debug" => Debug {#869}
                "Barryvdh\Debugbar\Twig\Extension\Stopwatch" => Stopwatch {#874}
              ]
              #sandbox: null
            }
            "__TwigTemplate_294d225194764f89a169abf6d3854b208761b199f849bac7ae8cec9dd7c7b4a5" => __TwigTemplate_294d225194764f89a169abf6d3854b208761b199f849bac7ae8cec9dd7c7b4a5 {#2637
              -source: Source {#2945
                -code: """
                  {##}\n
                  {# You only need the previous line if you use the OctoberCMS Template Language extension in VS Code #}\n
                  \n
                  {# The following line isn't actually required, it just shows you how you can assign a property of this component \n
                     instance to a page variable: #}\n
                  {#{% set galleries = __SELF__.galleries %}#}\n
                  \n
                  {% if __SELF__.error %}\n
                  \t<div class="alert zen-alert">{{ __SELF__.error }}</div>\n
                  {% endif %}\n
                  \n
                  {% if galleries|length > 0 %}\n
                  \t<ul id="{{__SELF__.id}}">\n
                  \t\t{% for gallery in galleries %}\n
                  \t\t\t<li><a href="{{ gallery.url }}" class="november-gallery-name" {{ __SELF__.openInNewTab ? 'target="_blank"' : '' }}>{{ gallery.name }}</a></li>\n
                  \t\t{% endfor %}\n
                  \t</ul>\n
                  \n
                  {% endif %}
                  """
                -name: "/var/www/novembergallery.zenware.hu/public_html/plugins/zenware/novembergallery/components/galleryhub/title-only.htm"
                -path: ""
              }
              -macros: []
              #parent: false
              #parents: []
              #env: Environment {#522}
              #blocks: []
              #traits: []
              #extensions: array:8 [
                "Twig\Extension\CoreExtension" => CoreExtension {#525}
                "Twig\Extension\EscaperExtension" => EscaperExtension {#526}
                "Twig\Extension\OptimizerExtension" => OptimizerExtension {#527}
                "Cms\Twig\Extension" => Extension {#528}
                "System\Twig\Extension" => Extension {#529}
                "Cms\Twig\DebugExtension" => DebugExtension {#530}
                "Barryvdh\Debugbar\Twig\Extension\Debug" => Debug {#869}
                "Barryvdh\Debugbar\Twig\Extension\Stopwatch" => Stopwatch {#874}
              ]
              #sandbox: null
            }
            "__TwigTemplate_c4ece298342a53e5f7b8f4fb4e974532a415d9d4d57850b860c183bac9f866b6" => __TwigTemplate_c4ece298342a53e5f7b8f4fb4e974532a415d9d4d57850b860c183bac9f866b6 {#2950
              -source: Source {#2928
                -code: """
                  {##}\n
                  {# You only need the previous line if you use the OctoberCMS Template Language extension in VS Code #}\n
                  \n
                  {# The following line isn't actually required, it just shows you how you can assign a property of this component \n
                     instance to a page variable: #}\n
                  {#{% set galleries = __SELF__.galleries %}#}\n
                  \n
                  {% if __SELF__.error %}\n
                  \t<div class="alert zen-alert">{{ __SELF__.error }}</div>\n
                  {% endif %}\n
                  \n
                  {% if galleries|length > 0 %}\n
                  \n
                  \t<div id="{{__SELF__.id}}">\n
                  \t\t{% for gallery in galleries %}\n
                  \t\t\t{{ __SELF__.visualizationTemplate|replace({'%type%': gallery.type, '%url%': gallery.url, '%slug%': gallery.slug, '%folder%': gallery.folder, '%name%': gallery.name, '%description%': gallery.description, '%keywords%': gallery.keywords, '%created_at%': gallery.createdAt, '%updated_at%': gallery.updatedAt, '%preview_image_url%': gallery.previewImage.url, '%published%': gallery.published, '%preview_image_title%': gallery.previewImage.title, '%preview_image_description%': gallery.previewImage.description, '%preview_image_width%': gallery.previewImage.width, '%preview_image_height%': gallery.previewImage.height, '%preview_image_filename%': gallery.previewImage.fileName, '%preview_image_filesize%': gallery.previewImage.fileSize, '%items_count%': gallery.items.length})|raw }}\n
                  \t\t{% endfor %}\n
                  \t</div>\n
                  \n
                  {% endif %}
                  """
                -name: "/var/www/novembergallery.zenware.hu/public_html/plugins/zenware/novembergallery/components/galleryhub/custom-template.htm"
                -path: ""
              }
              -macros: []
              #parent: false
              #parents: []
              #env: Environment {#522}
              #blocks: []
              #traits: []
              #extensions: array:8 [
                "Twig\Extension\CoreExtension" => CoreExtension {#525}
                "Twig\Extension\EscaperExtension" => EscaperExtension {#526}
                "Twig\Extension\OptimizerExtension" => OptimizerExtension {#527}
                "Cms\Twig\Extension" => Extension {#528}
                "System\Twig\Extension" => Extension {#529}
                "Cms\Twig\DebugExtension" => DebugExtension {#530}
                "Barryvdh\Debugbar\Twig\Extension\Debug" => Debug {#869}
                "Barryvdh\Debugbar\Twig\Extension\Stopwatch" => Stopwatch {#874}
              ]
              #sandbox: null
            }
            "__TwigTemplate_86a9220ae179b983c5cf03ed8dec58373778902edcb802731268cfcaddb04421" => __TwigTemplate_86a9220ae179b983c5cf03ed8dec58373778902edcb802731268cfcaddb04421 {#2933
              -source: Source {#2913
                -code: """
                  {##}\n
                  {# You only need the previous line if you use the OctoberCMS Template Language extension in VS Code #}\n
                  \n
                  {# The following line shows you how you can assign a property of this component instance to a page variable: #}\n
                  {% set galleries = __SELF__.galleries %}\n
                  \n
                  {# Please leave the following in the template, it allows the component to show error messages to the user: #}\n
                  {% if __SELF__.error %}\n
                  \t<div class="alert zen-alert">{{ __SELF__.error }}</div>\n
                  {% endif %}\n
                  \n
                  {#\n
                  \n
                  Drop your own code here. For example:\n
                  \n
                  {% if galleries|length > 0 %}\n
                  \n
                  \t<div id="{{__SELF__.id}}">\n
                  \t\t{% for gallery in galleries %}\n
                  \t\t\t<img alt="{{ gallery.name }}" \n
                  \t\t\t\tsrc="{{ gallery.previewImage.url | resize(280, false,  { mode: 'portrait', quality: '90', extension: 'png' }) }}" \n
                  \t\t\t\tstyle="margin: 20px;"\n
                  \t\t\t\t/>\n
                  \t\t{% endfor %}\n
                  \t</div>\n
                  \n
                  {% endif %}\n
                  \n
                  Hint: To dig into the galleries (or any other) variable/collection, you have two options. \n
                  You can simply add \n
                  \n
                  {{ dump(galleryHub.galleries.toArray) }} \n
                  \n
                  on your page after the component definition and it will print debug information about that \n
                  variable straight in your page. Alternatively, you can install the Debugbar plugin and then add \n
                  \n
                  {{ debug(galleryHub.galleries) }} \n
                  \n
                  to your page to show debug information in the Laravel debugbar. To see all public properties \n
                  of a gallery, do: \n
                  \n
                  {{ debug(galleryHub.galleries.first.toArray) }}. \n
                  \n
                  Make sure to replace "galleryHub" with the alias of your component as set in the component options!\n
                  \n
                  #}
                  """
                -name: "/var/www/novembergallery.zenware.hu/public_html/plugins/zenware/novembergallery/components/galleryhub/blank.htm"
                -path: ""
              }
              -macros: []
              #parent: false
              #parents: []
              #env: Environment {#522}
              #blocks: []
              #traits: []
              #extensions: array:8 [
                "Twig\Extension\CoreExtension" => CoreExtension {#525}
                "Twig\Extension\EscaperExtension" => EscaperExtension {#526}
                "Twig\Extension\OptimizerExtension" => OptimizerExtension {#527}
                "Cms\Twig\Extension" => Extension {#528}
                "System\Twig\Extension" => Extension {#529}
                "Cms\Twig\DebugExtension" => DebugExtension {#530}
                "Barryvdh\Debugbar\Twig\Extension\Debug" => Debug {#869}
                "Barryvdh\Debugbar\Twig\Extension\Stopwatch" => Stopwatch {#874}
              ]
              #sandbox: null
            }
          ]
          -strictVariables: false
          -templateClassPrefix: "__TwigTemplate_"
          -originalCache: FilesystemCache {#520}
          -extensionSet: ExtensionSet {#523
            -extensions: array:8 [
              "Twig\Extension\CoreExtension" => CoreExtension {#525}
              "Twig\Extension\EscaperExtension" => EscaperExtension {#526}
              "Twig\Extension\OptimizerExtension" => OptimizerExtension {#527}
              "Cms\Twig\Extension" => Extension {#528}
              "System\Twig\Extension" => Extension {#529}
              "Cms\Twig\DebugExtension" => DebugExtension {#530}
              "Barryvdh\Debugbar\Twig\Extension\Debug" => Debug {#869}
              "Barryvdh\Debugbar\Twig\Extension\Stopwatch" => Stopwatch {#874}
            ]
            -initialized: true
            -runtimeInitialized: true
            -staging: StagingExtension {#524
              -functions: []
              -filters: []
              -visitors: []
              -tokenParsers: []
              -tests: []
            }
            -parsers: array:31 [
              0 => ApplyTokenParser {#2704
                #parser: null
              }
              1 => ForTokenParser {#2705
                #parser: null
              }
              2 => IfTokenParser {#2706
                #parser: null
              }
              3 => ExtendsTokenParser {#2707
                #parser: null
              }
              4 => IncludeTokenParser {#2708
                #parser: null
              }
              5 => BlockTokenParser {#2709
                #parser: null
              }
              6 => UseTokenParser {#2710
                #parser: null
              }
              7 => FilterTokenParser {#2711
                #parser: null
              }
              8 => MacroTokenParser {#2712
                #parser: null
              }
              9 => ImportTokenParser {#2713
                #parser: null
              }
              10 => FromTokenParser {#2714
                #parser: null
              }
              11 => SetTokenParser {#2715
                #parser: null
              }
              12 => SpacelessTokenParser {#2716
                #parser: null
              }
              13 => FlushTokenParser {#2717
                #parser: null
              }
              14 => DoTokenParser {#2718
                #parser: null
              }
              15 => EmbedTokenParser {#2719
                #parser: null
              }
              16 => WithTokenParser {#2720
                #parser: null
              }
              17 => DeprecatedTokenParser {#2721
                #parser: null
              }
              18 => AutoEscapeTokenParser {#2726
                #parser: null
              }
              19 => PageTokenParser {#2737
                #parser: null
              }
              20 => PartialTokenParser {#2738
                #parser: null
              }
              21 => ContentTokenParser {#2739
                #parser: null
              }
              22 => PutTokenParser {#2740
                #parser: null
              }
              23 => PlaceholderTokenParser {#2741
                #parser: null
              }
              24 => DefaultTokenParser {#2742
                #parser: null
              }
              25 => FrameworkTokenParser {#2743
                #parser: null
              }
              26 => ComponentTokenParser {#2744
                #parser: null
              }
              27 => FlashTokenParser {#2745
                #parser: null
              }
              28 => ScriptsTokenParser {#2746
                #parser: null
              }
              29 => StylesTokenParser {#2747
                #parser: null
              }
              30 => StopwatchTokenParser {#2790
                #debugbarAvailable: true
                #parser: null
              }
            ]
            -visitors: array:3 [
              0 => MacroAutoImportNodeVisitor {#2722
                -inAModule: false
                -hasMacroCalls: false
              }
              1 => EscaperNodeVisitor {#2727
                -statusStack: []
                -blocks: []
                -safeAnalysis: SafeAnalysisNodeVisitor {#2728 …2}
                -traverser: null
                -defaultStrategy: false
                -safeVars: []
              }
              2 => OptimizerNodeVisitor {#2729
                -loops: []
                -loopsTargets: []
                -optimizers: -1
              }
            ]
            -filters: array:56 [
              "date" => TwigFilter {#2651
                -name: "date"
                -callable: "twig_date_format_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "date_modify" => TwigFilter {#2652
                -name: "date_modify"
                -callable: "twig_date_modify_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "format" => TwigFilter {#2653
                -name: "format"
                -callable: "sprintf"
                -options: array:10 [ …10]
                -arguments: []
              }
              "replace" => TwigFilter {#2654
                -name: "replace"
                -callable: "twig_replace_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "number_format" => TwigFilter {#2655
                -name: "number_format"
                -callable: "twig_number_format_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "abs" => TwigFilter {#2656
                -name: "abs"
                -callable: "abs"
                -options: array:10 [ …10]
                -arguments: []
              }
              "round" => TwigFilter {#2657
                -name: "round"
                -callable: "twig_round"
                -options: array:10 [ …10]
                -arguments: []
              }
              "url_encode" => TwigFilter {#2658
                -name: "url_encode"
                -callable: "twig_urlencode_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "json_encode" => TwigFilter {#2659
                -name: "json_encode"
                -callable: "json_encode"
                -options: array:10 [ …10]
                -arguments: []
              }
              "convert_encoding" => TwigFilter {#2660
                -name: "convert_encoding"
                -callable: "twig_convert_encoding"
                -options: array:10 [ …10]
                -arguments: []
              }
              "title" => TwigFilter {#2661
                -name: "title"
                -callable: "twig_title_string_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "capitalize" => TwigFilter {#2662
                -name: "capitalize"
                -callable: "twig_capitalize_string_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "upper" => TwigFilter {#2663
                -name: "upper"
                -callable: "twig_upper_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "lower" => TwigFilter {#2664
                -name: "lower"
                -callable: "twig_lower_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "striptags" => TwigFilter {#2665
                -name: "striptags"
                -callable: "strip_tags"
                -options: array:10 [ …10]
                -arguments: []
              }
              "trim" => TwigFilter {#2666
                -name: "trim"
                -callable: "twig_trim_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "nl2br" => TwigFilter {#2667
                -name: "nl2br"
                -callable: "nl2br"
                -options: array:10 [ …10]
                -arguments: []
              }
              "spaceless" => TwigFilter {#2668
                -name: "spaceless"
                -callable: "twig_spaceless"
                -options: array:10 [ …10]
                -arguments: []
              }
              "join" => TwigFilter {#2669
                -name: "join"
                -callable: "twig_join_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "split" => TwigFilter {#2670
                -name: "split"
                -callable: "twig_split_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "sort" => TwigFilter {#2671
                -name: "sort"
                -callable: "twig_sort_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "merge" => TwigFilter {#2672
                -name: "merge"
                -callable: "twig_array_merge"
                -options: array:10 [ …10]
                -arguments: []
              }
              "batch" => TwigFilter {#2673
                -name: "batch"
                -callable: "twig_array_batch"
                -options: array:10 [ …10]
                -arguments: []
              }
              "column" => TwigFilter {#2674
                -name: "column"
                -callable: "twig_array_column"
                -options: array:10 [ …10]
                -arguments: []
              }
              "filter" => TwigFilter {#2675
                -name: "filter"
                -callable: "twig_array_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "map" => TwigFilter {#2676
                -name: "map"
                -callable: "twig_array_map"
                -options: array:10 [ …10]
                -arguments: []
              }
              "reduce" => TwigFilter {#2677
                -name: "reduce"
                -callable: "twig_array_reduce"
                -options: array:10 [ …10]
                -arguments: []
              }
              "reverse" => TwigFilter {#2678
                -name: "reverse"
                -callable: "twig_reverse_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "length" => TwigFilter {#2679
                -name: "length"
                -callable: "twig_length_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "slice" => TwigFilter {#2680
                -name: "slice"
                -callable: "twig_slice"
                -options: array:10 [ …10]
                -arguments: []
              }
              "first" => TwigFilter {#2681
                -name: "first"
                -callable: "twig_first"
                -options: array:10 [ …10]
                -arguments: []
              }
              "last" => TwigFilter {#2682
                -name: "last"
                -callable: "twig_last"
                -options: array:10 [ …10]
                -arguments: []
              }
              "default" => TwigFilter {#2683
                -name: "default"
                -callable: "_twig_default_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "keys" => TwigFilter {#2684
                -name: "keys"
                -callable: "twig_get_array_keys_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "escape" => TwigFilter {#2723
                -name: "escape"
                -callable: "twig_escape_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "e" => TwigFilter {#2724
                -name: "e"
                -callable: "twig_escape_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "raw" => TwigFilter {#2725
                -name: "raw"
                -callable: "twig_raw_filter"
                -options: array:10 [ …10]
                -arguments: []
              }
              "page" => TwigFilter {#2730
                -name: "page"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                -arguments: []
              }
              "theme" => TwigFilter {#2731
                -name: "theme"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                -arguments: []
              }
              "app" => TwigFilter {#2748
                -name: "app"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                -arguments: []
              }
              "media" => TwigFilter {#2749
                -name: "media"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                -arguments: []
              }
              "slug" => TwigFilter {#2751
                -name: "slug"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                -arguments: []
              }
              "plural" => TwigFilter {#2752
                -name: "plural"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                -arguments: []
              }
              "singular" => TwigFilter {#2753
                -name: "singular"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                -arguments: []
              }
              "finish" => TwigFilter {#2754
                -name: "finish"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                -arguments: []
              }
              "snake" => TwigFilter {#2755
                -name: "snake"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                -arguments: []
              }
              "camel" => TwigFilter {#2756
                -name: "camel"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                -arguments: []
              }
              "studly" => TwigFilter {#2757
                -name: "studly"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                -arguments: []
              }
              "trans" => TwigFilter {#2758
                -name: "trans"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                -arguments: []
              }
              "transchoice" => TwigFilter {#2759
                -name: "transchoice"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                -arguments: []
              }
              "md" => TwigFilter {#2760
                -name: "md"
                -callable: array:2 [ …2]
                -options: array:10 [ …10]
                 …1
              }
              "md_safe" => TwigFilter {#2761 …4}
              "time_since" => TwigFilter {#2762 …4}
              "time_tense" => TwigFilter {#2763 …4}
              "staticPage" => TwigFilter {#2764 …4}
              "resize" => TwigFilter {#2765 …4}
            ]
            -tests: array:10 [
              "even" => TwigTest {#2694 …4}
              "odd" => TwigTest {#2695 …4}
              "defined" => TwigTest {#2696 …4}
              "same as" => TwigTest {#2697 …4}
              "none" => TwigTest {#2698 …4}
              "null" => TwigTest {#2699 …4}
              "divisible by" => TwigTest {#2700 …4}
              "constant" => TwigTest {#2701 …4}
              "empty" => TwigTest {#2702 …4}
              "iterable" => TwigTest {#2703 …4}
            ]
            -functions: array:34 [
              "max" => TwigFunction {#2685 …4}
              "min" => TwigFunction {#2686 …4}
              "range" => TwigFunction {#2687 …4}
              "constant" => TwigFunction {#2688 …4}
              "cycle" => TwigFunction {#2689 …4}
              "random" => TwigFunction {#2690 …4}
              "date" => TwigFunction {#2691 …4}
              "include" => TwigFunction {#2692 …4}
              "source" => TwigFunction {#2693 …4}
              "page" => TwigFunction {#2732 …4}
              "partial" => TwigFunction {#2733 …4}
              "content" => TwigFunction {#2734 …4}
              "component" => TwigFunction {#2735 …4}
              "placeholder" => TwigFunction {#2736 …4}
              "input" => TwigFunction {#2766 …4}
              "post" => TwigFunction {#2767 …4}
              "get" => TwigFunction {#2768 …4}
              "link_to" => TwigFunction {#2769 …4}
              "link_to_asset" => TwigFunction {#2770 …4}
              "link_to_route" => TwigFunction {#2771 …4}
              "link_to_action" => TwigFunction {#2772 …4}
              "asset" => TwigFunction {#2773 …4}
              "action" => TwigFunction {#2774 …4}
              "url" => TwigFunction {#2775 …4}
              "route" => TwigFunction {#2776 …4}
              "secure_url" => TwigFunction {#2777 …4}
              "secure_asset" => TwigFunction {#2778 …4}
              "str_*" => TwigFunction {#2780 …4}
              "url_*" => TwigFunction {#2782 …4}
              "html_*" => TwigFunction {#2784 …4}
              "form_*" => TwigFunction {#2786 …4}
              "form_macro" => TwigFunction {#2787 …4}
              "dump" => TwigFunction {#2788 …4}
              "debug" => TwigFunction {#2789 …4}
            ]
            -unaryOperators: array:3 [
              "not" => array:2 [ …2]
              "-" => array:2 [ …2]
              "+" => array:2 [ …2]
            ]
            -binaryOperators: array:28 [
              "or" => array:3 [ …3]
              "and" => array:3 [ …3]
              "b-or" => array:3 [ …3]
              "b-xor" => array:3 [ …3]
              "b-and" => array:3 [ …3]
              "==" => array:3 [ …3]
              "!=" => array:3 [ …3]
              "<" => array:3 [ …3]
              ">" => array:3 [ …3]
              ">=" => array:3 [ …3]
              "<=" => array:3 [ …3]
              "not in" => array:3 [ …3]
              "in" => array:3 [ …3]
              "matches" => array:3 [ …3]
              "starts with" => array:3 [ …3]
              "ends with" => array:3 [ …3]
              ".." => array:3 [ …3]
              "+" => array:3 [ …3]
              "-" => array:3 [ …3]
              "~" => array:3 [ …3]
              "*" => array:3 [ …3]
              "/" => array:3 [ …3]
              "//" => array:3 [ …3]
              "%" => array:3 [ …3]
              "is" => array:2 [ …2]
              "is not" => array:2 [ …2]
              "**" => array:3 [ …3]
              "??" => array:3 [ …3]
            ]
            -globals: null
            -functionCallbacks: []
            -filterCallbacks: []
            -lastModified: 1569440832
          }
          -runtimeLoaders: []
          -runtimes: []
          -optionsHash: "["Twig\\Extension\\CoreExtension","Twig\\Extension\\EscaperExtension","Twig\\Extension\\OptimizerExtension","Cms\\Twig\\Extension","System\\Twig\\Extension","Cms\\Twig\\DebugExtension","Barryvdh\\Debugbar\\Twig\\Extension\\Debug","Barryvdh\\Debugbar\\Twig\\Extension\\Stopwatch"]:7:2:2.11.3:1:\Twig\Template:0"
        }
        #pageContents: null
        +vars: array:11 [
          "this" => array:7 [
            "page" => Page {#851}
            "layout" => Layout {#897}
            "theme" => Theme {#449}
            "param" => []
            "controller" => Controller {#448}
            "environment" => "development"
            "session" => SessionManager {#295
              #app: Application {#2 …33}
              #customCreators: []
              #drivers: array:1 [ …1]
            }
          ]
          "errors" => ViewErrorBag {#892
            #bags: []
          }
          "galleryHub" => GalleryHub {#909}
          "galleryHub2" => GalleryHub {#910}
          "galleryHub3" => GalleryHub {#911}
          "galleryHub4" => GalleryHub {#912}
          "galleries" => Collection {#2563}
          "novemberGallery_galleryHub" => Collection {#1242}
          "novemberGallery_galleryHub2" => Collection {#1650}
          "novemberGallery_galleryHub3" => Collection {#1833}
          "novemberGallery_galleryHub4" => Collection {#2563}
        ]
        #statusCode: 200
        #componentContext: null
        #partialStack: PartialStack {#465
          +activePartial: null
          #partialStack: []
        }
        #assets: array:3 [
          "js" => array:4 [
            0 => array:2 [
              "path" => "//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"
              "attributes" => []
            ]
            1 => array:2 [
              "path" => "//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"
              "attributes" => []
            ]
            2 => array:2 [
              "path" => "//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"
              "attributes" => []
            ]
            3 => array:2 [
              "path" => "//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"
              "attributes" => []
            ]
          ]
          "css" => array:4 [
            0 => array:2 [
              "path" => "https://novembergallery.zenware.hu/plugins/zenware/novembergallery/assets/css/novembergallery.css"
              "attributes" => []
            ]
            1 => array:2 [
              "path" => "https://novembergallery.zenware.hu/plugins/zenware/novembergallery/assets/css/novembergallery.css"
              "attributes" => []
            ]
            2 => array:2 [
              "path" => "https://novembergallery.zenware.hu/plugins/zenware/novembergallery/assets/css/novembergallery.css"
              "attributes" => []
            ]
            3 => array:2 [
              "path" => "https://novembergallery.zenware.hu/plugins/zenware/novembergallery/assets/css/novembergallery.css"
              "attributes" => []
            ]
          ]
          "rss" => []
        ]
        +assetPath: "/themes/demo"
        #emitterSingleEventCollection: []
        #emitterEventCollection: []
        #emitterEventSorted: []
      }
      #page: Cms60fc337298a8a939074938_ca15071c65bc5d0bd90bcde9c887b3a8Class {#896}
      #externalPropertyNames: []
      +implement: null
      #extensionData: array:4 [
        "extensions" => []
        "methods" => []
        "dynamicMethods" => []
        "dynamicProperties" => []
      ]
      #assets: array:3 [
        "js" => array:1 [
          0 => array:2 [
            "path" => "//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"
            "attributes" => []
          ]
        ]
        "css" => array:1 [
          0 => array:2 [
            "path" => "https://novembergallery.zenware.hu/plugins/zenware/novembergallery/assets/css/novembergallery.css"
            "attributes" => []
          ]
        ]
        "rss" => []
      ]
      +assetPath: "/plugins/zenware/novembergallery"
      #emitterSingleEventCollection: []
      #emitterEventCollection: []
      #emitterEventSorted: []
      #properties: array:6 [
        "hubType" => "CITY"
        "maxItems" => "100"
        "linkUrl" => "/demos/dynamic-gallery/%slug%"
        "openInNewTab" => "1"
        "template" => ""
        "visualization" => "default"
      ]
    }
    +title: "Erzsébet bridge"
    +description: "A view of Erzsébet bridge around dusk from Belgrád rakpart"
    +sortOrder: 80
    +file: null
    +octoberImageFile: File {#1166
      #table: "system_files"
      +morphTo: array:1 [
        "attachment" => []
      ]
      #guarded: array:1 [
        0 => "disk_name"
      ]
      #hidden: array:3 [
        0 => "attachment_type"
        1 => "attachment_id"
        2 => "is_public"
      ]
      #appends: array:2 [
        0 => "path"
        1 => "extension"
      ]
      +data: null
      #autoMimeTypes: array:9 [
        "docx" => "application/msword"
        "xlsx" => "application/excel"
        "gif" => "image/gif"
        "png" => "image/png"
        "jpg" => "image/jpeg"
        "jpeg" => "image/jpeg"
        "webp" => "image/webp"
        "pdf" => "application/pdf"
        "svg" => "image/svg+xml"
      ]
      +implement: null
      +attributes: array:14 [
        "id" => 80
        "disk_name" => "5d5e7bebab0b6453042679.jpg"
        "file_name" => "WP1680x1050_0056_0403N18.jpg"
        "file_size" => 173238
        "content_type" => "image/jpeg"
        "title" => "Erzsébet bridge"
        "description" => "A view of Erzsébet bridge around dusk from Belgrád rakpart"
        "field" => "preview_image"
        "attachment_id" => "7"
        "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
        "is_public" => 1
        "sort_order" => 80
        "created_at" => "2019-08-22 11:26:35"
        "updated_at" => "2020-07-01 15:41:42"
      ]
      #jsonable: []
      #dates: []
      +duplicateCache: true
      #connection: "mysql"
      #primaryKey: "id"
      #keyType: "int"
      +incrementing: true
      #with: []
      #withCount: []
      #perPage: 15
      +exists: true
      +wasRecentlyCreated: false
      #original: array:14 [
        "id" => 80
        "disk_name" => "5d5e7bebab0b6453042679.jpg"
        "file_name" => "WP1680x1050_0056_0403N18.jpg"
        "file_size" => 173238
        "content_type" => "image/jpeg"
        "title" => "Erzsébet bridge"
        "description" => "A view of Erzsébet bridge around dusk from Belgrád rakpart"
        "field" => "preview_image"
        "attachment_id" => "7"
        "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
        "is_public" => 1
        "sort_order" => 80
        "created_at" => "2019-08-22 11:26:35"
        "updated_at" => "2020-07-01 15:41:42"
      ]
      #changes: []
      #casts: []
      #dateFormat: null
      #dispatchesEvents: []
      #observables: []
      #relations: []
      #touches: []
      +timestamps: true
      #visible: []
      #fillable: []
      +hasMany: []
      +hasOne: []
      +belongsTo: []
      +belongsToMany: []
      +morphOne: []
      +morphMany: []
      +morphToMany: []
      +morphedByMany: []
      +attachOne: []
      +attachMany: []
      +hasManyThrough: []
      #emitterSingleEventCollection: []
      #emitterEventCollection: []
      #emitterEventSorted: []
      #extensionData: array:4 [
        "extensions" => []
        "methods" => []
        "dynamicMethods" => []
        "dynamicProperties" => []
      ]
      +sessionKey: null
    }
    +width: 900
    +height: 562
    +type: 2
    +orientation: "horizontal"
    +fileNameWithoutExtension: "5d5e7bebab0b6453042679"
    +fileExtension: "jpg"
    +fileName: "5d5e7bebab0b6453042679.jpg"
    +filePath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/eba"
    +fileRealPath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/eba/5d5e7bebab0b6453042679.jpg"
    +fileSize: 173238
    +relativeFilePath: "/storage/app/uploads/public/5d5/e7b/eba/5d5e7bebab0b6453042679.jpg"
    +uploaded: DateTime {#1026
      +"date": "2019-08-22 11:26:35.000000"
      +"timezone_type": 3
      +"timezone": "UTC"
    }
    +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/eba/5d5e7bebab0b6453042679.jpg"
  }
  +published: 1
  +items: Collection {#954
    #items: array:7 [
      0 => GalleryItem {#1023
        -component: GalleryHub {#909}
        +title: "A tram in front of Nyugati train station"
        +description: ""
        +sortOrder: 1
        +file: null
        +octoberImageFile: File {#1090
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #guarded: array:1 [
            0 => "disk_name"
          ]
          #hidden: array:3 [
            0 => "attachment_type"
            1 => "attachment_id"
            2 => "is_public"
          ]
          #appends: array:2 [
            0 => "path"
            1 => "extension"
          ]
          +data: null
          #autoMimeTypes: array:9 [
            "docx" => "application/msword"
            "xlsx" => "application/excel"
            "gif" => "image/gif"
            "png" => "image/png"
            "jpg" => "image/jpeg"
            "jpeg" => "image/jpeg"
            "webp" => "image/webp"
            "pdf" => "application/pdf"
            "svg" => "image/svg+xml"
          ]
          +implement: null
          +attributes: array:14 [
            "id" => 76
            "disk_name" => "5d5e7bdb5869b330510709.jpg"
            "file_name" => "WP1680x1050_0059_0310P21.jpg"
            "file_size" => 311077
            "content_type" => "image/jpeg"
            "title" => "A tram in front of Nyugati train station"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 1
            "created_at" => "2019-08-22 11:26:19"
            "updated_at" => "2019-08-23 10:25:33"
          ]
          #jsonable: []
          #dates: []
          +duplicateCache: true
          #connection: "mysql"
          #primaryKey: "id"
          #keyType: "int"
          +incrementing: true
          #with: []
          #withCount: []
          #perPage: 15
          +exists: true
          +wasRecentlyCreated: false
          #original: array:14 [
            "id" => 76
            "disk_name" => "5d5e7bdb5869b330510709.jpg"
            "file_name" => "WP1680x1050_0059_0310P21.jpg"
            "file_size" => 311077
            "content_type" => "image/jpeg"
            "title" => "A tram in front of Nyugati train station"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 1
            "created_at" => "2019-08-22 11:26:19"
            "updated_at" => "2019-08-23 10:25:33"
          ]
          #changes: []
          #casts: []
          #dateFormat: null
          #dispatchesEvents: []
          #observables: []
          #relations: []
          #touches: []
          +timestamps: true
          #visible: []
          #fillable: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: []
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: []
          #emitterEventSorted: []
          #extensionData: array:4 [
            "extensions" => []
            "methods" => []
            "dynamicMethods" => []
            "dynamicProperties" => []
          ]
          +sessionKey: null
        }
        +width: 900
        +height: 562
        +type: 2
        +orientation: "horizontal"
        +fileNameWithoutExtension: "5d5e7bdb5869b330510709"
        +fileExtension: "jpg"
        +fileName: "5d5e7bdb5869b330510709.jpg"
        +filePath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/db5"
        +fileRealPath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/db5/5d5e7bdb5869b330510709.jpg"
        +fileSize: 311077
        +relativeFilePath: "/storage/app/uploads/public/5d5/e7b/db5/5d5e7bdb5869b330510709.jpg"
        +uploaded: DateTime {#1024
          +"date": "2019-08-22 11:26:19.000000"
          +"timezone_type": 3
          +"timezone": "UTC"
        }
        +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/db5/5d5e7bdb5869b330510709.jpg"
      }
      1 => GalleryItem {#1031
        -component: GalleryHub {#909}
        +title: "Bike in front of moving tram"
        +description: ""
        +sortOrder: 2
        +file: null
        +octoberImageFile: File {#1091
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #guarded: array:1 [
            0 => "disk_name"
          ]
          #hidden: array:3 [
            0 => "attachment_type"
            1 => "attachment_id"
            2 => "is_public"
          ]
          #appends: array:2 [
            0 => "path"
            1 => "extension"
          ]
          +data: null
          #autoMimeTypes: array:9 [
            "docx" => "application/msword"
            "xlsx" => "application/excel"
            "gif" => "image/gif"
            "png" => "image/png"
            "jpg" => "image/jpeg"
            "jpeg" => "image/jpeg"
            "webp" => "image/webp"
            "pdf" => "application/pdf"
            "svg" => "image/svg+xml"
          ]
          +implement: null
          +attributes: array:14 [
            "id" => 74
            "disk_name" => "5d5e7bda14263088031203.jpg"
            "file_name" => "WP1680x1050_0009_1002D022M.jpg"
            "file_size" => 202932
            "content_type" => "image/jpeg"
            "title" => "Bike in front of moving tram"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 2
            "created_at" => "2019-08-22 11:26:18"
            "updated_at" => "2019-08-23 10:25:41"
          ]
          #jsonable: []
          #dates: []
          +duplicateCache: true
          #connection: "mysql"
          #primaryKey: "id"
          #keyType: "int"
          +incrementing: true
          #with: []
          #withCount: []
          #perPage: 15
          +exists: true
          +wasRecentlyCreated: false
          #original: array:14 [
            "id" => 74
            "disk_name" => "5d5e7bda14263088031203.jpg"
            "file_name" => "WP1680x1050_0009_1002D022M.jpg"
            "file_size" => 202932
            "content_type" => "image/jpeg"
            "title" => "Bike in front of moving tram"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 2
            "created_at" => "2019-08-22 11:26:18"
            "updated_at" => "2019-08-23 10:25:41"
          ]
          #changes: []
          #casts: []
          #dateFormat: null
          #dispatchesEvents: []
          #observables: []
          #relations: []
          #touches: []
          +timestamps: true
          #visible: []
          #fillable: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: []
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: []
          #emitterEventSorted: []
          #extensionData: array:4 [
            "extensions" => []
            "methods" => []
            "dynamicMethods" => []
            "dynamicProperties" => []
          ]
          +sessionKey: null
        }
        +width: 900
        +height: 562
        +type: 2
        +orientation: "horizontal"
        +fileNameWithoutExtension: "5d5e7bda14263088031203"
        +fileExtension: "jpg"
        +fileName: "5d5e7bda14263088031203.jpg"
        +filePath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/da1"
        +fileRealPath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/da1/5d5e7bda14263088031203.jpg"
        +fileSize: 202932
        +relativeFilePath: "/storage/app/uploads/public/5d5/e7b/da1/5d5e7bda14263088031203.jpg"
        +uploaded: DateTime {#1089
          +"date": "2019-08-22 11:26:18.000000"
          +"timezone_type": 3
          +"timezone": "UTC"
        }
        +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/da1/5d5e7bda14263088031203.jpg"
      }
      2 => GalleryItem {#1086
        -component: GalleryHub {#909}
        +title: "View towards the Basilica across the Danube"
        +description: ""
        +sortOrder: 3
        +file: null
        +octoberImageFile: File {#1088
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #guarded: array:1 [
            0 => "disk_name"
          ]
          #hidden: array:3 [
            0 => "attachment_type"
            1 => "attachment_id"
            2 => "is_public"
          ]
          #appends: array:2 [
            0 => "path"
            1 => "extension"
          ]
          +data: null
          #autoMimeTypes: array:9 [
            "docx" => "application/msword"
            "xlsx" => "application/excel"
            "gif" => "image/gif"
            "png" => "image/png"
            "jpg" => "image/jpeg"
            "jpeg" => "image/jpeg"
            "webp" => "image/webp"
            "pdf" => "application/pdf"
            "svg" => "image/svg+xml"
          ]
          +implement: null
          +attributes: array:14 [
            "id" => 75
            "disk_name" => "5d5e7bdb21968612599725.jpg"
            "file_name" => "WP1680x1050_0058_0314P16.jpg"
            "file_size" => 261170
            "content_type" => "image/jpeg"
            "title" => "View towards the Basilica across the Danube"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 3
            "created_at" => "2019-08-22 11:26:19"
            "updated_at" => "2019-08-23 10:26:06"
          ]
          #jsonable: []
          #dates: []
          +duplicateCache: true
          #connection: "mysql"
          #primaryKey: "id"
          #keyType: "int"
          +incrementing: true
          #with: []
          #withCount: []
          #perPage: 15
          +exists: true
          +wasRecentlyCreated: false
          #original: array:14 [
            "id" => 75
            "disk_name" => "5d5e7bdb21968612599725.jpg"
            "file_name" => "WP1680x1050_0058_0314P16.jpg"
            "file_size" => 261170
            "content_type" => "image/jpeg"
            "title" => "View towards the Basilica across the Danube"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 3
            "created_at" => "2019-08-22 11:26:19"
            "updated_at" => "2019-08-23 10:26:06"
          ]
          #changes: []
          #casts: []
          #dateFormat: null
          #dispatchesEvents: []
          #observables: []
          #relations: []
          #touches: []
          +timestamps: true
          #visible: []
          #fillable: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: []
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: []
          #emitterEventSorted: []
          #extensionData: array:4 [
            "extensions" => []
            "methods" => []
            "dynamicMethods" => []
            "dynamicProperties" => []
          ]
          +sessionKey: null
        }
        +width: 900
        +height: 562
        +type: 2
        +orientation: "horizontal"
        +fileNameWithoutExtension: "5d5e7bdb21968612599725"
        +fileExtension: "jpg"
        +fileName: "5d5e7bdb21968612599725.jpg"
        +filePath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/db2"
        +fileRealPath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/db2/5d5e7bdb21968612599725.jpg"
        +fileSize: 261170
        +relativeFilePath: "/storage/app/uploads/public/5d5/e7b/db2/5d5e7bdb21968612599725.jpg"
        +uploaded: DateTime {#1032
          +"date": "2019-08-22 11:26:19.000000"
          +"timezone_type": 3
          +"timezone": "UTC"
        }
        +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/db2/5d5e7bdb21968612599725.jpg"
      }
      3 => GalleryItem {#1097
        -component: GalleryHub {#909}
        +title: "Erzsebet bridge on August 20th"
        +description: ""
        +sortOrder: 4
        +file: null
        +octoberImageFile: File {#1092
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #guarded: array:1 [
            0 => "disk_name"
          ]
          #hidden: array:3 [
            0 => "attachment_type"
            1 => "attachment_id"
            2 => "is_public"
          ]
          #appends: array:2 [
            0 => "path"
            1 => "extension"
          ]
          +data: null
          #autoMimeTypes: array:9 [
            "docx" => "application/msword"
            "xlsx" => "application/excel"
            "gif" => "image/gif"
            "png" => "image/png"
            "jpg" => "image/jpeg"
            "jpeg" => "image/jpeg"
            "webp" => "image/webp"
            "pdf" => "application/pdf"
            "svg" => "image/svg+xml"
          ]
          +implement: null
          +attributes: array:14 [
            "id" => 79
            "disk_name" => "5d5e7bdc9ca71077835509.jpg"
            "file_name" => "WP1680x1050_0097_1118D010M2.jpg"
            "file_size" => 176195
            "content_type" => "image/jpeg"
            "title" => "Erzsebet bridge on August 20th"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 4
            "created_at" => "2019-08-22 11:26:20"
            "updated_at" => "2019-08-23 10:26:25"
          ]
          #jsonable: []
          #dates: []
          +duplicateCache: true
          #connection: "mysql"
          #primaryKey: "id"
          #keyType: "int"
          +incrementing: true
          #with: []
          #withCount: []
          #perPage: 15
          +exists: true
          +wasRecentlyCreated: false
          #original: array:14 [
            "id" => 79
            "disk_name" => "5d5e7bdc9ca71077835509.jpg"
            "file_name" => "WP1680x1050_0097_1118D010M2.jpg"
            "file_size" => 176195
            "content_type" => "image/jpeg"
            "title" => "Erzsebet bridge on August 20th"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 4
            "created_at" => "2019-08-22 11:26:20"
            "updated_at" => "2019-08-23 10:26:25"
          ]
          #changes: []
          #casts: []
          #dateFormat: null
          #dispatchesEvents: []
          #observables: []
          #relations: []
          #touches: []
          +timestamps: true
          #visible: []
          #fillable: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: []
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: []
          #emitterEventSorted: []
          #extensionData: array:4 [
            "extensions" => []
            "methods" => []
            "dynamicMethods" => []
            "dynamicProperties" => []
          ]
          +sessionKey: null
        }
        +width: 900
        +height: 562
        +type: 2
        +orientation: "horizontal"
        +fileNameWithoutExtension: "5d5e7bdc9ca71077835509"
        +fileExtension: "jpg"
        +fileName: "5d5e7bdc9ca71077835509.jpg"
        +filePath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/dc9"
        +fileRealPath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/dc9/5d5e7bdc9ca71077835509.jpg"
        +fileSize: 176195
        +relativeFilePath: "/storage/app/uploads/public/5d5/e7b/dc9/5d5e7bdc9ca71077835509.jpg"
        +uploaded: DateTime {#1096
          +"date": "2019-08-22 11:26:20.000000"
          +"timezone_type": 3
          +"timezone": "UTC"
        }
        +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/dc9/5d5e7bdc9ca71077835509.jpg"
      }
      4 => GalleryItem {#1099
        -component: GalleryHub {#909}
        +title: "View towards Lanchid from Gellert hill"
        +description: ""
        +sortOrder: 5
        +file: null
        +octoberImageFile: File {#1093
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #guarded: array:1 [
            0 => "disk_name"
          ]
          #hidden: array:3 [
            0 => "attachment_type"
            1 => "attachment_id"
            2 => "is_public"
          ]
          #appends: array:2 [
            0 => "path"
            1 => "extension"
          ]
          +data: null
          #autoMimeTypes: array:9 [
            "docx" => "application/msword"
            "xlsx" => "application/excel"
            "gif" => "image/gif"
            "png" => "image/png"
            "jpg" => "image/jpeg"
            "jpeg" => "image/jpeg"
            "webp" => "image/webp"
            "pdf" => "application/pdf"
            "svg" => "image/svg+xml"
          ]
          +implement: null
          +attributes: array:14 [
            "id" => 77
            "disk_name" => "5d5e7bdbf2f70141512178.jpg"
            "file_name" => "WP1680x1050_0060_0309M27_12x18in.jpg"
            "file_size" => 217983
            "content_type" => "image/jpeg"
            "title" => "View towards Lanchid from Gellert hill"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 5
            "created_at" => "2019-08-22 11:26:19"
            "updated_at" => "2019-08-23 10:26:39"
          ]
          #jsonable: []
          #dates: []
          +duplicateCache: true
          #connection: "mysql"
          #primaryKey: "id"
          #keyType: "int"
          +incrementing: true
          #with: []
          #withCount: []
          #perPage: 15
          +exists: true
          +wasRecentlyCreated: false
          #original: array:14 [
            "id" => 77
            "disk_name" => "5d5e7bdbf2f70141512178.jpg"
            "file_name" => "WP1680x1050_0060_0309M27_12x18in.jpg"
            "file_size" => 217983
            "content_type" => "image/jpeg"
            "title" => "View towards Lanchid from Gellert hill"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 5
            "created_at" => "2019-08-22 11:26:19"
            "updated_at" => "2019-08-23 10:26:39"
          ]
          #changes: []
          #casts: []
          #dateFormat: null
          #dispatchesEvents: []
          #observables: []
          #relations: []
          #touches: []
          +timestamps: true
          #visible: []
          #fillable: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: []
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: []
          #emitterEventSorted: []
          #extensionData: array:4 [
            "extensions" => []
            "methods" => []
            "dynamicMethods" => []
            "dynamicProperties" => []
          ]
          +sessionKey: null
        }
        +width: 900
        +height: 562
        +type: 2
        +orientation: "horizontal"
        +fileNameWithoutExtension: "5d5e7bdbf2f70141512178"
        +fileExtension: "jpg"
        +fileName: "5d5e7bdbf2f70141512178.jpg"
        +filePath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/dbf"
        +fileRealPath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/dbf/5d5e7bdbf2f70141512178.jpg"
        +fileSize: 217983
        +relativeFilePath: "/storage/app/uploads/public/5d5/e7b/dbf/5d5e7bdbf2f70141512178.jpg"
        +uploaded: DateTime {#1098
          +"date": "2019-08-22 11:26:19.000000"
          +"timezone_type": 3
          +"timezone": "UTC"
        }
        +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/dbf/5d5e7bdbf2f70141512178.jpg"
      }
      5 => GalleryItem {#1101
        -component: GalleryHub {#909}
        +title: "Beautiful Erzsebet bridge"
        +description: ""
        +sortOrder: 6
        +file: null
        +octoberImageFile: File {#1094
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #guarded: array:1 [
            0 => "disk_name"
          ]
          #hidden: array:3 [
            0 => "attachment_type"
            1 => "attachment_id"
            2 => "is_public"
          ]
          #appends: array:2 [
            0 => "path"
            1 => "extension"
          ]
          +data: null
          #autoMimeTypes: array:9 [
            "docx" => "application/msword"
            "xlsx" => "application/excel"
            "gif" => "image/gif"
            "png" => "image/png"
            "jpg" => "image/jpeg"
            "jpeg" => "image/jpeg"
            "webp" => "image/webp"
            "pdf" => "application/pdf"
            "svg" => "image/svg+xml"
          ]
          +implement: null
          +attributes: array:14 [
            "id" => 73
            "disk_name" => "5d5e7bda0a4c2452634825.jpg"
            "file_name" => "WP1680x1050_0056_0403N18.jpg"
            "file_size" => 173238
            "content_type" => "image/jpeg"
            "title" => "Beautiful Erzsebet bridge"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 6
            "created_at" => "2019-08-22 11:26:18"
            "updated_at" => "2019-08-23 10:26:50"
          ]
          #jsonable: []
          #dates: []
          +duplicateCache: true
          #connection: "mysql"
          #primaryKey: "id"
          #keyType: "int"
          +incrementing: true
          #with: []
          #withCount: []
          #perPage: 15
          +exists: true
          +wasRecentlyCreated: false
          #original: array:14 [
            "id" => 73
            "disk_name" => "5d5e7bda0a4c2452634825.jpg"
            "file_name" => "WP1680x1050_0056_0403N18.jpg"
            "file_size" => 173238
            "content_type" => "image/jpeg"
            "title" => "Beautiful Erzsebet bridge"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 6
            "created_at" => "2019-08-22 11:26:18"
            "updated_at" => "2019-08-23 10:26:50"
          ]
          #changes: []
          #casts: []
          #dateFormat: null
          #dispatchesEvents: []
          #observables: []
          #relations: []
          #touches: []
          +timestamps: true
          #visible: []
          #fillable: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: []
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: []
          #emitterEventSorted: []
          #extensionData: array:4 [
            "extensions" => []
            "methods" => []
            "dynamicMethods" => []
            "dynamicProperties" => []
          ]
          +sessionKey: null
        }
        +width: 900
        +height: 562
        +type: 2
        +orientation: "horizontal"
        +fileNameWithoutExtension: "5d5e7bda0a4c2452634825"
        +fileExtension: "jpg"
        +fileName: "5d5e7bda0a4c2452634825.jpg"
        +filePath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/da0"
        +fileRealPath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/da0/5d5e7bda0a4c2452634825.jpg"
        +fileSize: 173238
        +relativeFilePath: "/storage/app/uploads/public/5d5/e7b/da0/5d5e7bda0a4c2452634825.jpg"
        +uploaded: DateTime {#1100
          +"date": "2019-08-22 11:26:18.000000"
          +"timezone_type": 3
          +"timezone": "UTC"
        }
        +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/da0/5d5e7bda0a4c2452634825.jpg"
      }
      6 => GalleryItem {#1103
        -component: GalleryHub {#909}
        +title: "View towards vizivaros from Gellert hill"
        +description: ""
        +sortOrder: 7
        +file: null
        +octoberImageFile: File {#1095
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #guarded: array:1 [
            0 => "disk_name"
          ]
          #hidden: array:3 [
            0 => "attachment_type"
            1 => "attachment_id"
            2 => "is_public"
          ]
          #appends: array:2 [
            0 => "path"
            1 => "extension"
          ]
          +data: null
          #autoMimeTypes: array:9 [
            "docx" => "application/msword"
            "xlsx" => "application/excel"
            "gif" => "image/gif"
            "png" => "image/png"
            "jpg" => "image/jpeg"
            "jpeg" => "image/jpeg"
            "webp" => "image/webp"
            "pdf" => "application/pdf"
            "svg" => "image/svg+xml"
          ]
          +implement: null
          +attributes: array:14 [
            "id" => 78
            "disk_name" => "5d5e7bdc50ffe900095666.jpg"
            "file_name" => "WP1680x1050_0061_0309M11.jpg"
            "file_size" => 230480
            "content_type" => "image/jpeg"
            "title" => "View towards vizivaros from Gellert hill"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 7
            "created_at" => "2019-08-22 11:26:20"
            "updated_at" => "2019-08-23 10:27:07"
          ]
          #jsonable: []
          #dates: []
          +duplicateCache: true
          #connection: "mysql"
          #primaryKey: "id"
          #keyType: "int"
          +incrementing: true
          #with: []
          #withCount: []
          #perPage: 15
          +exists: true
          +wasRecentlyCreated: false
          #original: array:14 [
            "id" => 78
            "disk_name" => "5d5e7bdc50ffe900095666.jpg"
            "file_name" => "WP1680x1050_0061_0309M11.jpg"
            "file_size" => 230480
            "content_type" => "image/jpeg"
            "title" => "View towards vizivaros from Gellert hill"
            "description" => ""
            "field" => "images"
            "attachment_id" => "7"
            "attachment_type" => "ZenWare\NovemberGallery\Models\Gallery"
            "is_public" => 1
            "sort_order" => 7
            "created_at" => "2019-08-22 11:26:20"
            "updated_at" => "2019-08-23 10:27:07"
          ]
          #changes: []
          #casts: []
          #dateFormat: null
          #dispatchesEvents: []
          #observables: []
          #relations: []
          #touches: []
          +timestamps: true
          #visible: []
          #fillable: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: []
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: []
          #emitterEventSorted: []
          #extensionData: array:4 [
            "extensions" => []
            "methods" => []
            "dynamicMethods" => []
            "dynamicProperties" => []
          ]
          +sessionKey: null
        }
        +width: 900
        +height: 562
        +type: 2
        +orientation: "horizontal"
        +fileNameWithoutExtension: "5d5e7bdc50ffe900095666"
        +fileExtension: "jpg"
        +fileName: "5d5e7bdc50ffe900095666.jpg"
        +filePath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/dc5"
        +fileRealPath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/dc5/5d5e7bdc50ffe900095666.jpg"
        +fileSize: 230480
        +relativeFilePath: "/storage/app/uploads/public/5d5/e7b/dc5/5d5e7bdc50ffe900095666.jpg"
        +uploaded: DateTime {#1102
          +"date": "2019-08-22 11:26:20.000000"
          +"timezone_type": 3
          +"timezone": "UTC"
        }
        +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/dc5/5d5e7bdc50ffe900095666.jpg"
      }
    ]
  }
  +sortBy: "default"
  +sortDirection: "ASC"
  +url: "/demos/dynamic-gallery/budapest_gallery"
}
usa Gallery
Gallery {#928
  +type: "NOVEMBER_GALLERY"
  +folder: null
  +dbg: null
  +name: "U.S.A."
  +slug: "usa"
  +description: "Photos from the land of the free"
  +keywords: "city"
  +publishedAt: Argon {#1106
    +"date": "2019-08-22 00:00:00.000000"
    +"timezone_type": 3
    +"timezone": "UTC"
  }
  +createdAt: Argon {#1238
    +"date": "2019-08-21 18:31:15.000000"
    +"timezone_type": 3
    +"timezone": "UTC"
  }
  +updatedAt: Argon {#1237
    +"date": "2020-07-07 14:54:37.000000"
    +"timezone_type": 3
    +"timezone": "UTC"
  }
  +previewImage: GalleryItem {#1239
    -component: GalleryHub {#909
      +dbg: null
      +galleries: Collection {#1242
        #items: array:2 [
          "budapest_gallery" => Gallery {#1005
            +type: "NOVEMBER_GALLERY"
            +folder: null
            +dbg: null
            +name: "Budapest Is Beautiful"
            +slug: "budapest_gallery"
            +description: "Europe's most beautiful capital!"
            +keywords: "city, landscape, water"
            +publishedAt: null
            +createdAt: Argon {#1025
              +"date": "2019-08-22 11:26:48.000000"
              +"timezone_type": 3
              +"timezone": "UTC"
            }
            +updatedAt: Argon {#1105
              +"date": "2020-07-08 11:22:50.000000"
              +"timezone_type": 3
              +"timezone": "UTC"
            }
            +previewImage: GalleryItem {#1104
              -component: GalleryHub {#909}
              +title: "Erzsébet bridge"
              +description: "A view of Erzsébet bridge around dusk from Belgrád rakpart"
              +sortOrder: 80
              +file: null
              +octoberImageFile: File {#1166
                #table: "system_files"
                +morphTo: array:1 [ …1]
                #guarded: array:1 [ …1]
                #hidden: array:3 [ …3]
                #appends: array:2 [ …2]
                +data: null
                #autoMimeTypes: array:9 [ …9]
                +implement: null
                +attributes: array:14 [ …14]
                #jsonable: []
                #dates: []
                +duplicateCache: true
                #connection: "mysql"
                #primaryKey: "id"
                #keyType: "int"
                +incrementing: true
                #with: []
                #withCount: []
                #perPage: 15
                +exists: true
                +wasRecentlyCreated: false
                #original: array:14 [ …14]
                #changes: []
                #casts: []
                #dateFormat: null
                #dispatchesEvents: []
                #observables: []
                #relations: []
                #touches: []
                +timestamps: true
                #visible: []
                #fillable: []
                +hasMany: []
                +hasOne: []
                +belongsTo: []
                +belongsToMany: []
                +morphOne: []
                +morphMany: []
                +morphToMany: []
                +morphedByMany: []
                +attachOne: []
                +attachMany: []
                +hasManyThrough: []
                #emitterSingleEventCollection: []
                #emitterEventCollection: []
                #emitterEventSorted: []
                #extensionData: array:4 [ …4]
                +sessionKey: null
              }
              +width: 900
              +height: 562
              +type: 2
              +orientation: "horizontal"
              +fileNameWithoutExtension: "5d5e7bebab0b6453042679"
              +fileExtension: "jpg"
              +fileName: "5d5e7bebab0b6453042679.jpg"
              +filePath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/eba"
              +fileRealPath: "/var/www/novembergallery.zenware.hu/public_html/storage/app/uploads/public/5d5/e7b/eba/5d5e7bebab0b6453042679.jpg"
              +fileSize: 173238
              +relativeFilePath: "/storage/app/uploads/public/5d5/e7b/eba/5d5e7bebab0b6453042679.jpg"
              +uploaded: DateTime {#1026
                +"date": "2019-08-22 11:26:35.000000"
                +"timezone_type": 3
                +"timezone": "UTC"
              }
              +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/eba/5d5e7bebab0b6453042679.jpg"
            }
            +published: 1
            +items: Collection {#954
              #items: array:7 [
                0 => GalleryItem {#1023 …19}
                1 => GalleryItem {#1031 …19}
                2 => GalleryItem {#1086 …19}
                3 => GalleryItem {#1097 …19}
                4 => GalleryItem {#1099 …19}
                5 => GalleryItem {#1101 …19}
                6 => GalleryItem {#1103 …19}
              ]
            }
            +sortBy: "default"
            +sortDirection: "ASC"
            +url: "/demos/dynamic-gallery/budapest_gallery"
          }
          "usa" => Gallery {#928}
        ]
      }
      +dirs: null
      +hubType: "CITY"
      +keyword: "CITY"
      +sortBy: "name"
      +sortDir: "ASC"
      +maxItems: 100
      +linkUrl: "/demos/dynamic-gallery/%slug%"
      +openInNewTab: true
      +visualization: "title"
      +visualizationTemplate: ""
      +id: "galleryHub6146b7dc8484e"
      +alias: "galleryHub"
      +name: "galleryHub"
      +isHidden: false
      +pluginIcon: null
      +componentCssClass: null
      +inspectorEnabled: true
      #dirName: "/zenware/novembergallery/components/galleryhub"
      #controller: Controller {#448
        #theme: Theme {#449
          #dirName: "demo"
          #configCache: null
        }
        #router: Router {#521
          #theme: Theme {#449}
          #url: "demo/gallery-hub"
          #parameters: []
          #urlMap: array:18 [
            0 => array:2 [
              "file" => "cookbook/overriding-partials.htm"
              "pattern" => "/cookbook/overriding-partials"
            ]
            1 => array:2 [
              "file" => "cookbook/blog-page.htm"
              "pattern" => "/blog/:slug"
            ]
            2 => array:2 [
              "file" => "cookbook/swiper-any-device.htm"
              "pattern" => "/cookbook/swiper-for-any-device"
            ]
            3 => array:2 [
              "file" => "error.htm"
              "pattern" => "/error"
            ]
            4 => array:2 [
              "file" => "plugins.htm"
              "pattern" => "/demo/plugins"
            ]
            5 => array:2 [
              "file" => "home.htm"
              "pattern" => "/"
            ]
            6 => array:2 [
              "file" => "demos/embedded-gallery-combined.htm"
              "pattern" => "/demo/embedded-gallery-combined"
            ]
            7 => array:2 [
              "file" => "demos/swiper.htm"
              "pattern" => "/demo/swiper"
            ]
            8 => array:2 [
              "file" => "demos/popup-lightbox.htm"
              "pattern" => "/demo/popup-lightbox"
            ]
            9 => array:2 [
              "file" => "demos/dynamic-gallery.htm"
              "pattern" => "/demos/dynamic-gallery/:gallery_code|^budapest|plants-and-flowers|travels-and-landscapes|cute-cat-pix|mountains|patterns-nature|philippines|usa|waters|weddings$"
            ]
            10 => array:2 [
              "file" => "demos/image-list-only.htm"
              "pattern" => "/demo/image-list-only"
            ]
            11 => array:2 [
              "file" => "demos/customization.htm"
              "pattern" => "/demo/customization"
            ]
            12 => array:2 [
              "file" => "demos/embedded-gallery-slider.htm"
              "pattern" => "/demo/embedded-gallery-slider"
            ]
            13 => array:2 [
              "file" => "demos/gallery-hub.htm"
              "pattern" => "/demo/gallery-hub"
            ]
            14 => array:2 [
              "file" => "demos/video-gallery.htm"
              "pattern" => "/demo/video-gallery"
            ]
            15 => array:2 [
              "file" => "demos/embedded-gallery-carousel.htm"
              "pattern" => "/demo/embedded-gallery-carousel"
            ]
            16 => array:2 [
              "file" => "demos/embedded-gallery-tiles.htm"
              "pattern" => "/demo/embedded-gallery-tiles"
            ]
            17 => array:2 [
              "file" => "404.htm"
              "pattern" => "/404"
            ]
          ]
          #routerObj: Router {#445
            #routeMap: array:18 [
              "cookbook/overriding-partials.htm" => Rule {#815
                #ruleName: "cookbook/overriding-partials.htm"
                #rulePattern: "/cookbook/overriding-partials"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/cookbook/overriding-partials"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/gallery-hub.htm" => Rule {#836
                #ruleName: "demos/gallery-hub.htm"
                #rulePattern: "/demo/gallery-hub"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/gallery-hub"
                +segments: array:2 [
                  0 => "demo"
                  1 => "gallery-hub"
                ]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "cookbook/swiper-any-device.htm" => Rule {#821
                #ruleName: "cookbook/swiper-any-device.htm"
                #rulePattern: "/cookbook/swiper-for-any-device"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/cookbook/swiper-for-any-device"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/embedded-gallery-tiles.htm" => Rule {#839
                #ruleName: "demos/embedded-gallery-tiles.htm"
                #rulePattern: "/demo/embedded-gallery-tiles"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/embedded-gallery-tiles"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "plugins.htm" => Rule {#827
                #ruleName: "plugins.htm"
                #rulePattern: "/demo/plugins"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/plugins"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/embedded-gallery-carousel.htm" => Rule {#838
                #ruleName: "demos/embedded-gallery-carousel.htm"
                #rulePattern: "/demo/embedded-gallery-carousel"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/embedded-gallery-carousel"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/embedded-gallery-combined.htm" => Rule {#829
                #ruleName: "demos/embedded-gallery-combined.htm"
                #rulePattern: "/demo/embedded-gallery-combined"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/embedded-gallery-combined"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/swiper.htm" => Rule {#830
                #ruleName: "demos/swiper.htm"
                #rulePattern: "/demo/swiper"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/swiper"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/popup-lightbox.htm" => Rule {#831
                #ruleName: "demos/popup-lightbox.htm"
                #rulePattern: "/demo/popup-lightbox"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/popup-lightbox"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/video-gallery.htm" => Rule {#837
                #ruleName: "demos/video-gallery.htm"
                #rulePattern: "/demo/video-gallery"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/video-gallery"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/image-list-only.htm" => Rule {#833
                #ruleName: "demos/image-list-only.htm"
                #rulePattern: "/demo/image-list-only"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/image-list-only"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/customization.htm" => Rule {#834
                #ruleName: "demos/customization.htm"
                #rulePattern: "/demo/customization"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/customization"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/embedded-gallery-slider.htm" => Rule {#835
                #ruleName: "demos/embedded-gallery-slider.htm"
                #rulePattern: "/demo/embedded-gallery-slider"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/embedded-gallery-slider"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/dynamic-gallery.htm" => Rule {#832
                #ruleName: "demos/dynamic-gallery.htm"
                #rulePattern: "/demos/dynamic-gallery/:gallery_code|^budapest|plants-and-flowers|travels-and-landscapes|cute-cat-pix|mountains|patterns-nature|philippines|usa|waters|weddings$"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demos/dynamic-gallery"
                +segments: array:3 [ …3]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 1
                +wildSegmentCount: 0
              }
              "error.htm" => Rule {#824
                #ruleName: "error.htm"
                #rulePattern: "/error"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/error"
                +segments: array:1 [ …1]
                +staticSegmentCount: 1
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "404.htm" => Rule {#840
                #ruleName: "404.htm"
                #rulePattern: "/404"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/404"
                +segments: array:1 [ …1]
                +staticSegmentCount: 1
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "cookbook/blog-page.htm" => Rule {#825
                #ruleName: "cookbook/blog-page.htm"
                #rulePattern: "/blog/:slug"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/blog"
                +segments: array:2 [ …2]
                +staticSegmentCount: 1
                +dynamicSegmentCount: 1
                +wildSegmentCount: 0
              }
              "home.htm" => Rule {#828
                #ruleName: "home.htm"
                #rulePattern: "/"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/"
                +segments: []
                +staticSegmentCount: 0
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
            ]
            #matchedRouteRule: Rule {#836}
            #parameters: []
          }
        }
        #loader: Loader {#464
          #obj: ComponentPartial {#2849
            #component: GalleryHub {#912
              +dbg: "/var/www/novembergallery.zenware.hu/public_html/storage/app/media/galleries"
              +galleries: Collection {#2563
                #items: array:11 [
                  "travels-and-landscapes" => Gallery {#1850 …16}
                  "plants-and-flowers" => Gallery {#1704 …16}
                  "budapest" => Gallery {#1849 …16}
                  "budapest_gallery" => Gallery {#1842 …16}
                  "cute-cat-pix" => Gallery {#1845 …16}
                  "mountains" => Gallery {#1947 …16}
                  "patterns-nature" => Gallery {#1953 …16}
                  "philippines" => Gallery {#2150 …16}
                  "usa" => Gallery {#2327 …16}
                  "waters" => Gallery {#2416 …16}
                  "weddings" => Gallery {#2443 …16}
                ]
              }
              +dirs: array:3 [
                0 => "/var/www/novembergallery.zenware.hu/public_html/storage/app/media/galleries/travels-and-landscapes"
                1 => "/var/www/novembergallery.zenware.hu/public_html/storage/app/media/galleries/plants-and-flowers"
                2 => "/var/www/novembergallery.zenware.hu/public_html/storage/app/media/galleries/budapest"
              ]
              +hubType: "[ALL]"
              +keyword: false
              +sortBy: "name"
              +sortDir: "ASC"
              +maxItems: 100
              +linkUrl: "/demos/dynamic-gallery/%slug%"
              +openInNewTab: true
              +visualization: "custom"
              +visualizationTemplate: ""
              +id: "galleryHub46146b7dc910a8"
              +alias: "galleryHub4"
              +name: "galleryHub"
              +isHidden: false
              +pluginIcon: null
              +componentCssClass: null
              +inspectorEnabled: true
              #dirName: "/zenware/novembergallery/components/galleryhub"
              #controller: Controller {#448}
              #page: Cms60fc337298a8a939074938_ca15071c65bc5d0bd90bcde9c887b3a8Class {#896
                +page: Page {#851
                  #dirName: "pages"
                  #fillable: array:10 [
                    0 => "url"
                    1 => "layout"
                    2 => "title"
                    3 => "description"
                    4 => "is_hidden"
                    5 => "meta_title"
                    6 => "meta_description"
                    7 => "markup"
                    8 => "settings"
                    9 => "code"
                  ]
                  +apiBag: []
                  +rules: array:2 [
                    "title" => "required"
                    "url" => array:2 [
                      0 => "required"
                      1 => "regex:/^\/[a-z0-9\/\:_\-\*\[\]\+\?\|\.\^\\$]*$/i"
                    ]
                  ]
                  +components: array:4 [
                    "galleryHub" => GalleryHub {#909}
                    "galleryHub2" => GalleryHub {#910
                      +dbg: null
                      +galleries: Collection {#1650
                        #items: array:3 [
                          "budapest_gallery" => Gallery {#1353 …16}
                          "philippines" => Gallery {#952 …16}
                          "waters" => Gallery {#1387 …16}
                        ]
                      }
                      +dirs: null
                      +hubType: "WATER"
                      +keyword: "WATER"
                      +sortBy: "name"
                      +sortDir: "ASC"
                      +maxItems: 100
                      +linkUrl: "/demos/dynamic-gallery/%slug%"
                      +openInNewTab: true
                      +visualization: "titleOnly"
                      +visualizationTemplate: ""
                      +id: "galleryHub26146b7dc8f672"
                      +alias: "galleryHub2"
                      +name: "galleryHub"
                      +isHidden: false
                      +pluginIcon: null
                      +componentCssClass: null
                      +inspectorEnabled: true
                      #dirName: "/zenware/novembergallery/components/galleryhub"
                      #controller: Controller {#448}
                      #page: Cms60fc337298a8a939074938_ca15071c65bc5d0bd90bcde9c887b3a8Class {#896}
                      #externalPropertyNames: []
                      +implement: null
                      #extensionData: array:4 [
                        "extensions" => []
                        "methods" => []
                        "dynamicMethods" => []
                        "dynamicProperties" => []
                      ]
                      #assets: array:3 [
                        "js" => array:1 [ …1]
                        "css" => array:1 [ …1]
                        "rss" => []
                      ]
                      +assetPath: "/plugins/zenware/novembergallery"
                      #emitterSingleEventCollection: []
                      #emitterEventCollection: []
                      #emitterEventSorted: []
                      #properties: array:6 [
                        "hubType" => "WATER"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "template" => ""
                        "visualization" => "titleOnly"
                      ]
                    }
                    "galleryHub3" => GalleryHub {#911
                      +dbg: null
                      +galleries: Collection {#1833
                        #items: array:3 [
                          "budapest_gallery" => Gallery {#1706 …16}
                          "philippines" => Gallery {#1296 …16}
                          "waters" => Gallery {#1745 …16}
                        ]
                      }
                      +dirs: null
                      +hubType: "WATER"
                      +keyword: "WATER"
                      +sortBy: "name"
                      +sortDir: "ASC"
                      +maxItems: 100
                      +linkUrl: "/demos/dynamic-gallery/%slug%"
                      +openInNewTab: true
                      +visualization: "template"
                      +visualizationTemplate: "<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; width: 100px;">%name%</a></div>"
                      +id: "galleryHub36146b7dc9032a"
                      +alias: "galleryHub3"
                      +name: "galleryHub"
                      +isHidden: false
                      +pluginIcon: null
                      +componentCssClass: null
                      +inspectorEnabled: true
                      #dirName: "/zenware/novembergallery/components/galleryhub"
                      #controller: Controller {#448}
                      #page: Cms60fc337298a8a939074938_ca15071c65bc5d0bd90bcde9c887b3a8Class {#896}
                      #externalPropertyNames: []
                      +implement: null
                      #extensionData: array:4 [
                        "extensions" => []
                        "methods" => []
                        "dynamicMethods" => []
                        "dynamicProperties" => []
                      ]
                      #assets: array:3 [
                        "js" => array:1 [ …1]
                        "css" => array:1 [ …1]
                        "rss" => []
                      ]
                      +assetPath: "/plugins/zenware/novembergallery"
                      #emitterSingleEventCollection: []
                      #emitterEventCollection: []
                      #emitterEventSorted: []
                      #properties: array:6 [
                        "hubType" => "WATER"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "template" => "<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; width: 100px;">%name%</a></div>"
                        "visualization" => "template"
                      ]
                    }
                    "galleryHub4" => GalleryHub {#912}
                  ]
                  +settings: array:5 [
                    "title" => "Gallery Hub"
                    "url" => "/demo/gallery-hub"
                    "layout" => "default"
                    "is_hidden" => "0"
                    "components" => array:4 [
                      "galleryHub" => array:5 [
                        "hubType" => "CITY"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "visualization" => "default"
                      ]
                      "galleryHub galleryHub2" => array:5 [
                        "hubType" => "WATER"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "visualization" => "titleOnly"
                      ]
                      "galleryHub galleryHub3" => array:6 [
                        "hubType" => "WATER"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "visualization" => "template"
                        "template" => "<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; width: 100px;">%name%</a></div>"
                      ]
                      "galleryHub galleryHub4" => array:5 [
                        "hubType" => "[ALL]"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "visualization" => "custom"
                      ]
                    ]
                  ]
                  +viewBag: []
                  #passthru: array:5 [
                    0 => "lists"
                    1 => "where"
                    2 => "sortBy"
                    3 => "whereComponent"
                    4 => "withComponent"
                  ]
                  #isCompoundObject: true
                  #viewBagCache: ViewBag {#857
                    +isHidden: true
                    +id: null
                    +alias: null
                    +name: "viewBag"
                    +pluginIcon: null
                    +componentCssClass: null
                    +inspectorEnabled: true
                    #dirName: "/cms/components/viewbag"
                    #controller: null
                    #page: null
                    #externalPropertyNames: []
                    +implement: null
                    #extensionData: array:4 [
                      "extensions" => []
                      "methods" => []
                      "dynamicMethods" => []
                      "dynamicProperties" => []
                    ]
                    #assets: array:3 [
                      "js" => []
                      "css" => []
                      "rss" => []
                    ]
                    +assetPath: "/plugins/cms"
                    #emitterSingleEventCollection: []
                    #emitterEventCollection: []
                    #emitterEventSorted: []
                    #properties: []
                  }
                  +attributeNames: []
                  +customMessages: array:1 [
                    "url.regex" => "Invalid URL format. The URL should start with the forward slash symbol and can contain digits, Latin letters and the following symbols: ._-[]:?|/+*^$"
                  ]
                  #themeCache: Theme {#906
                    #dirName: "demo"
                    #configCache: null
                  }
                  #datasource: "demo"
                  +attributes: array:13 [
                    "fileName" => "demos/gallery-hub.htm"
                    "content" => """
                      title = "Gallery Hub"\n
                      url = "/demo/gallery-hub"\n
                      layout = "default"\n
                      is_hidden = 0\n
                      \n
                      [galleryHub]\n
                      hubType = "CITY"\n
                      maxItems = 100\n
                      linkUrl = "/demos/dynamic-gallery/%slug%"\n
                      openInNewTab = 1\n
                      visualization = "default"\n
                      \n
                      [galleryHub galleryHub2]\n
                      hubType = "WATER"\n
                      maxItems = 100\n
                      linkUrl = "/demos/dynamic-gallery/%slug%"\n
                      openInNewTab = 1\n
                      visualization = "titleOnly"\n
                      \n
                      [galleryHub galleryHub3]\n
                      hubType = "WATER"\n
                      maxItems = 100\n
                      linkUrl = "/demos/dynamic-gallery/%slug%"\n
                      openInNewTab = 1\n
                      visualization = "template"\n
                      template = "<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; width: 100px;\">%name%</a></div>"\n
                      \n
                      [galleryHub galleryHub4]\n
                      hubType = "[ALL]"\n
                      maxItems = 100\n
                      linkUrl = "/demos/dynamic-gallery/%slug%"\n
                      openInNewTab = 1\n
                      visualization = "custom"\n
                      ==\n
                      <?php\n
                      function onTest()\n
                      {\n
                      }\n
                      ?>\n
                      ==\n
                      <div class="jumbotron title-js">\n
                          <div class="container">\n
                              <div class="row">\n
                                  <div class="col-8">\n
                                      <h1>Gallery Hub</h1>\n
                                      <p>This component loads a list of galleries without actually rendering any galleries. Use this if you wish to show a "hub" page with a link to all of your galleries.</p>\n
                                  </div>\n
                              </div>\n
                          </div>\n
                      </div>\n
                      \n
                      <div class="container">\n
                      \n
                      \t<!-- Intro -->\n
                      \t<p>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.</p>\n
                      \t<ol>\n
                      \t\t<li>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.<br><br>\n
                      \t\tFor example, let's say you've created a gallery of "ants" and a gallery of "ladybugs" using the back-end <i>Galleries</i> 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: <i>/galleries/%slug%</i><br><br></li>\n
                      \t\t<li>Another option is to create a "dynamic" gallery page where the actual gallery to be shown is passed in as a URL parameter.<br><br>You will have to create a dedicated gallery page and set the "URL" to something like: <i>/gallery/:gallery_code?|^[a-z0-9\-\_]+$</i><br><br>...additionally, you will have to set the "Media Folder or Gallery" in your component inspector to ":gallery_code"<br><br> This way the page will show whatever gallery is passed to it in the page URL. Please refer to the <a href="https://its.zensoft.hu/books/november-gallery-cookbook/page/dynamic-gallery-using-url-parameters" target="_blank">Novemeber Gallery Cookbook</a> 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 <i>/gallery/%slug%</i>.\n
                      \t</ol>\n
                      \n
                      \t\t\n
                          \n
                          <!-- Demo #1 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "CITY" Galleries</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub' %}\n
                      \n
                                  {{ debug(galleryHub.galleries) }}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: city</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Links with Preview Image</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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 <i>Page HTML</i> box above.<br>\n
                          <br>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.</p>\n
                          <br>\n
                      \n
                      \t\t\n
                          \n
                          <!-- Demo #2 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "WATER" Galleries, Title Only</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub2' %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>List of Links with Title Only</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub2' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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."</p>\n
                          <br>\n
                      \t\n
                      \t\t\n
                          \n
                          <!-- Demo #3 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "WATER" Galleries with a Custom Template</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub3' %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Set the Template Below</td></tr>\n
                                      <tr><td>Link Template</td><td>\n
                      \t\t\t\t\t<pre><code>{% filter escape %}{% verbatim %}<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>{% endverbatim %}{% endfilter %}</code></pre>\t\n
                      \t\t\t\t</td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub3' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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:\n
                      \t</p>\n
                      \t<table>\n
                      \t\t<tr><td>%type%                        </td><td>Gallery type, can be NOVEMBER_GALLERY, OCTOBER_MEDIA_MANAGER_FOLDER, or BLOG_POST</td></tr>\n
                      \t\t<tr><td>%url%                         </td><td>Gallery URL</td></tr>\n
                      \t\t<tr><td>%slug%                        </td><td>Gallery slug*</td></tr>\n
                      \t\t<tr><td>%folder%                      </td><td>Gallery description*</td></tr>\n
                      \t\t<tr><td>%name%                        </td><td>Gallery name (or the folder name in case of galleries uploaded using the OctoberCMS media manager</td></tr>\n
                      \t\t<tr><td>%description%                 </td><td>Gallery description*</td></tr>\n
                      \t\t<tr><td>%keywords%                    </td><td>Gallery keywords*</td></tr>\n
                      \t\t<tr><td>%created_at%                  </td><td>Gallery creation date*</td></tr>\n
                      \t\t<tr><td>%updated_at%                  </td><td>Gallery last update date*</td></tr>\n
                      \t\t<tr><td>%preview_image_url%           </td><td>Preview image URL (if set)*</td></tr>\n
                      \t\t<tr><td>%published%                   </td><td>Gallery is published or not*</td></tr>\n
                      \t\t<tr><td>%preview_image_title%         </td><td>Preview image title*</td></tr>\n
                      \t\t<tr><td>%preview_image_description%   </td><td>Preview image description*</td></tr>\n
                      \t\t<tr><td>%preview_image_width%         </td><td>Preview image width*</td></tr>\n
                      \t\t<tr><td>%preview_image_height%        </td><td>Preview image height*</td></tr>\n
                      \t\t<tr><td>%preview_image_filename%      </td><td>Preview image filename*</td></tr>\n
                      \t\t<tr><td>%preview_image_filesize%      </td><td>Preview image file size*</td></tr>\n
                      \t\t<tr><td>%items_count%                 </td><td>Count of images</td></tr>\n
                      \t</table>\n
                      * available for galleries created on the "Galleries" back-end page\n
                          <br>\n
                          <br>\n
                          \n
                      \t\t\n
                          \n
                          <!-- Demo #4 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all available Galleries, Custom Visualization with Twig Code</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body" style="overflow-x: scroll;">\n
                                  \n
                                  {% component 'galleryHub4' %}\n
                      \t\t\t\n
                      \t\t\t{{ debug(galleryHub4.galleries) }}\n
                      \n
                      \t\t\t{% set galleries = galleryHub4.galleries %}\n
                      \n
                      \t\t\t{% if galleries|length > 0 %}\n
                      \n
                      \t\t\t\t<div id="{{galleryHub4.id}}">\n
                      \t\t\t\t\t<table>\n
                      \t\t\t\t\t\t<tr>\n
                      \t\t\t\t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                      \t\t\t\t\t\t</tr>\n
                      \t\t\t\t\t{% for gallery in galleries %}\n
                      \t\t\t\t\t\t<tr>\n
                      \t\t\t\t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                      \t\t\t\t\t\t\t\tType: {{ gallery.type }}<br>\n
                      \t\t\t\t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                      \t\t\t\t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                      \t\t\t\t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                      \t\t\t\t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                      \t\t\t\t\t\t\t\t# of images: {{ gallery.items|length }}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t</tr>\n
                      \t\t\t\t\t{% endfor %}\n
                      \t\t\t\t\t</table>\n
                      \t\t\t\t</div>\n
                      \n
                      \t\t\t{% endif %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>All Galleries</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Write your own Twig Code</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div style="max-width: 100%;">\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre style="overflow-x: scroll;"><code style="display: block; white-space: pre;">{% filter escape %}{% verbatim %}{% component 'galleryHub4' %}\n
                      {{ debug(galleryHub4.galleries) }}\n
                      {% set galleries = galleryHub4.galleries %}\n
                      {% if galleries|length > 0 %}\n
                      \t<div id="{{galleryHub4.id}}">\n
                      \t\t<table>\n
                      \t\t\t<tr>\n
                      \t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                      \t\t\t</tr>\n
                      \t\t{% for gallery in galleries %}\n
                      \t\t\t<tr>\n
                      \t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                      \t\t\t\t\tType: {{ gallery.type }}<br>\n
                      \t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                      \t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                      \t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                      \t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                      \t\t\t\t\t# of images: {{ gallery.items|length }}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                      \t\t\t\t</td>\n
                      \t\t\t</tr>\n
                      \t\t{% endfor %}\n
                      \t\t</table>\n
                      \t</div>\n
                      {% endif %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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 <code>galleryHub.galleries</code>, 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.</p>\n
                      \t<p>\n
                      \tHint: To dig into the galleries (or any other) variable/collection, you have two options. You can simply add <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.galleries.toArray) }}{% endverbatim %}{% endfilter %}</code> 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:</p>\n
                      \t{{ dump(galleryHub.galleries.toArray) }}\n
                      \t<p>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: <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.toArray) }}{% endverbatim %}{% endfilter %}</code>. The result in this instance is:\n
                      \t</p>\n
                      \t{{ dump(galleryHub.toArray) }}\n
                      \t<p><a href="https://twig.symfony.com/doc/2.x/functions/dump.html" target="_blank">Learn more aboud <i>dump</i> in the official Twig docs</a>. 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 <a href="https://octobercms.com/docs/setup/configuration#debug-mode">in the OctoberCMS docs!</a></p>\n
                      \t<p>Alternatively, you can install the Debugbar plugin and then add <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries) }}{% endverbatim %}{% endfilter %}</code> to your page to show debug information in the Laravel debugbar. To see all public properties of a gallery, do: <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries.first.toArray) }}{% endverbatim %}{% endfilter %}</code>. Make sure to replace "galleryHub" with the alias of your component as set in the component options!</p>\n
                      \n
                          \n
                          \n
                          \n
                      \n
                      \t\n
                          <!-- Details -->    \n
                          <br>\n
                          <br>\n
                          <div class="text-center">\n
                      \t\t\t<p><a href="{{ 'demos/image-list-only'|page }}" class="btn btn-lg btn-default">Continue to Image List Only</a></p>\n
                          </div>\n
                      \n
                      </div>
                      """
                    "mtime" => 1594283451
                    "markup" => """
                      <div class="jumbotron title-js">\n
                          <div class="container">\n
                              <div class="row">\n
                                  <div class="col-8">\n
                                      <h1>Gallery Hub</h1>\n
                                      <p>This component loads a list of galleries without actually rendering any galleries. Use this if you wish to show a "hub" page with a link to all of your galleries.</p>\n
                                  </div>\n
                              </div>\n
                          </div>\n
                      </div>\n
                      \n
                      <div class="container">\n
                      \n
                      \t<!-- Intro -->\n
                      \t<p>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.</p>\n
                      \t<ol>\n
                      \t\t<li>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.<br><br>\n
                      \t\tFor example, let's say you've created a gallery of "ants" and a gallery of "ladybugs" using the back-end <i>Galleries</i> 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: <i>/galleries/%slug%</i><br><br></li>\n
                      \t\t<li>Another option is to create a "dynamic" gallery page where the actual gallery to be shown is passed in as a URL parameter.<br><br>You will have to create a dedicated gallery page and set the "URL" to something like: <i>/gallery/:gallery_code?|^[a-z0-9\-\_]+$</i><br><br>...additionally, you will have to set the "Media Folder or Gallery" in your component inspector to ":gallery_code"<br><br> This way the page will show whatever gallery is passed to it in the page URL. Please refer to the <a href="https://its.zensoft.hu/books/november-gallery-cookbook/page/dynamic-gallery-using-url-parameters" target="_blank">Novemeber Gallery Cookbook</a> 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 <i>/gallery/%slug%</i>.\n
                      \t</ol>\n
                      \n
                      \t\t\n
                          \n
                          <!-- Demo #1 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "CITY" Galleries</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub' %}\n
                      \n
                                  {{ debug(galleryHub.galleries) }}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: city</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Links with Preview Image</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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 <i>Page HTML</i> box above.<br>\n
                          <br>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.</p>\n
                          <br>\n
                      \n
                      \t\t\n
                          \n
                          <!-- Demo #2 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "WATER" Galleries, Title Only</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub2' %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>List of Links with Title Only</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub2' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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."</p>\n
                          <br>\n
                      \t\n
                      \t\t\n
                          \n
                          <!-- Demo #3 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all "WATER" Galleries with a Custom Template</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body">\n
                                  \n
                                  {% component 'galleryHub3' %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>Keyword: water</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Set the Template Below</td></tr>\n
                                      <tr><td>Link Template</td><td>\n
                      \t\t\t\t\t<pre><code>{% filter escape %}{% verbatim %}<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>{% endverbatim %}{% endfilter %}</code></pre>\t\n
                      \t\t\t\t</td></tr>\n
                                  </table>\n
                              </div>\n
                              <div>\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre><code>{% filter escape %}{% verbatim %}{% component 'galleryHub3' %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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:\n
                      \t</p>\n
                      \t<table>\n
                      \t\t<tr><td>%type%                        </td><td>Gallery type, can be NOVEMBER_GALLERY, OCTOBER_MEDIA_MANAGER_FOLDER, or BLOG_POST</td></tr>\n
                      \t\t<tr><td>%url%                         </td><td>Gallery URL</td></tr>\n
                      \t\t<tr><td>%slug%                        </td><td>Gallery slug*</td></tr>\n
                      \t\t<tr><td>%folder%                      </td><td>Gallery description*</td></tr>\n
                      \t\t<tr><td>%name%                        </td><td>Gallery name (or the folder name in case of galleries uploaded using the OctoberCMS media manager</td></tr>\n
                      \t\t<tr><td>%description%                 </td><td>Gallery description*</td></tr>\n
                      \t\t<tr><td>%keywords%                    </td><td>Gallery keywords*</td></tr>\n
                      \t\t<tr><td>%created_at%                  </td><td>Gallery creation date*</td></tr>\n
                      \t\t<tr><td>%updated_at%                  </td><td>Gallery last update date*</td></tr>\n
                      \t\t<tr><td>%preview_image_url%           </td><td>Preview image URL (if set)*</td></tr>\n
                      \t\t<tr><td>%published%                   </td><td>Gallery is published or not*</td></tr>\n
                      \t\t<tr><td>%preview_image_title%         </td><td>Preview image title*</td></tr>\n
                      \t\t<tr><td>%preview_image_description%   </td><td>Preview image description*</td></tr>\n
                      \t\t<tr><td>%preview_image_width%         </td><td>Preview image width*</td></tr>\n
                      \t\t<tr><td>%preview_image_height%        </td><td>Preview image height*</td></tr>\n
                      \t\t<tr><td>%preview_image_filename%      </td><td>Preview image filename*</td></tr>\n
                      \t\t<tr><td>%preview_image_filesize%      </td><td>Preview image file size*</td></tr>\n
                      \t\t<tr><td>%items_count%                 </td><td>Count of images</td></tr>\n
                      \t</table>\n
                      * available for galleries created on the "Galleries" back-end page\n
                          <br>\n
                          <br>\n
                          \n
                      \t\t\n
                          \n
                          <!-- Demo #4 -->\n
                          <div class="page-header">\n
                              <h2>Hub of all available Galleries, Custom Visualization with Twig Code</h2>\n
                          </div>\n
                          <div class="panel panel-default">\n
                              <div class="panel-heading">\n
                                  <h3 class="panel-title">Hub</h3>\n
                              </div>\n
                              <div class="panel-body" style="overflow-x: scroll;">\n
                                  \n
                                  {% component 'galleryHub4' %}\n
                      \t\t\t\n
                      \t\t\t{{ debug(galleryHub4.galleries) }}\n
                      \n
                      \t\t\t{% set galleries = galleryHub4.galleries %}\n
                      \n
                      \t\t\t{% if galleries|length > 0 %}\n
                      \n
                      \t\t\t\t<div id="{{galleryHub4.id}}">\n
                      \t\t\t\t\t<table>\n
                      \t\t\t\t\t\t<tr>\n
                      \t\t\t\t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                      \t\t\t\t\t\t</tr>\n
                      \t\t\t\t\t{% for gallery in galleries %}\n
                      \t\t\t\t\t\t<tr>\n
                      \t\t\t\t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                      \t\t\t\t\t\t\t\tType: {{ gallery.type }}<br>\n
                      \t\t\t\t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                      \t\t\t\t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                      \t\t\t\t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                      \t\t\t\t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                      \t\t\t\t\t\t\t\t# of images: {{ gallery.items|length }}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t\t<td>\n
                      \t\t\t\t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                      \t\t\t\t\t\t\t</td>\n
                      \t\t\t\t\t\t</tr>\n
                      \t\t\t\t\t{% endfor %}\n
                      \t\t\t\t\t</table>\n
                      \t\t\t\t</div>\n
                      \n
                      \t\t\t{% endif %}\n
                      \n
                              </div>\n
                          </div>\n
                          <p class="lead">\n
                              <i class="icon-code"></i> &nbsp; Settings used for this example:\n
                          </p>    \n
                           <div class="flex-horizontal">\n
                              <div>\n
                                  <p><strong>Component Inspector</strong></p>\n
                                  <table>\n
                                      <tr><td>Hub Type</td><td>All Galleries</td></tr>\n
                                      <tr><td>Order by</td><td>Default</td></tr>\n
                                      <tr><td>Max Galleries</td><td>100</td></tr>\n
                                      <tr><td>Link URL</td><td>/demos/dynamic-gallery/%slug%</td></tr>\n
                                      <tr><td>Open in new tab?</td><td>Checked</td></tr>\n
                                      <tr><td>Display as</td><td>Write your own Twig Code</td></tr>\n
                                      <tr><td>Link Template</td><td></td></tr>\n
                                  </table>\n
                              </div>\n
                              <div style="max-width: 100%;">\n
                                  <p><strong>Page HTML</strong></p>\n
                                  <pre style="overflow-x: scroll;"><code style="display: block; white-space: pre;">{% filter escape %}{% verbatim %}{% component 'galleryHub4' %}\n
                      {{ debug(galleryHub4.galleries) }}\n
                      {% set galleries = galleryHub4.galleries %}\n
                      {% if galleries|length > 0 %}\n
                      \t<div id="{{galleryHub4.id}}">\n
                      \t\t<table>\n
                      \t\t\t<tr>\n
                      \t\t\t\t<th>Gallery Details</th><th>Preview Image</th><th>First Image</th><th>2nd Image</th><th>3rd Image</th><th></th>\n
                      \t\t\t</tr>\n
                      \t\t{% for gallery in galleries %}\n
                      \t\t\t<tr>\n
                      \t\t\t\t<td>Name: {{ gallery.name }}<br>\n
                      \t\t\t\t\tType: {{ gallery.type }}<br>\n
                      \t\t\t\t\tSlug: {{ gallery.slug }}<br>\n
                      \t\t\t\t\tDescription: {{ gallery.description }}<br>\n
                      \t\t\t\t\tKeywords: {{ gallery.keywords }}<br>\n
                      \t\t\t\t\tUpdated: {{ gallery.updatedAt|date('Y-m-d') }}<br>\n
                      \t\t\t\t\t# of images: {{ gallery.items|length }}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.previewImage %}<img src="{{ gallery.previewImage.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}No preview image set!{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 0 %}<img src="{{ gallery.items.first.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 1 %}<img src="{{ gallery.items.1.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t{% if gallery.items|length > 2 %}<img src="{{ gallery.items.2.url | resize(80, 80,  { mode: 'portrait', quality: '90', extension: 'png' }) }}"></img>\n
                      \t\t\t\t\t{% else %}Unavailable{% endif %}\n
                      \t\t\t\t</td>\n
                      \t\t\t\t<td>\n
                      \t\t\t\t\t<a href="{{ gallery.url }}" target="_blank" class="btn btn-primary btn-sm" role="button">→ Open</a>\n
                      \t\t\t\t</td>\n
                      \t\t\t</tr>\n
                      \t\t{% endfor %}\n
                      \t\t</table>\n
                      \t</div>\n
                      {% endif %}{% endverbatim %}{% endfilter %}</code></pre>\n
                              </div>\n
                          </div>\n
                          <p>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 <code>galleryHub.galleries</code>, 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.</p>\n
                      \t<p>\n
                      \tHint: To dig into the galleries (or any other) variable/collection, you have two options. You can simply add <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.galleries.toArray) }}{% endverbatim %}{% endfilter %}</code> 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:</p>\n
                      \t{{ dump(galleryHub.galleries.toArray) }}\n
                      \t<p>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: <code>{% filter escape %}{% verbatim %}{{ dump(galleryHub.toArray) }}{% endverbatim %}{% endfilter %}</code>. The result in this instance is:\n
                      \t</p>\n
                      \t{{ dump(galleryHub.toArray) }}\n
                      \t<p><a href="https://twig.symfony.com/doc/2.x/functions/dump.html" target="_blank">Learn more aboud <i>dump</i> in the official Twig docs</a>. 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 <a href="https://octobercms.com/docs/setup/configuration#debug-mode">in the OctoberCMS docs!</a></p>\n
                      \t<p>Alternatively, you can install the Debugbar plugin and then add <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries) }}{% endverbatim %}{% endfilter %}</code> to your page to show debug information in the Laravel debugbar. To see all public properties of a gallery, do: <code>{% filter escape %}{% verbatim %}{{ debug(galleryHub.galleries.first.toArray) }}{% endverbatim %}{% endfilter %}</code>. Make sure to replace "galleryHub" with the alias of your component as set in the component options!</p>\n
                      \n
                          \n
                          \n
                          \n
                      \n
                      \t\n
                          <!-- Details -->    \n
                          <br>\n
                          <br>\n
                          <div class="text-center">\n
                      \t\t\t<p><a href="{{ 'demos/image-list-only'|page }}" class="btn btn-lg btn-default">Continue to Image List Only</a></p>\n
                          </div>\n
                      \n
                      </div>
                      """
                    "code" => """
                      function onTest()\n
                      {\n
                      }
                      """
                    "title" => "Gallery Hub"
                    "url" => "/demo/gallery-hub"
                    "layout" => "default"
                    "is_hidden" => "0"
                    "galleryHub" => array:5 [
                      "hubType" => "CITY"
                      "maxItems" => "100"
                      "linkUrl" => "/demos/dynamic-gallery/%slug%"
                      "openInNewTab" => "1"
                      "visualization" => "default"
                    ]
                    "galleryHub galleryHub2" => array:5 [
                      "hubType" => "WATER"
                      "maxItems" => "100"
                      "linkUrl" => "/demos/dynamic-gallery/%slug%"
                      "openInNewTab" => "1"
                      "visualization" => "titleOnly"
                    ]
                    "galleryHub galleryHub3" => array:6 [
                      "hubType" => "WATER"
                      "maxItems" => "100"
                      "linkUrl" => "/demos/dynamic-gallery/%slug%"
                      "openInNewTab" => "1"
                      "visualization" => "template"
                      "template" => "<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; width: 100px;">%name%</a></div>"
                    ]
                    "galleryHub galleryHub4" => array:5 [
                      "hubType" => "[ALL]"
                      "maxItems" => "100"
                      "linkUrl" => "/demos/dynamic-gallery/%slug%"
                      "openInNewTab" => "1"
                      "visualization" => "custom"
                    ]
                  ]
                  #original: array:13 [
                    "fileName" => "demos/gallery-hub.htm"
                    "content" => """
                      title = "Gallery Hub"\n
                      url = "/demo/gallery-hub"\n
                      layout = "default"\n
                      is_hidden = 0\n
                      \n
                      [galleryHub]\n
                      hubTyp