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.

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%
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 Type	Keyword: city
Order by	Default
Max Galleries	100
Link URL	/demos/dynamic-gallery/%slug%
Open in new tab?	Checked
Display as	Links 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.

Hub

Settings used for this example:

Component Inspector

Hub Type	Keyword: water
Order by	Default
Max Galleries	100
Link URL	/demos/dynamic-gallery/%slug%
Open in new tab?	Checked
Display as	List 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."

Hub

Budapest Is Beautiful

Philippines

Waters

Settings used for this example:

Component Inspector

Hub Type	Keyword: water
Order by	Default
Max Galleries	100
Link URL	/demos/dynamic-gallery/%slug%
Open in new tab?	Checked
Display as	Set 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 Details	Preview Image	First Image	2nd Image	3rd Image
Name: budapest Type: OCTOBER_MEDIA_MANAGER_FOLDER Slug: Description: Keywords: Updated: 2023-06-05 # of images: 0	No preview image set!	Unavailable	Unavailable	Unavailable	→ Open
Name: plants-and-flowers Type: OCTOBER_MEDIA_MANAGER_FOLDER Slug: Description: Keywords: Updated: 2023-06-05 # of images: 0	No preview image set!	Unavailable	Unavailable	Unavailable	→ Open
Name: travels-and-landscapes Type: OCTOBER_MEDIA_MANAGER_FOLDER Slug: Description: Keywords: Updated: 2023-06-05 # 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: 2022-08-02 # of images: 7					→ Open
Name: Cute Cat Pix Type: NOVEMBER_GALLERY Slug: cute-cat-pix Description: cats, feline, felis catus, macska, cica, gata, gato, katze, kot Keywords: Updated: 2019-08-22 # of images: 1	No preview image set!		Unavailable	Unavailable	→ Open
Name: Mountains Type: NOVEMBER_GALLERY Slug: mountains Description: mountain, Appalachian, Alps, Armenia, Ararat Keywords: landscape Updated: 2020-07-07 # of images: 9					→ Open
Name: Patterns in Nature Type: NOVEMBER_GALLERY Slug: patterns-nature Description: patterns, nature, desktop, wallpaper, high resolution, field Keywords: Updated: 2022-08-01 # of images: 18					→ Open
Name: Philippines Type: NOVEMBER_GALLERY Slug: philippines Description: Keywords: water Updated: 2020-07-08 # of images: 10					→ Open
Name: U.S.A. Type: NOVEMBER_GALLERY Slug: usa Description: Photos from the land of the free Keywords: city Updated: 2020-07-07 # of images: 6					→ Open
Name: Waters Type: NOVEMBER_GALLERY Slug: waters Description: lakes, oceans, rivers, stream, ponds Keywords: water, landscape Updated: 2020-07-07 # of images: 14					→ Open
Name: Weddings Type: NOVEMBER_GALLERY Slug: weddings Description: Keywords: Updated: 2019-11-02 # of images: 4	No preview image set!				→ Open

Settings used for this example:

Component Inspector

Hub Type	All Galleries
Order by	Default
Max Galleries	100
Link URL	/demos/dynamic-gallery/%slug%
Open in new tab?	Checked
Display as	Write 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



ZenWare\NovemberGallery\Classes\Gallery {#1639
  +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: October\Rain\Argon\Argon @1659452898 {#1697
    #endOfTime: false
    #startOfTime: false
    #constructedObjectId: "000000002f0ef135000000007fb8c25a"
    #localMonthsOverflow: null
    #localYearsOverflow: null
    #localStrictModeEnabled: null
    #localHumanDiffOptions: null
    #localToStringFormat: null
    #localSerializer: null
    #localMacros: null
    #localGenericMacros: null
    #localFormatFunction: null
    #localTranslator: null
    #dumpProperties: array:3 [
      0 => "date"
      1 => "timezone_type"
      2 => "timezone"
    ]
    #dumpLocale: null
    #dumpDateProperties: null
    date: 2022-08-02 15:08:18.0 e (+00:00)
  }
  +createdAt: October\Rain\Argon\Argon @1566473208 {#1774
    #endOfTime: false
    #startOfTime: false
    #constructedObjectId: "000000002f0ef17a000000007fb8c25a"
    #localMonthsOverflow: null
    #localYearsOverflow: null
    #localStrictModeEnabled: null
    #localHumanDiffOptions: null
    #localToStringFormat: null
    #localSerializer: null
    #localMacros: null
    #localGenericMacros: null
    #localFormatFunction: null
    #localTranslator: null
    #dumpProperties: array:3 [
      0 => "date"
      1 => "timezone_type"
      2 => "timezone"
    ]
    #dumpLocale: null
    #dumpDateProperties: null
    date: 2019-08-22 11:26:48.0 e (+00:00)
  }
  +updatedAt: October\Rain\Argon\Argon @1659452900 {#1773
    #endOfTime: false
    #startOfTime: false
    #constructedObjectId: "000000002f0ef179000000007fb8c25a"
    #localMonthsOverflow: null
    #localYearsOverflow: null
    #localStrictModeEnabled: null
    #localHumanDiffOptions: null
    #localToStringFormat: null
    #localSerializer: null
    #localMacros: null
    #localGenericMacros: null
    #localFormatFunction: null
    #localTranslator: null
    #dumpProperties: array:3 [
      0 => "date"
      1 => "timezone_type"
      2 => "timezone"
    ]
    #dumpLocale: null
    #dumpDateProperties: null
    date: 2022-08-02 15:08:20.0 e (+00:00)
  }
  +previewImage: ZenWare\NovemberGallery\Classes\GalleryItem {#1781
    -component: ZenWare\NovemberGallery\Components\GalleryHub {#1574
      +dbg: null
      +galleries: October\Rain\Support\Collection {#1891
        #items: array:2 [
          "budapest_gallery" => ZenWare\NovemberGallery\Classes\Gallery {#1639}
          "usa" => ZenWare\NovemberGallery\Classes\Gallery {#1601
            +type: "NOVEMBER_GALLERY"
            +folder: null
            +dbg: null
            +name: "U.S.A."
            +slug: "usa"
            +description: "Photos from the land of the free"
            +keywords: "city"
            +publishedAt: October\Rain\Argon\Argon @1566432000 {#1798
              #endOfTime: false
              #startOfTime: false
              #constructedObjectId: "000000002f0ef092000000007fb8c25a"
              #localMonthsOverflow: null
              #localYearsOverflow: null
              #localStrictModeEnabled: null
              #localHumanDiffOptions: null
              #localToStringFormat: null
              #localSerializer: null
              #localMacros: null
              #localGenericMacros: null
              #localFormatFunction: null
              #localTranslator: null
              #dumpProperties: array:3 [
                0 => "date"
                1 => "timezone_type"
                2 => "timezone"
              ]
              #dumpLocale: null
              #dumpDateProperties: null
              date: 2019-08-22 00:00:00.0 e (+00:00)
            }
            +createdAt: October\Rain\Argon\Argon @1566412275 {#1881
              #endOfTime: false
              #startOfTime: false
              #constructedObjectId: "000000002f0ef0cd000000007fb8c25a"
              #localMonthsOverflow: null
              #localYearsOverflow: null
              #localStrictModeEnabled: null
              #localHumanDiffOptions: null
              #localToStringFormat: null
              #localSerializer: null
              #localMacros: null
              #localGenericMacros: null
              #localFormatFunction: null
              #localTranslator: null
              #dumpProperties: array:3 [
                0 => "date"
                1 => "timezone_type"
                2 => "timezone"
              ]
              #dumpLocale: null
              #dumpDateProperties: null
              date: 2019-08-21 18:31:15.0 e (+00:00)
            }
            +updatedAt: October\Rain\Argon\Argon @1594133677 {#1795
              #endOfTime: false
              #startOfTime: false
              #constructedObjectId: "000000002f0ef097000000007fb8c25a"
              #localMonthsOverflow: null
              #localYearsOverflow: null
              #localStrictModeEnabled: null
              #localHumanDiffOptions: null
              #localToStringFormat: null
              #localSerializer: null
              #localMacros: null
              #localGenericMacros: null
              #localFormatFunction: null
              #localTranslator: null
              #dumpProperties: array:3 [
                0 => "date"
                1 => "timezone_type"
                2 => "timezone"
              ]
              #dumpLocale: null
              #dumpDateProperties: null
              date: 2020-07-07 14:54:37.0 e (+00:00)
            }
            +previewImage: ZenWare\NovemberGallery\Classes\GalleryItem {#1888
              -component: ZenWare\NovemberGallery\Components\GalleryHub {#1574}
              +title: null
              +description: null
              +sortOrder: 32
              +file: null
              +octoberImageFile: RainLab\Translate\Models\MLFile {#1914
                +implement: array:1 [ …1]
                +translatable: array:2 [ …2]
                #table: "system_files"
                +morphTo: array:1 [ …1]
                #fillable: array:9 [ …9]
                #guarded: []
                #hidden: array:3 [ …3]
                #appends: array:2 [ …2]
                +data: null
                #autoMimeTypes: array:9 [ …9]
                +attributes: array:14 [ …14]
                #jsonable: []
                #dates: []
                +trimStrings: 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: []
                +hasMany: []
                +hasOne: []
                +belongsTo: []
                +belongsToMany: []
                +morphOne: []
                +morphMany: array:1 [ …1]
                +morphToMany: []
                +morphedByMany: []
                +attachOne: []
                +attachMany: []
                +hasManyThrough: []
                +hasOneThrough: []
                #emitterSingleEventCollection: []
                #emitterEventCollection: array:5 [ …5]
                 …3
              }
              +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"
              +relativePath: "/storage/app/uploads/public/5d5/e78/1c8/"
              +uploaded: DateTime @1566472220 {#1890 …1}
              +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e78/1c8/5d5e781c8a022349018179.jpg"
            }
            +published: 1
            +items: October\Rain\Support\Collection {#1785
              #items: array:6 [ …6]
            }
            +sortBy: "default"
            +sortDirection: "ASC"
            +url: "/demos/dynamic-gallery/usa"
          }
        ]
      }
      +dirs: null
      +hubType: "CITY"
      +keyword: "CITY"
      +sortBy: "publishedOn"
      +sortDirection: "DESC"
      +maxItems: 100
      +linkUrl: "/demos/dynamic-gallery/%slug%"
      +openInNewTab: true
      +visualization: "title"
      +visualizationTemplate: ""
      +id: "galleryHub647e05f1cf6ce"
      +alias: "galleryHub"
      +name: "galleryHub"
      +isHidden: false
      +pluginIcon: null
      +componentCssClass: null
      +inspectorEnabled: true
      #dirName: "/zenware/novembergallery/components/galleryhub"
      #controller: Cms\Classes\Controller {#624
        #theme: Cms\Classes\Theme {#626
          #dirName: "demo"
          #configCache: array:5 [
            "name" => "Demo"
            "description" => "Demo OctoberCMS theme. Demonstrates the basic concepts of the front-end theming: layouts, pages, partials, components, content blocks, AJAX framework."
            "author" => "OctoberCMS"
            "homepage" => "http://octobercms.com"
            "code" => ""
          ]
        }
        #router: Cms\Classes\Router {#632
          #theme: Cms\Classes\Theme {#626}
          #url: "demo/gallery-hub"
          #parameters: []
          #urlMap: array:19 [
            0 => array:2 [
              "file" => "error.htm"
              "pattern" => "/error"
            ]
            1 => array:2 [
              "file" => "plugins.htm"
              "pattern" => "/demo/plugins"
            ]
            2 => array:2 [
              "file" => "ajax.htm"
              "pattern" => "/demo/ajax"
            ]
            3 => array:2 [
              "file" => "cookbook/blog-page.htm"
              "pattern" => "/blog/:slug"
            ]
            4 => array:2 [
              "file" => "cookbook/overriding-partials.htm"
              "pattern" => "/cookbook/overriding-partials"
            ]
            5 => array:2 [
              "file" => "cookbook/swiper-any-device.htm"
              "pattern" => "/cookbook/swiper-for-any-device"
            ]
            6 => array:2 [
              "file" => "demos/embedded-gallery-combined.htm"
              "pattern" => "/demo/embedded-gallery-combined"
            ]
            7 => array:2 [
              "file" => "demos/popup-lightbox.htm"
              "pattern" => "/demo/popup-lightbox"
            ]
            8 => array:2 [
              "file" => "demos/image-list-only.htm"
              "pattern" => "/demo/image-list-only"
            ]
            9 => array:2 [
              "file" => "demos/embedded-gallery-carousel.htm"
              "pattern" => "/demo/embedded-gallery-carousel"
            ]
            10 => array:2 [
              "file" => "demos/video-gallery.htm"
              "pattern" => "/demo/video-gallery"
            ]
            11 => array:2 [
              "file" => "demos/gallery-hub.htm"
              "pattern" => "/demo/gallery-hub"
            ]
            12 => array:2 [
              "file" => "demos/swiper.htm"
              "pattern" => "/demo/swiper"
            ]
            13 => array:2 [
              "file" => "demos/customization.htm"
              "pattern" => "/demo/customization"
            ]
            14 => 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$"
            ]
            15 => array:2 [
              "file" => "demos/embedded-gallery-slider.htm"
              "pattern" => "/demo/embedded-gallery-slider"
            ]
            16 => array:2 [
              "file" => "demos/embedded-gallery-tiles.htm"
              "pattern" => "/demo/embedded-gallery-tiles"
            ]
            17 => array:2 [
              "file" => "404.htm"
              "pattern" => "/404"
            ]
            18 => array:2 [
              "file" => "home.htm"
              "pattern" => "/"
            ]
          ]
          #routerObj: October\Rain\Router\Router {#738
            #routeMap: array:19 [
              "demos/embedded-gallery-carousel.htm" => October\Rain\Router\Rule {#1471 …9}
              "demos/embedded-gallery-tiles.htm" => October\Rain\Router\Rule {#1478 …9}
              "ajax.htm" => October\Rain\Router\Rule {#1451 …9}
              "cookbook/overriding-partials.htm" => October\Rain\Router\Rule {#1463 …9}
              "cookbook/swiper-any-device.htm" => October\Rain\Router\Rule {#1467 …9}
              "demos/embedded-gallery-combined.htm" => October\Rain\Router\Rule {#1468 …9}
              "demos/popup-lightbox.htm" => October\Rain\Router\Rule {#1469 …9}
              "demos/image-list-only.htm" => October\Rain\Router\Rule {#1470 …9}
              "plugins.htm" => October\Rain\Router\Rule {#1465 …9}
              "demos/video-gallery.htm" => October\Rain\Router\Rule {#1472 …9}
              "demos/gallery-hub.htm" => October\Rain\Router\Rule {#1473
                #ruleName: "demos/gallery-hub.htm"
                #rulePattern: "/demo/gallery-hub"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/gallery-hub"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/swiper.htm" => October\Rain\Router\Rule {#1474 …9}
              "demos/customization.htm" => October\Rain\Router\Rule {#1475 …9}
              "demos/embedded-gallery-slider.htm" => October\Rain\Router\Rule {#1477 …9}
              "demos/dynamic-gallery.htm" => October\Rain\Router\Rule {#1476 …9}
              "404.htm" => October\Rain\Router\Rule {#1479 …9}
              "error.htm" => October\Rain\Router\Rule {#1440 …9}
              "cookbook/blog-page.htm" => October\Rain\Router\Rule {#1466 …9}
              "home.htm" => October\Rain\Router\Rule {#1480 …9}
            ]
            #matchedRouteRule: October\Rain\Router\Rule {#1473}
            #parameters: []
          }
        }
        #loader: Cms\Twig\Loader {#635
          #obj: Cms\Classes\ComponentPartial {#4137
            #component: ZenWare\NovemberGallery\Components\GalleryHub {#1577
              +dbg: "/var/www/novembergallery.zenware.hu/public_html/storage/app/media/galleries"
              +galleries: October\Rain\Support\Collection {#3962
                #items: array:11 [
                  "budapest" => ZenWare\NovemberGallery\Classes\Gallery {#2888 …16}
                  "plants-and-flowers" => ZenWare\NovemberGallery\Classes\Gallery {#2372 …16}
                  "travels-and-landscapes" => ZenWare\NovemberGallery\Classes\Gallery {#2882 …16}
                  "budapest_gallery" => ZenWare\NovemberGallery\Classes\Gallery {#2893 …16}
                  "cute-cat-pix" => ZenWare\NovemberGallery\Classes\Gallery {#2887 …16}
                  "mountains" => ZenWare\NovemberGallery\Classes\Gallery {#3050 …16}
                  "patterns-nature" => ZenWare\NovemberGallery\Classes\Gallery {#3096 …16}
                  "philippines" => ZenWare\NovemberGallery\Classes\Gallery {#3235 …16}
                  "usa" => ZenWare\NovemberGallery\Classes\Gallery {#3450 …16}
                  "waters" => ZenWare\NovemberGallery\Classes\Gallery {#3592 …16}
                  "weddings" => ZenWare\NovemberGallery\Classes\Gallery {#3699 …16}
                ]
              }
              +dirs: array:3 [
                0 => "/var/www/novembergallery.zenware.hu/public_html/storage/app/media/galleries/budapest"
                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/travels-and-landscapes"
              ]
              +hubType: "[ALL]"
              +keyword: false
              +sortBy: "name"
              +sortDirection: "ASC"
              +maxItems: 100
              +linkUrl: "/demos/dynamic-gallery/%slug%"
              +openInNewTab: true
              +visualization: "custom"
              +visualizationTemplate: ""
              +id: "galleryHub4647e05f250374"
              +alias: "galleryHub4"
              +name: "galleryHub"
              +isHidden: false
              +pluginIcon: null
              +componentCssClass: null
              +inspectorEnabled: true
              #dirName: "/zenware/novembergallery/components/galleryhub"
              #controller: Cms\Classes\Controller {#624}
              #page: Cms62e93e1ee57c5525884294_817b82088ca0ecfdb24884e8d2336667Class {#1561
                +page: Cms\Classes\Page {#1207
                  #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"
                  ]
                  #parsable: array:2 [
                    0 => "meta_title"
                    1 => "meta_description"
                  ]
                  +apiBag: []
                  +rules: array:2 [
                    "title" => "required"
                    "url" => "required"
                  ]
                  +components: array:4 [
                    "galleryHub" => ZenWare\NovemberGallery\Components\GalleryHub {#1574}
                    "galleryHub2" => ZenWare\NovemberGallery\Components\GalleryHub {#1575
                      +dbg: null
                      +galleries: October\Rain\Support\Collection {#2370
                        #items: array:3 [
                          "budapest_gallery" => ZenWare\NovemberGallery\Classes\Gallery {#1903 …16}
                          "philippines" => ZenWare\NovemberGallery\Classes\Gallery {#1635 …16}
                          "waters" => ZenWare\NovemberGallery\Classes\Gallery {#2050 …16}
                        ]
                      }
                      +dirs: null
                      +hubType: "WATER"
                      +keyword: "WATER"
                      +sortBy: "name"
                      +sortDirection: "ASC"
                      +maxItems: 100
                      +linkUrl: "/demos/dynamic-gallery/%slug%"
                      +openInNewTab: true
                      +visualization: "titleOnly"
                      +visualizationTemplate: ""
                      +id: "galleryHub2647e05f244e0b"
                      +alias: "galleryHub2"
                      +name: "galleryHub"
                      +isHidden: false
                      +pluginIcon: null
                      +componentCssClass: null
                      +inspectorEnabled: true
                      #dirName: "/zenware/novembergallery/components/galleryhub"
                      #controller: Cms\Classes\Controller {#624}
                      #page: Cms62e93e1ee57c5525884294_817b82088ca0ecfdb24884e8d2336667Class {#1561}
                      #externalPropertyNames: []
                      +implement: []
                      #extensionData: array:4 [
                        "extensions" => []
                        "methods" => []
                        "dynamicMethods" => []
                        "dynamicProperties" => []
                      ]
                      #assets: array:3 [
                        "js" => array:1 [ …1]
                        "css" => array:1 [ …1]
                        "rss" => []
                      ]
                      #assetBundles: array:2 [
                        "js" => []
                        "css" => []
                      ]
                      +assetPath: "/plugins/zenware/novembergallery"
                      +assetLocalPath: null
                      #emitterSingleEventCollection: []
                      #emitterEventCollection: []
                      #emitterEventSorted: []
                      #dependencyResolver: null
                      #properties: array:6 [
                        "hubType" => "WATER"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "template" => ""
                        "visualization" => "titleOnly"
                      ]
                    }
                    "galleryHub3" => ZenWare\NovemberGallery\Components\GalleryHub {#1576
                      +dbg: null
                      +galleries: October\Rain\Support\Collection {#2849
                        #items: array:3 [
                          "budapest_gallery" => ZenWare\NovemberGallery\Classes\Gallery {#2382 …16}
                          "philippines" => ZenWare\NovemberGallery\Classes\Gallery {#1893 …16}
                          "waters" => ZenWare\NovemberGallery\Classes\Gallery {#2529 …16}
                        ]
                      }
                      +dirs: null
                      +hubType: "WATER"
                      +keyword: "WATER"
                      +sortBy: "name"
                      +sortDirection: "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: "galleryHub3647e05f24935f"
                      +alias: "galleryHub3"
                      +name: "galleryHub"
                      +isHidden: false
                      +pluginIcon: null
                      +componentCssClass: null
                      +inspectorEnabled: true
                      #dirName: "/zenware/novembergallery/components/galleryhub"
                      #controller: Cms\Classes\Controller {#624}
                      #page: Cms62e93e1ee57c5525884294_817b82088ca0ecfdb24884e8d2336667Class {#1561}
                      #externalPropertyNames: []
                      +implement: []
                      #extensionData: array:4 [
                        "extensions" => []
                        "methods" => []
                        "dynamicMethods" => []
                        "dynamicProperties" => []
                      ]
                      #assets: array:3 [
                        "js" => array:1 [ …1]
                        "css" => array:1 [ …1]
                        "rss" => []
                      ]
                      #assetBundles: array:2 [
                        "js" => []
                        "css" => []
                      ]
                      +assetPath: "/plugins/zenware/novembergallery"
                      +assetLocalPath: null
                      #emitterSingleEventCollection: []
                      #emitterEventCollection: []
                      #emitterEventSorted: []
                      #dependencyResolver: null
                      #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" => ZenWare\NovemberGallery\Components\GalleryHub {#1577}
                  ]
                  +settings: array:8 [
                    "url" => "/demo/gallery-hub"
                    "layout" => "default"
                    "title" => "Gallery Hub"
                    "is_hidden" => "0"
                    "description" => null
                    "meta_title" => null
                    "meta_description" => null
                    "components" => array:4 [
                      "galleryHub" => array:6 [ …6]
                      "galleryHub galleryHub2" => array:5 [ …5]
                      "galleryHub galleryHub3" => array:6 [ …6]
                      "galleryHub galleryHub4" => array:5 [ …5]
                    ]
                  ]
                  +viewBag: []
                  #passthru: array:5 [
                    0 => "lists"
                    1 => "where"
                    2 => "sortBy"
                    3 => "whereComponent"
                    4 => "withComponent"
                  ]
                  #isCompoundObject: true
                  #viewBagCache: Cms\Components\ViewBag {#1219
                    +isHidden: true
                    +id: null
                    +alias: null
                    +name: "viewBag"
                    +pluginIcon: null
                    +componentCssClass: null
                    +inspectorEnabled: true
                    #dirName: "/cms/components/viewbag"
                    #controller: null
                    #page: null
                    #externalPropertyNames: []
                    +implement: []
                    #extensionData: array:4 [
                      "extensions" => []
                      "methods" => []
                      "dynamicMethods" => []
                      "dynamicProperties" => []
                    ]
                    #assets: array:3 [
                      "js" => []
                      "css" => []
                      "rss" => []
                    ]
                    #assetBundles: array:2 [
                      "js" => []
                      "css" => []
                    ]
                    +assetPath: "/plugins/cms"
                    +assetLocalPath: null
                    #emitterSingleEventCollection: []
                    #emitterEventCollection: []
                    #emitterEventSorted: []
                    #dependencyResolver: null
                    #properties: []
                  }
                  +attributeNames: []
                  +customMessages: []
                  #themeCache: Cms\Classes\Theme {#1571
                    #dirName: "demo"
                    #configCache: null
                  }
                  #datasource: "demo"
                  +attributes: array:16 [
                    "fileName" => "demos/gallery-hub.htm"
                    "content" => """
                      url = "/demo/gallery-hub"\n
                      layout = "default"\n
                      title = "Gallery Hub"\n
                      is_hidden = 0\n
                      \n
                      [galleryHub]\n
                      hubType = "CITY"\n
                      sortBy = "publishedOnDESC"\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" => 1659452952
                    "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
                      }
                      """
                    "url" => "/demo/gallery-hub"
                    "layout" => "default"
                    "title" => "Gallery Hub"
                    "is_hidden" => "0"
                    "galleryHub" => array:6 [
                      "hubType" => "CITY"
                      "sortBy" => "publishedOnDESC"
                      "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"
                    ]
                    "description" => null
                    "meta_title" => null
                    "meta_description" => null
                  ]
                  #original: array:13 [
                    "fileName" => "demos/gallery-hub.htm"
                    "content" => """
                      url = "/demo/gallery-hub"\n
                      layout = "default"\n
                      title = "Gallery Hub"\n
                      is_hidden = 0\n
                      \n
                      [galleryHub]\n
                      hubType = "CITY"\n
                      sortBy = "publishedOnDESC"\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" => 1659452952
                    "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
                      }
                      """
                    "url" => "/demo/gallery-hub"
                    "layout" => "default"
                    "title" => "Gallery Hub"
                    "is_hidden" => "0"
                    "galleryHub" => array:6 [
                      "hubType" => "CITY"
                      "sortBy" => "publishedOnDESC"
                      "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: 5
                  #loadedFromCache: true
                  #observables: []
                  +exists: true
                  +implement: []
                  #extensionData: array:4 [
                    "extensions" => array:2 [
                      "RainLab\Translate\Behaviors\TranslatablePageUrl" => RainLab\Translate\Behaviors\TranslatablePageUrl {#1208 …5}
                      "RainLab\Translate\Behaviors\TranslatablePage" => RainLab\Translate\Behaviors\TranslatablePage {#1210 …8}
                    ]
                    "methods" => array:31 [
                      "initTranslatableContext" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "rewriteTranslatablePageUrl" => "RainLab\Translate\Behaviors\TranslatablePageUrl"
                      "hasTranslatablePageUrl" => "RainLab\Translate\Behaviors\TranslatablePageUrl"
                      "getSettingsUrlAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatablePageUrl"
                      "setSettingsUrlAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatablePageUrl"
                      "getViewBagUrlAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatablePageUrl"
                      "setViewBagUrlAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatablePageUrl"
                      "extend" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "extensionApplyInitCallbacks" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "extensionExtendCallback" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "getCalledExtensionClass" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "isTranslatable" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "getTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "getModelAttributes" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "rewriteTranslatablePageAttributes" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "getAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "setAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "saveTranslation" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "noFallbackLocale" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "withFallbackLocale" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "getTranslateAttributes" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "hasTranslation" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "syncTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "translateContext" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "lang" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "hasTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "getTranslatableAttributesWithOptions" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "isTranslateDirty" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "getDirtyLocales" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "getTranslatableOriginals" => "RainLab\Translate\Behaviors\TranslatablePage"
                      "getTranslateDirty" => "RainLab\Translate\Behaviors\TranslatablePage"
                    ]
                    "dynamicMethods" => []
                    "dynamicProperties" => array:1 [
                      0 => "translatable"
                    ]
                  ]
                  #emitterSingleEventCollection: []
                  #emitterEventCollection: array:6 [
                    "model.afterFetch" => array:1 [
                      0 => array:2 [ …2]
                    ]
                    "model.beforeGetAttribute" => array:1 [
                      0 => array:1 [ …1]
                    ]
                    "model.beforeSetAttribute" => array:1 [
                      0 => array:1 [ …1]
                    ]
                    "model.saveInternal" => array:2 [
                      0 => array:1 [ …1]
                      500 => array:1 [ …1]
                    ]
                    "model.beforeDelete" => array:1 [
                      0 => array:1 [ …1]
                    ]
                    "model.beforeSave" => array:1 [
                      0 => array:1 [ …1]
                    ]
                  ]
                  #emitterEventSorted: array:3 [
                    "model.afterFetch" => array:2 [
                      0 => Closure() {#1209 …4}
                      1 => Closure() {#1214 …4}
                    ]
                    "model.beforeGetAttribute" => array:1 [
                      0 => Closure($key) {#1211 …5}
                    ]
                    "model.beforeSetAttribute" => array:1 [
                      0 => Closure($key, $value) {#1212 …5}
                    ]
                  ]
                  #validationErrors: null
                  #parsableAttributes: []
                  +"translatable": array:4 [
                    0 => "title"
                    1 => "description"
                    2 => "meta_title"
                    3 => "meta_description"
                  ]
                }
                +layout: Cms\Classes\Layout {#1562
                  #dirName: "layouts"
                  #parsable: []
                  +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: Cms\Components\ViewBag {#1567
                    +isHidden: true
                    +id: null
                    +alias: null
                    +name: "viewBag"
                    +pluginIcon: null
                    +componentCssClass: null
                    +inspectorEnabled: true
                    #dirName: "/cms/components/viewbag"
                    #controller: null
                    #page: null
                    #externalPropertyNames: []
                    +implement: []
                    #extensionData: array:4 [
                      "extensions" => []
                      "methods" => []
                      "dynamicMethods" => []
                      "dynamicProperties" => []
                    ]
                    #assets: array:3 [
                      "js" => []
                      "css" => []
                      "rss" => []
                    ]
                    #assetBundles: array:2 [
                      "js" => []
                      "css" => []
                    ]
                    +assetPath: "/plugins/cms"
                    +assetLocalPath: null
                    #emitterSingleEventCollection: []
                    #emitterEventCollection: []
                    #emitterEventSorted: []
                    #dependencyResolver: null
                    #properties: []
                  }
                  +rules: []
                  +attributeNames: []
                  +customMessages: []
                  #themeCache: Cms\Classes\Theme {#1569
                    #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" => 1638218558
                    "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" => 1638218558
                    "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: 5
                  #loadedFromCache: true
                  #observables: []
                  +exists: true
                  +implement: []
                  #extensionData: array:4 [
                    "extensions" => []
                    "methods" => []
                    "dynamicMethods" => []
                    "dynamicProperties" => []
                  ]
                  #emitterSingleEventCollection: []
                  #emitterEventCollection: array:3 [
                    "model.saveInternal" => array:1 [
                      500 => array:1 [ …1]
                    ]
                    "model.beforeDelete" => array:1 [
                      0 => array:1 [ …1]
                    ]
                    "model.beforeSave" => array:1 [
                      0 => array:1 [ …1]
                    ]
                  ]
                  #emitterEventSorted: []
                  #validationErrors: null
                  #parsableAttributes: []
                }
                +controller: Cms\Classes\Controller {#624}
                +implement: []
                #extensionData: array:4 [
                  "extensions" => []
                  "methods" => []
                  "dynamicMethods" => []
                  "dynamicProperties" => []
                ]
              }
              #externalPropertyNames: []
              +implement: []
              #extensionData: array:4 [
                "extensions" => []
                "methods" => []
                "dynamicMethods" => []
                "dynamicProperties" => []
              ]
              #assets: array:3 [
                "js" => array:1 [ …1]
                "css" => array:1 [ …1]
                "rss" => []
              ]
              #assetBundles: array:2 [
                "js" => []
                "css" => []
              ]
              +assetPath: "/plugins/zenware/novembergallery"
              +assetLocalPath: null
              #emitterSingleEventCollection: []
              #emitterEventCollection: []
              #emitterEventSorted: []
              #dependencyResolver: null
              #properties: array:6 [
                "hubType" => "[ALL]"
                "maxItems" => "100"
                "linkUrl" => "/demos/dynamic-gallery/%slug%"
                "openInNewTab" => "1"
                "template" => ""
                "visualization" => "custom"
              ]
            }
            +fileName: "blank.htm"
            +mtime: 1659447094
            +content: """
              {##}\r\n
              {# You only need the previous line if you use the OctoberCMS Template Language extension in VS Code #}\r\n
              \r\n
              {# The following line shows you how you can assign a property of this component instance to a page variable: #}\r\n
              {% set galleries = __SELF__.galleries %}\r\n
              \r\n
              {# Please leave the following in the template, it allows the component to show error messages to the user: #}\r\n
              {% if __SELF__.error %}\r\n
              \t<div class="alert zen-alert">{{ __SELF__.error }}</div>\r\n
              {% endif %}\r\n
              \r\n
              {#\r\n
              \r\n
              Drop your own code here. For example:\r\n
              \r\n
              {% if galleries|length > 0 %}\r\n
              \r\n
              \t<div id="{{__SELF__.id}}">\r\n
              \t\t{% for gallery in galleries %}\r\n
              \t\t\t<img alt="{{ gallery.name }}" \r\n
              \t\t\t\tsrc="{{ gallery.previewImage.url | resize(280, false,  { mode: 'portrait', quality: '90', extension: 'png' }) }}" \r\n
              \t\t\t\tstyle="margin: 20px;"\r\n
              \t\t\t\t/>\r\n
              \t\t{% endfor %}\r\n
              \t</div>\r\n
              \r\n
              {% endif %}\r\n
              \r\n
              Hint: To dig into the galleries (or any other) variable/collection, you have two options. \r\n
              You can simply add \r\n
              \r\n
              {{ dump(galleryHub.galleries.toArray) }} \r\n
              \r\n
              on your page after the component definition and it will print debug information about that \r\n
              variable straight in your page. Alternatively, you can install the Debugbar plugin and then add \r\n
              \r\n
              {{ debug(galleryHub.galleries) }} \r\n
              \r\n
              to your page to show debug information in the Laravel debugbar. To see all public properties \r\n
              of a gallery, do: \r\n
              \r\n
              {{ debug(galleryHub.galleries.first.toArray) }}. \r\n
              \r\n
              Make sure to replace "galleryHub" with the alias of your component as set in the component options!\r\n
              \r\n
              #}
              """
            #maxNesting: 2
            #allowedExtensions: array:1 [
              0 => "htm"
            ]
            #defaultExtension: "htm"
            +implement: []
            #extensionData: array:4 [
              "extensions" => []
              "methods" => []
              "dynamicMethods" => []
              "dynamicProperties" => []
            ]
          }
          #fallbackCache: []
          #cache: []
        }
        #page: Cms\Classes\Page {#1207}
        #pageObj: Cms62e93e1ee57c5525884294_817b82088ca0ecfdb24884e8d2336667Class {#1561}
        #layout: Cms\Classes\Layout {#1562}
        #layoutObj: Cms61a5549d0156c953708072_642280fb8811900ba27b793c178a8a2eClass {#1566
          +page: Cms\Classes\Page {#1207}
          +layout: Cms\Classes\Layout {#1562}
          +controller: Cms\Classes\Controller {#624}
          +implement: []
          #extensionData: array:4 [
            "extensions" => []
            "methods" => []
            "dynamicMethods" => []
            "dynamicProperties" => []
          ]
        }
        #twig: Twig\Environment {#636
          -charset: "UTF-8"
          -loader: Cms\Twig\Loader {#635}
          -debug: true
          -autoReload: true
          -cache: Twig\Cache\FilesystemCache {#634
            -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_824a854a3f489eba4773bdf16bcb0a1de5f0b1068dbc29cdd79930e692d71ba1" => __TwigTemplate_824a854a3f489eba4773bdf16bcb0a1de5f0b1068dbc29cdd79930e692d71ba1 {#2852
              -source: Twig\Source {#1572 …3}
              -macros: []
              #parent: false
              #parents: []
              #env: Twig\Environment {#636}
              #blocks: array:9 [ …9]
              #traits: []
              #extensions: array:8 [ …8]
              #sandbox: null
            }
            "__TwigTemplate_f4be0bd42816f29fc98ed81b4646a2466a071905aac4a1130a90ce96e650c7dd" => __TwigTemplate_f4be0bd42816f29fc98ed81b4646a2466a071905aac4a1130a90ce96e650c7dd {#4021
              -source: Twig\Source {#4022 …3}
              -macros: []
              #parent: false
              #parents: []
              #env: Twig\Environment {#636}
              #blocks: []
              #traits: []
              #extensions: array:8 [ …8]
              #sandbox: null
            }
            "__TwigTemplate_fe185a736d76304285df89b17acf5c67ec3a4e8a38f5e81a323ba6d5110d3991" => __TwigTemplate_fe185a736d76304285df89b17acf5c67ec3a4e8a38f5e81a323ba6d5110d3991 {#4019
              -source: Twig\Source {#4098 …3}
              -macros: []
              #parent: false
              #parents: []
              #env: Twig\Environment {#636}
              #blocks: []
              #traits: []
              #extensions: array:8 [ …8]
              #sandbox: null
            }
            "__TwigTemplate_ab0eb0ee617f28b494ab32a877a09cc53cc5e959ca3777aab97976894d08d194" => __TwigTemplate_ab0eb0ee617f28b494ab32a877a09cc53cc5e959ca3777aab97976894d08d194 {#4035
              -source: Twig\Source {#4060 …3}
              -macros: []
              #parent: false
              #parents: []
              #env: Twig\Environment {#636}
              #blocks: []
              #traits: []
              #extensions: array:8 [ …8]
              #sandbox: null
            }
            "__TwigTemplate_8665c2ec13f9a11c5bb4438776c227a5260f03c1e45e818f96f29cf0c3726655" => __TwigTemplate_8665c2ec13f9a11c5bb4438776c227a5260f03c1e45e818f96f29cf0c3726655 {#4064
              -source: Twig\Source {#4149 …3}
              -macros: []
              #parent: false
              #parents: []
              #env: Twig\Environment {#636}
              #blocks: []
              #traits: []
              #extensions: array:8 [ …8]
              #sandbox: null
            }
          ]
          -strictVariables: false
          -templateClassPrefix: "__TwigTemplate_"
          -originalCache: Twig\Cache\FilesystemCache {#634}
          -extensionSet: Twig\ExtensionSet {#637
            -extensions: array:8 [
              "Twig\Extension\CoreExtension" => Twig\Extension\CoreExtension {#639 …4}
              "Twig\Extension\EscaperExtension" => Twig\Extension\EscaperExtension {#640 …4}
              "Twig\Extension\OptimizerExtension" => Twig\Extension\OptimizerExtension {#641 …1}
              "Cms\Twig\Extension" => Cms\Twig\Extension {#642 …1}
              "System\Twig\Extension" => System\Twig\Extension {#643 …1}
              "Cms\Twig\DebugExtension" => Cms\Twig\DebugExtension {#644 …5}
              "Barryvdh\Debugbar\Twig\Extension\Debug" => Barryvdh\Debugbar\Twig\Extension\Debug {#1526 …1}
              "Barryvdh\Debugbar\Twig\Extension\Stopwatch" => Barryvdh\Debugbar\Twig\Extension\Stopwatch {#1527 …1}
            ]
            -initialized: false
            -runtimeInitialized: true
            -staging: Twig\Extension\StagingExtension {#638
              -functions: []
              -filters: []
              -visitors: []
              -tokenParsers: []
              -tests: []
            }
            -parsers: null
            -visitors: null
            -filters: null
            -tests: null
            -functions: null
            -unaryOperators: null
            -binaryOperators: null
            -globals: null
            -functionCallbacks: []
            -filterCallbacks: []
            -lastModified: 1658801256
          }
          -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:4:2.15.1:1:\Twig\Template:0"
        }
        #pageContents: null
        +vars: array:12 [
          "this" => array:7 [
            "page" => Cms\Classes\Page {#1207}
            "layout" => Cms\Classes\Layout {#1562}
            "theme" => Cms\Classes\Theme {#626}
            "param" => []
            "controller" => Cms\Classes\Controller {#624}
            "environment" => "local"
            "session" => Illuminate\Session\SessionManager {#346
              #container: October\Rain\Foundation\Application {#2 …35}
              #app: October\Rain\Foundation\Application {#2 …35}
              #config: October\Rain\Config\Repository {#56 …6}
              #customCreators: []
              #drivers: array:1 [ …1]
            }
          ]
          "errors" => Illuminate\Support\ViewErrorBag {#1557
            #bags: []
          }
          "oldInput" => []
          "galleryHub" => ZenWare\NovemberGallery\Components\GalleryHub {#1574}
          "galleryHub2" => ZenWare\NovemberGallery\Components\GalleryHub {#1575}
          "galleryHub3" => ZenWare\NovemberGallery\Components\GalleryHub {#1576}
          "galleryHub4" => ZenWare\NovemberGallery\Components\GalleryHub {#1577}
          "galleries" => October\Rain\Support\Collection {#3962}
          "novemberGallery_galleryHub" => October\Rain\Support\Collection {#1891}
          "novemberGallery_galleryHub2" => October\Rain\Support\Collection {#2370}
          "novemberGallery_galleryHub3" => October\Rain\Support\Collection {#2849}
          "novemberGallery_galleryHub4" => October\Rain\Support\Collection {#3962}
        ]
        #componentContext: null
        #partialStack: Cms\Classes\PartialStack {#633
          +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:5 [
            0 => array:2 [
              "path" => "https://novembergallery.zenware.hu/plugins/rainlab/debugbar/assets/css/debugbar.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" => []
            ]
            4 => array:2 [
              "path" => "https://novembergallery.zenware.hu/plugins/zenware/novembergallery/assets/css/novembergallery.css"
              "attributes" => []
            ]
          ]
          "rss" => []
        ]
        #assetBundles: array:2 [
          "js" => []
          "css" => []
        ]
        +assetPath: "/themes/demo"
        +assetLocalPath: "/var/www/novembergallery.zenware.hu/public_html/themes/demo"
        #emitterSingleEventCollection: []
        #emitterEventCollection: []
        #emitterEventSorted: []
        #statusCode: 200
        #responseOverride: null
        #responseHeaderBag: null
      }
      #page: Cms62e93e1ee57c5525884294_817b82088ca0ecfdb24884e8d2336667Class {#1561}
      #externalPropertyNames: []
      +implement: []
      #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" => []
      ]
      #assetBundles: array:2 [
        "js" => []
        "css" => []
      ]
      +assetPath: "/plugins/zenware/novembergallery"
      +assetLocalPath: null
      #emitterSingleEventCollection: []
      #emitterEventCollection: []
      #emitterEventSorted: []
      #dependencyResolver: null
      #properties: array:7 [
        "hubType" => "CITY"
        "maxItems" => "100"
        "linkUrl" => "/demos/dynamic-gallery/%slug%"
        "openInNewTab" => "1"
        "template" => ""
        "sortBy" => "publishedOnDESC"
        "visualization" => "default"
      ]
    }
    +title: "Erzsébet bridge"
    +description: "A view of Erzsébet bridge around dusk from Belgrád rakpart"
    +sortOrder: 80
    +file: null
    +octoberImageFile: RainLab\Translate\Models\MLFile {#1807
      +implement: array:1 [
        0 => "RainLab\Translate\Behaviors\TranslatableModel"
      ]
      +translatable: array:2 [
        0 => "title"
        1 => "description"
      ]
      #table: "system_files"
      +morphTo: array:1 [
        "attachment" => []
      ]
      #fillable: array:9 [
        0 => "file_name"
        1 => "title"
        2 => "description"
        3 => "field"
        4 => "attachment_id"
        5 => "attachment_type"
        6 => "is_public"
        7 => "sort_order"
        8 => "data"
      ]
      #guarded: []
      #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"
      ]
      +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: []
      +trimStrings: 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: []
      +hasMany: []
      +hasOne: []
      +belongsTo: []
      +belongsToMany: []
      +morphOne: []
      +morphMany: array:1 [
        "translations" => array:2 [
          0 => "RainLab\Translate\Models\Attribute"
          "name" => "model"
        ]
      ]
      +morphToMany: []
      +morphedByMany: []
      +attachOne: []
      +attachMany: []
      +hasManyThrough: []
      +hasOneThrough: []
      #emitterSingleEventCollection: []
      #emitterEventCollection: array:5 [
        "model.afterCreate" => array:1 [
          0 => array:1 [
            0 => Closure() {#1806
              class: "October\Rain\Database\Attach\File"
              this: RainLab\Translate\Models\MLFile {#1807}
              file: "/var/www/novembergallery.zenware.hu/public_html/vendor/october/rain/src/Database/Traits/Sortable.php"
              line: "43 to 49"
            }
          ]
        ]
        "model.beforeGetAttribute" => array:1 [
          0 => array:1 [
            0 => Closure($key) {#1804
              class: "RainLab\Translate\Classes\TranslatableBehavior"
              this: RainLab\Translate\Behaviors\TranslatableModel {#1805
                #model: RainLab\Translate\Models\MLFile {#1807}
                #translatableContext: "en"
                #translatableDefault: "en"
                #translatableUseFallback: true
                #translatableAttributes: []
                #translatableOriginals: []
                #requiredProperties: array:1 [
                  0 => "translatable"
                ]
                #extensionHidden: array:2 [
                  "fields" => []
                  "methods" => array:2 [ …2]
                ]
              }
              use: {
                $model: RainLab\Translate\Models\MLFile {#1807}
              }
              file: "/var/www/novembergallery.zenware.hu/public_html/plugins/rainlab/translate/classes/TranslatableBehavior.php"
              line: "61 to 70"
            }
          ]
        ]
        "model.beforeSetAttribute" => array:1 [
          0 => array:1 [
            0 => Closure($key, $value) {#1803
              class: "RainLab\Translate\Classes\TranslatableBehavior"
              this: RainLab\Translate\Behaviors\TranslatableModel {#1805}
              use: { …1}
              file: "/var/www/novembergallery.zenware.hu/public_html/plugins/rainlab/translate/classes/TranslatableBehavior.php"
              line: "72 to 81"
            }
          ]
        ]
        "model.saveInternal" => array:1 [
          0 => array:1 [
            0 => Closure() {#1802
              class: "RainLab\Translate\Classes\TranslatableBehavior"
              this: RainLab\Translate\Behaviors\TranslatableModel {#1805}
              file: "/var/www/novembergallery.zenware.hu/public_html/plugins/rainlab/translate/classes/TranslatableBehavior.php"
              line: "83 to 85"
            }
          ]
        ]
        "model.afterDelete" => array:1 [
          0 => array:1 [
            0 => Closure() {#1801
              class: "RainLab\Translate\Behaviors\TranslatableModel"
              this: RainLab\Translate\Behaviors\TranslatableModel {#1805}
              use: { …1}
              file: "/var/www/novembergallery.zenware.hu/public_html/plugins/rainlab/translate/behaviors/TranslatableModel.php"
              line: "37 to 47"
            }
          ]
        ]
      ]
      #emitterEventSorted: array:1 [
        "model.beforeGetAttribute" => array:1 [
          0 => Closure($key) {#1804}
        ]
      ]
      #extensionData: array:4 [
        "extensions" => array:1 [
          "RainLab\Translate\Behaviors\TranslatableModel" => RainLab\Translate\Behaviors\TranslatableModel {#1805}
        ]
        "methods" => array:25 [
          "scopeTransWhere" => "RainLab\Translate\Behaviors\TranslatableModel"
          "scopeTransWhereNoFallback" => "RainLab\Translate\Behaviors\TranslatableModel"
          "scopeTransOrderBy" => "RainLab\Translate\Behaviors\TranslatableModel"
          "initTranslatableContext" => "RainLab\Translate\Behaviors\TranslatableModel"
          "isTranslatable" => "RainLab\Translate\Behaviors\TranslatableModel"
          "noFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
          "withFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
          "getAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
          "getTranslateAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
          "hasTranslation" => "RainLab\Translate\Behaviors\TranslatableModel"
          "setAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
          "syncTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
          "translateContext" => "RainLab\Translate\Behaviors\TranslatableModel"
          "lang" => "RainLab\Translate\Behaviors\TranslatableModel"
          "hasTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
          "getTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
          "getTranslatableAttributesWithOptions" => "RainLab\Translate\Behaviors\TranslatableModel"
          "isTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
          "getDirtyLocales" => "RainLab\Translate\Behaviors\TranslatableModel"
          "getTranslatableOriginals" => "RainLab\Translate\Behaviors\TranslatableModel"
          "getTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
          "extend" => "RainLab\Translate\Behaviors\TranslatableModel"
          "extensionApplyInitCallbacks" => "RainLab\Translate\Behaviors\TranslatableModel"
          "extensionExtendCallback" => "RainLab\Translate\Behaviors\TranslatableModel"
          "getCalledExtensionClass" => "RainLab\Translate\Behaviors\TranslatableModel"
        ]
        "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"
    +relativePath: "/storage/app/uploads/public/5d5/e7b/eba/"
    +uploaded: DateTime @1566473195 {#1783
      date: 2019-08-22 11:26:35.0 UTC (+00:00)
    }
    +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/eba/5d5e7bebab0b6453042679.jpg"
  }
  +published: 1
  +items: October\Rain\Support\Collection {#1638
    #items: array:7 [
      0 => ZenWare\NovemberGallery\Classes\GalleryItem {#1695
        -component: ZenWare\NovemberGallery\Components\GalleryHub {#1574}
        +title: "A tram in front of Nyugati train station"
        +description: ""
        +sortOrder: 1
        +file: null
        +octoberImageFile: RainLab\Translate\Models\MLFile {#1728
          +implement: array:1 [
            0 => "RainLab\Translate\Behaviors\TranslatableModel"
          ]
          +translatable: array:2 [
            0 => "title"
            1 => "description"
          ]
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #fillable: array:9 [
            0 => "file_name"
            1 => "title"
            2 => "description"
            3 => "field"
            4 => "attachment_id"
            5 => "attachment_type"
            6 => "is_public"
            7 => "sort_order"
            8 => "data"
          ]
          #guarded: []
          #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"
          ]
          +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: []
          +trimStrings: 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: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: array:1 [
            "translations" => array:2 [
              0 => "RainLab\Translate\Models\Attribute"
              "name" => "model"
            ]
          ]
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          +hasOneThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: array:5 [
            "model.afterCreate" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeGetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeSetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.saveInternal" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.afterDelete" => array:1 [
              0 => array:1 [ …1]
            ]
          ]
          #emitterEventSorted: array:1 [
            "model.beforeGetAttribute" => array:1 [
              0 => Closure($key) {#1725 …5}
            ]
          ]
          #extensionData: array:4 [
            "extensions" => array:1 [
              "RainLab\Translate\Behaviors\TranslatableModel" => RainLab\Translate\Behaviors\TranslatableModel {#1726 …8}
            ]
            "methods" => array:25 [
              "scopeTransWhere" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransWhereNoFallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransOrderBy" => "RainLab\Translate\Behaviors\TranslatableModel"
              "initTranslatableContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslatable" => "RainLab\Translate\Behaviors\TranslatableModel"
              "noFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "withFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslation" => "RainLab\Translate\Behaviors\TranslatableModel"
              "setAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "syncTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "translateContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "lang" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributesWithOptions" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getDirtyLocales" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableOriginals" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extend" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionApplyInitCallbacks" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionExtendCallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getCalledExtensionClass" => "RainLab\Translate\Behaviors\TranslatableModel"
            ]
            "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"
        +relativePath: "/storage/app/uploads/public/5d5/e7b/db5/"
        +uploaded: DateTime @1566473179 {#1698
          date: 2019-08-22 11:26:19.0 UTC (+00:00)
        }
        +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/db5/5d5e7bdb5869b330510709.jpg"
      }
      1 => ZenWare\NovemberGallery\Classes\GalleryItem {#1709
        -component: ZenWare\NovemberGallery\Components\GalleryHub {#1574}
        +title: "Bike in front of moving tram"
        +description: ""
        +sortOrder: 2
        +file: null
        +octoberImageFile: RainLab\Translate\Models\MLFile {#1721
          +implement: array:1 [
            0 => "RainLab\Translate\Behaviors\TranslatableModel"
          ]
          +translatable: array:2 [
            0 => "title"
            1 => "description"
          ]
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #fillable: array:9 [
            0 => "file_name"
            1 => "title"
            2 => "description"
            3 => "field"
            4 => "attachment_id"
            5 => "attachment_type"
            6 => "is_public"
            7 => "sort_order"
            8 => "data"
          ]
          #guarded: []
          #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"
          ]
          +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: []
          +trimStrings: 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: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: array:1 [
            "translations" => array:2 [
              0 => "RainLab\Translate\Models\Attribute"
              "name" => "model"
            ]
          ]
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          +hasOneThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: array:5 [
            "model.afterCreate" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeGetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeSetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.saveInternal" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.afterDelete" => array:1 [
              0 => array:1 [ …1]
            ]
          ]
          #emitterEventSorted: array:1 [
            "model.beforeGetAttribute" => array:1 [
              0 => Closure($key) {#1718 …5}
            ]
          ]
          #extensionData: array:4 [
            "extensions" => array:1 [
              "RainLab\Translate\Behaviors\TranslatableModel" => RainLab\Translate\Behaviors\TranslatableModel {#1719 …8}
            ]
            "methods" => array:25 [
              "scopeTransWhere" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransWhereNoFallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransOrderBy" => "RainLab\Translate\Behaviors\TranslatableModel"
              "initTranslatableContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslatable" => "RainLab\Translate\Behaviors\TranslatableModel"
              "noFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "withFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslation" => "RainLab\Translate\Behaviors\TranslatableModel"
              "setAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "syncTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "translateContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "lang" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributesWithOptions" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getDirtyLocales" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableOriginals" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extend" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionApplyInitCallbacks" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionExtendCallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getCalledExtensionClass" => "RainLab\Translate\Behaviors\TranslatableModel"
            ]
            "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"
        +relativePath: "/storage/app/uploads/public/5d5/e7b/da1/"
        +uploaded: DateTime @1566473178 {#1696
          date: 2019-08-22 11:26:18.0 UTC (+00:00)
        }
        +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/da1/5d5e7bda14263088031203.jpg"
      }
      2 => ZenWare\NovemberGallery\Classes\GalleryItem {#1704
        -component: ZenWare\NovemberGallery\Components\GalleryHub {#1574}
        +title: "View towards the Basilica across the Danube"
        +description: ""
        +sortOrder: 3
        +file: null
        +octoberImageFile: RainLab\Translate\Models\MLFile {#1738
          +implement: array:1 [
            0 => "RainLab\Translate\Behaviors\TranslatableModel"
          ]
          +translatable: array:2 [
            0 => "title"
            1 => "description"
          ]
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #fillable: array:9 [
            0 => "file_name"
            1 => "title"
            2 => "description"
            3 => "field"
            4 => "attachment_id"
            5 => "attachment_type"
            6 => "is_public"
            7 => "sort_order"
            8 => "data"
          ]
          #guarded: []
          #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"
          ]
          +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: []
          +trimStrings: 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: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: array:1 [
            "translations" => array:2 [
              0 => "RainLab\Translate\Models\Attribute"
              "name" => "model"
            ]
          ]
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          +hasOneThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: array:5 [
            "model.afterCreate" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeGetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeSetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.saveInternal" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.afterDelete" => array:1 [
              0 => array:1 [ …1]
            ]
          ]
          #emitterEventSorted: array:1 [
            "model.beforeGetAttribute" => array:1 [
              0 => Closure($key) {#1741 …5}
            ]
          ]
          #extensionData: array:4 [
            "extensions" => array:1 [
              "RainLab\Translate\Behaviors\TranslatableModel" => RainLab\Translate\Behaviors\TranslatableModel {#1740 …8}
            ]
            "methods" => array:25 [
              "scopeTransWhere" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransWhereNoFallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransOrderBy" => "RainLab\Translate\Behaviors\TranslatableModel"
              "initTranslatableContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslatable" => "RainLab\Translate\Behaviors\TranslatableModel"
              "noFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "withFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslation" => "RainLab\Translate\Behaviors\TranslatableModel"
              "setAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "syncTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "translateContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "lang" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributesWithOptions" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getDirtyLocales" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableOriginals" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extend" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionApplyInitCallbacks" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionExtendCallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getCalledExtensionClass" => "RainLab\Translate\Behaviors\TranslatableModel"
            ]
            "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"
        +relativePath: "/storage/app/uploads/public/5d5/e7b/db2/"
        +uploaded: DateTime @1566473179 {#1708
          date: 2019-08-22 11:26:19.0 UTC (+00:00)
        }
        +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/db2/5d5e7bdb21968612599725.jpg"
      }
      3 => ZenWare\NovemberGallery\Classes\GalleryItem {#1706
        -component: ZenWare\NovemberGallery\Components\GalleryHub {#1574}
        +title: "Erzsebet bridge on August 20th"
        +description: ""
        +sortOrder: 4
        +file: null
        +octoberImageFile: RainLab\Translate\Models\MLFile {#1745
          +implement: array:1 [
            0 => "RainLab\Translate\Behaviors\TranslatableModel"
          ]
          +translatable: array:2 [
            0 => "title"
            1 => "description"
          ]
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #fillable: array:9 [
            0 => "file_name"
            1 => "title"
            2 => "description"
            3 => "field"
            4 => "attachment_id"
            5 => "attachment_type"
            6 => "is_public"
            7 => "sort_order"
            8 => "data"
          ]
          #guarded: []
          #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"
          ]
          +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: []
          +trimStrings: 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: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: array:1 [
            "translations" => array:2 [
              0 => "RainLab\Translate\Models\Attribute"
              "name" => "model"
            ]
          ]
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          +hasOneThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: array:5 [
            "model.afterCreate" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeGetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeSetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.saveInternal" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.afterDelete" => array:1 [
              0 => array:1 [ …1]
            ]
          ]
          #emitterEventSorted: array:1 [
            "model.beforeGetAttribute" => array:1 [
              0 => Closure($key) {#1748 …5}
            ]
          ]
          #extensionData: array:4 [
            "extensions" => array:1 [
              "RainLab\Translate\Behaviors\TranslatableModel" => RainLab\Translate\Behaviors\TranslatableModel {#1747 …8}
            ]
            "methods" => array:25 [
              "scopeTransWhere" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransWhereNoFallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransOrderBy" => "RainLab\Translate\Behaviors\TranslatableModel"
              "initTranslatableContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslatable" => "RainLab\Translate\Behaviors\TranslatableModel"
              "noFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "withFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslation" => "RainLab\Translate\Behaviors\TranslatableModel"
              "setAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "syncTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "translateContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "lang" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributesWithOptions" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getDirtyLocales" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableOriginals" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extend" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionApplyInitCallbacks" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionExtendCallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getCalledExtensionClass" => "RainLab\Translate\Behaviors\TranslatableModel"
            ]
            "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"
        +relativePath: "/storage/app/uploads/public/5d5/e7b/dc9/"
        +uploaded: DateTime @1566473180 {#1707
          date: 2019-08-22 11:26:20.0 UTC (+00:00)
        }
        +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/dc9/5d5e7bdc9ca71077835509.jpg"
      }
      4 => ZenWare\NovemberGallery\Classes\GalleryItem {#1702
        -component: ZenWare\NovemberGallery\Components\GalleryHub {#1574}
        +title: "View towards Lanchid from Gellert hill"
        +description: ""
        +sortOrder: 5
        +file: null
        +octoberImageFile: RainLab\Translate\Models\MLFile {#1752
          +implement: array:1 [
            0 => "RainLab\Translate\Behaviors\TranslatableModel"
          ]
          +translatable: array:2 [
            0 => "title"
            1 => "description"
          ]
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #fillable: array:9 [
            0 => "file_name"
            1 => "title"
            2 => "description"
            3 => "field"
            4 => "attachment_id"
            5 => "attachment_type"
            6 => "is_public"
            7 => "sort_order"
            8 => "data"
          ]
          #guarded: []
          #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"
          ]
          +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: []
          +trimStrings: 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: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: array:1 [
            "translations" => array:2 [
              0 => "RainLab\Translate\Models\Attribute"
              "name" => "model"
            ]
          ]
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          +hasOneThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: array:5 [
            "model.afterCreate" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeGetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeSetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.saveInternal" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.afterDelete" => array:1 [
              0 => array:1 [ …1]
            ]
          ]
          #emitterEventSorted: array:1 [
            "model.beforeGetAttribute" => array:1 [
              0 => Closure($key) {#1755 …5}
            ]
          ]
          #extensionData: array:4 [
            "extensions" => array:1 [
              "RainLab\Translate\Behaviors\TranslatableModel" => RainLab\Translate\Behaviors\TranslatableModel {#1754 …8}
            ]
            "methods" => array:25 [
              "scopeTransWhere" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransWhereNoFallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransOrderBy" => "RainLab\Translate\Behaviors\TranslatableModel"
              "initTranslatableContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslatable" => "RainLab\Translate\Behaviors\TranslatableModel"
              "noFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "withFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslation" => "RainLab\Translate\Behaviors\TranslatableModel"
              "setAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "syncTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "translateContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "lang" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributesWithOptions" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getDirtyLocales" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableOriginals" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extend" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionApplyInitCallbacks" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionExtendCallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getCalledExtensionClass" => "RainLab\Translate\Behaviors\TranslatableModel"
            ]
            "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"
        +relativePath: "/storage/app/uploads/public/5d5/e7b/dbf/"
        +uploaded: DateTime @1566473179 {#1703
          date: 2019-08-22 11:26:19.0 UTC (+00:00)
        }
        +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/dbf/5d5e7bdbf2f70141512178.jpg"
      }
      5 => ZenWare\NovemberGallery\Classes\GalleryItem {#1736
        -component: ZenWare\NovemberGallery\Components\GalleryHub {#1574}
        +title: "Beautiful Erzsebet bridge"
        +description: ""
        +sortOrder: 6
        +file: null
        +octoberImageFile: RainLab\Translate\Models\MLFile {#1759
          +implement: array:1 [
            0 => "RainLab\Translate\Behaviors\TranslatableModel"
          ]
          +translatable: array:2 [
            0 => "title"
            1 => "description"
          ]
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #fillable: array:9 [
            0 => "file_name"
            1 => "title"
            2 => "description"
            3 => "field"
            4 => "attachment_id"
            5 => "attachment_type"
            6 => "is_public"
            7 => "sort_order"
            8 => "data"
          ]
          #guarded: []
          #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"
          ]
          +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: []
          +trimStrings: 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: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: array:1 [
            "translations" => array:2 [
              0 => "RainLab\Translate\Models\Attribute"
              "name" => "model"
            ]
          ]
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          +hasOneThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: array:5 [
            "model.afterCreate" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeGetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeSetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.saveInternal" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.afterDelete" => array:1 [
              0 => array:1 [ …1]
            ]
          ]
          #emitterEventSorted: array:1 [
            "model.beforeGetAttribute" => array:1 [
              0 => Closure($key) {#1762 …5}
            ]
          ]
          #extensionData: array:4 [
            "extensions" => array:1 [
              "RainLab\Translate\Behaviors\TranslatableModel" => RainLab\Translate\Behaviors\TranslatableModel {#1761 …8}
            ]
            "methods" => array:25 [
              "scopeTransWhere" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransWhereNoFallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransOrderBy" => "RainLab\Translate\Behaviors\TranslatableModel"
              "initTranslatableContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslatable" => "RainLab\Translate\Behaviors\TranslatableModel"
              "noFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "withFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslation" => "RainLab\Translate\Behaviors\TranslatableModel"
              "setAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "syncTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "translateContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "lang" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributesWithOptions" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getDirtyLocales" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableOriginals" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extend" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionApplyInitCallbacks" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionExtendCallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getCalledExtensionClass" => "RainLab\Translate\Behaviors\TranslatableModel"
            ]
            "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"
        +relativePath: "/storage/app/uploads/public/5d5/e7b/da0/"
        +uploaded: DateTime @1566473178 {#1705
          date: 2019-08-22 11:26:18.0 UTC (+00:00)
        }
        +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/da0/5d5e7bda0a4c2452634825.jpg"
      }
      6 => ZenWare\NovemberGallery\Classes\GalleryItem {#1700
        -component: ZenWare\NovemberGallery\Components\GalleryHub {#1574}
        +title: "View towards vizivaros from Gellert hill"
        +description: ""
        +sortOrder: 7
        +file: null
        +octoberImageFile: RainLab\Translate\Models\MLFile {#1766
          +implement: array:1 [
            0 => "RainLab\Translate\Behaviors\TranslatableModel"
          ]
          +translatable: array:2 [
            0 => "title"
            1 => "description"
          ]
          #table: "system_files"
          +morphTo: array:1 [
            "attachment" => []
          ]
          #fillable: array:9 [
            0 => "file_name"
            1 => "title"
            2 => "description"
            3 => "field"
            4 => "attachment_id"
            5 => "attachment_type"
            6 => "is_public"
            7 => "sort_order"
            8 => "data"
          ]
          #guarded: []
          #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"
          ]
          +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: []
          +trimStrings: 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: []
          +hasMany: []
          +hasOne: []
          +belongsTo: []
          +belongsToMany: []
          +morphOne: []
          +morphMany: array:1 [
            "translations" => array:2 [
              0 => "RainLab\Translate\Models\Attribute"
              "name" => "model"
            ]
          ]
          +morphToMany: []
          +morphedByMany: []
          +attachOne: []
          +attachMany: []
          +hasManyThrough: []
          +hasOneThrough: []
          #emitterSingleEventCollection: []
          #emitterEventCollection: array:5 [
            "model.afterCreate" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeGetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.beforeSetAttribute" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.saveInternal" => array:1 [
              0 => array:1 [ …1]
            ]
            "model.afterDelete" => array:1 [
              0 => array:1 [ …1]
            ]
          ]
          #emitterEventSorted: array:1 [
            "model.beforeGetAttribute" => array:1 [
              0 => Closure($key) {#1769 …5}
            ]
          ]
          #extensionData: array:4 [
            "extensions" => array:1 [
              "RainLab\Translate\Behaviors\TranslatableModel" => RainLab\Translate\Behaviors\TranslatableModel {#1768 …8}
            ]
            "methods" => array:25 [
              "scopeTransWhere" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransWhereNoFallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "scopeTransOrderBy" => "RainLab\Translate\Behaviors\TranslatableModel"
              "initTranslatableContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslatable" => "RainLab\Translate\Behaviors\TranslatableModel"
              "noFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "withFallbackLocale" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslation" => "RainLab\Translate\Behaviors\TranslatableModel"
              "setAttributeTranslated" => "RainLab\Translate\Behaviors\TranslatableModel"
              "syncTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "translateContext" => "RainLab\Translate\Behaviors\TranslatableModel"
              "lang" => "RainLab\Translate\Behaviors\TranslatableModel"
              "hasTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributes" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableAttributesWithOptions" => "RainLab\Translate\Behaviors\TranslatableModel"
              "isTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getDirtyLocales" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslatableOriginals" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getTranslateDirty" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extend" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionApplyInitCallbacks" => "RainLab\Translate\Behaviors\TranslatableModel"
              "extensionExtendCallback" => "RainLab\Translate\Behaviors\TranslatableModel"
              "getCalledExtensionClass" => "RainLab\Translate\Behaviors\TranslatableModel"
            ]
            "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"
        +relativePath: "/storage/app/uploads/public/5d5/e7b/dc5/"
        +uploaded: DateTime @1566473180 {#1701
          date: 2019-08-22 11:26:20.0 UTC (+00:00)
        }
        +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



ZenWare\NovemberGallery\Classes\Gallery {#1601
  +type: "NOVEMBER_GALLERY"
  +folder: null
  +dbg: null
  +name: "U.S.A."
  +slug: "usa"
  +description: "Photos from the land of the free"
  +keywords: "city"
  +publishedAt: October\Rain\Argon\Argon @1566432000 {#1798
    #endOfTime: false
    #startOfTime: false
    #constructedObjectId: "000000002f0ef092000000007fb8c25a"
    #localMonthsOverflow: null
    #localYearsOverflow: null
    #localStrictModeEnabled: null
    #localHumanDiffOptions: null
    #localToStringFormat: null
    #localSerializer: null
    #localMacros: null
    #localGenericMacros: null
    #localFormatFunction: null
    #localTranslator: null
    #dumpProperties: array:3 [
      0 => "date"
      1 => "timezone_type"
      2 => "timezone"
    ]
    #dumpLocale: null
    #dumpDateProperties: null
    date: 2019-08-22 00:00:00.0 e (+00:00)
  }
  +createdAt: October\Rain\Argon\Argon @1566412275 {#1881
    #endOfTime: false
    #startOfTime: false
    #constructedObjectId: "000000002f0ef0cd000000007fb8c25a"
    #localMonthsOverflow: null
    #localYearsOverflow: null
    #localStrictModeEnabled: null
    #localHumanDiffOptions: null
    #localToStringFormat: null
    #localSerializer: null
    #localMacros: null
    #localGenericMacros: null
    #localFormatFunction: null
    #localTranslator: null
    #dumpProperties: array:3 [
      0 => "date"
      1 => "timezone_type"
      2 => "timezone"
    ]
    #dumpLocale: null
    #dumpDateProperties: null
    date: 2019-08-21 18:31:15.0 e (+00:00)
  }
  +updatedAt: October\Rain\Argon\Argon @1594133677 {#1795
    #endOfTime: false
    #startOfTime: false
    #constructedObjectId: "000000002f0ef097000000007fb8c25a"
    #localMonthsOverflow: null
    #localYearsOverflow: null
    #localStrictModeEnabled: null
    #localHumanDiffOptions: null
    #localToStringFormat: null
    #localSerializer: null
    #localMacros: null
    #localGenericMacros: null
    #localFormatFunction: null
    #localTranslator: null
    #dumpProperties: array:3 [
      0 => "date"
      1 => "timezone_type"
      2 => "timezone"
    ]
    #dumpLocale: null
    #dumpDateProperties: null
    date: 2020-07-07 14:54:37.0 e (+00:00)
  }
  +previewImage: ZenWare\NovemberGallery\Classes\GalleryItem {#1888
    -component: ZenWare\NovemberGallery\Components\GalleryHub {#1574
      +dbg: null
      +galleries: October\Rain\Support\Collection {#1891
        #items: array:2 [
          "budapest_gallery" => ZenWare\NovemberGallery\Classes\Gallery {#1639
            +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: October\Rain\Argon\Argon @1659452898 {#1697
              #endOfTime: false
              #startOfTime: false
              #constructedObjectId: "000000002f0ef135000000007fb8c25a"
              #localMonthsOverflow: null
              #localYearsOverflow: null
              #localStrictModeEnabled: null
              #localHumanDiffOptions: null
              #localToStringFormat: null
              #localSerializer: null
              #localMacros: null
              #localGenericMacros: null
              #localFormatFunction: null
              #localTranslator: null
              #dumpProperties: array:3 [
                0 => "date"
                1 => "timezone_type"
                2 => "timezone"
              ]
              #dumpLocale: null
              #dumpDateProperties: null
              date: 2022-08-02 15:08:18.0 e (+00:00)
            }
            +createdAt: October\Rain\Argon\Argon @1566473208 {#1774
              #endOfTime: false
              #startOfTime: false
              #constructedObjectId: "000000002f0ef17a000000007fb8c25a"
              #localMonthsOverflow: null
              #localYearsOverflow: null
              #localStrictModeEnabled: null
              #localHumanDiffOptions: null
              #localToStringFormat: null
              #localSerializer: null
              #localMacros: null
              #localGenericMacros: null
              #localFormatFunction: null
              #localTranslator: null
              #dumpProperties: array:3 [
                0 => "date"
                1 => "timezone_type"
                2 => "timezone"
              ]
              #dumpLocale: null
              #dumpDateProperties: null
              date: 2019-08-22 11:26:48.0 e (+00:00)
            }
            +updatedAt: October\Rain\Argon\Argon @1659452900 {#1773
              #endOfTime: false
              #startOfTime: false
              #constructedObjectId: "000000002f0ef179000000007fb8c25a"
              #localMonthsOverflow: null
              #localYearsOverflow: null
              #localStrictModeEnabled: null
              #localHumanDiffOptions: null
              #localToStringFormat: null
              #localSerializer: null
              #localMacros: null
              #localGenericMacros: null
              #localFormatFunction: null
              #localTranslator: null
              #dumpProperties: array:3 [
                0 => "date"
                1 => "timezone_type"
                2 => "timezone"
              ]
              #dumpLocale: null
              #dumpDateProperties: null
              date: 2022-08-02 15:08:20.0 e (+00:00)
            }
            +previewImage: ZenWare\NovemberGallery\Classes\GalleryItem {#1781
              -component: ZenWare\NovemberGallery\Components\GalleryHub {#1574}
              +title: "Erzsébet bridge"
              +description: "A view of Erzsébet bridge around dusk from Belgrád rakpart"
              +sortOrder: 80
              +file: null
              +octoberImageFile: RainLab\Translate\Models\MLFile {#1807
                +implement: array:1 [ …1]
                +translatable: array:2 [ …2]
                #table: "system_files"
                +morphTo: array:1 [ …1]
                #fillable: array:9 [ …9]
                #guarded: []
                #hidden: array:3 [ …3]
                #appends: array:2 [ …2]
                +data: null
                #autoMimeTypes: array:9 [ …9]
                +attributes: array:14 [ …14]
                #jsonable: []
                #dates: []
                +trimStrings: 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: []
                +hasMany: []
                +hasOne: []
                +belongsTo: []
                +belongsToMany: []
                +morphOne: []
                +morphMany: array:1 [ …1]
                +morphToMany: []
                +morphedByMany: []
                +attachOne: []
                +attachMany: []
                +hasManyThrough: []
                +hasOneThrough: []
                #emitterSingleEventCollection: []
                #emitterEventCollection: array:5 [ …5]
                #emitterEventSorted: array:1 [ …1]
                #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"
              +relativePath: "/storage/app/uploads/public/5d5/e7b/eba/"
              +uploaded: DateTime @1566473195 {#1783
                date: 2019-08-22 11:26:35.0 UTC (+00:00)
              }
              +url: "https://novembergallery.zenware.hu/storage/app/uploads/public/5d5/e7b/eba/5d5e7bebab0b6453042679.jpg"
            }
            +published: 1
            +items: October\Rain\Support\Collection {#1638
              #items: array:7 [
                0 => ZenWare\NovemberGallery\Classes\GalleryItem {#1695 …20}
                1 => ZenWare\NovemberGallery\Classes\GalleryItem {#1709 …20}
                2 => ZenWare\NovemberGallery\Classes\GalleryItem {#1704 …20}
                3 => ZenWare\NovemberGallery\Classes\GalleryItem {#1706 …20}
                4 => ZenWare\NovemberGallery\Classes\GalleryItem {#1702 …20}
                5 => ZenWare\NovemberGallery\Classes\GalleryItem {#1736 …20}
                6 => ZenWare\NovemberGallery\Classes\GalleryItem {#1700 …20}
              ]
            }
            +sortBy: "default"
            +sortDirection: "ASC"
            +url: "/demos/dynamic-gallery/budapest_gallery"
          }
          "usa" => ZenWare\NovemberGallery\Classes\Gallery {#1601}
        ]
      }
      +dirs: null
      +hubType: "CITY"
      +keyword: "CITY"
      +sortBy: "publishedOn"
      +sortDirection: "DESC"
      +maxItems: 100
      +linkUrl: "/demos/dynamic-gallery/%slug%"
      +openInNewTab: true
      +visualization: "title"
      +visualizationTemplate: ""
      +id: "galleryHub647e05f1cf6ce"
      +alias: "galleryHub"
      +name: "galleryHub"
      +isHidden: false
      +pluginIcon: null
      +componentCssClass: null
      +inspectorEnabled: true
      #dirName: "/zenware/novembergallery/components/galleryhub"
      #controller: Cms\Classes\Controller {#624
        #theme: Cms\Classes\Theme {#626
          #dirName: "demo"
          #configCache: array:5 [
            "name" => "Demo"
            "description" => "Demo OctoberCMS theme. Demonstrates the basic concepts of the front-end theming: layouts, pages, partials, components, content blocks, AJAX framework."
            "author" => "OctoberCMS"
            "homepage" => "http://octobercms.com"
            "code" => ""
          ]
        }
        #router: Cms\Classes\Router {#632
          #theme: Cms\Classes\Theme {#626}
          #url: "demo/gallery-hub"
          #parameters: []
          #urlMap: array:19 [
            0 => array:2 [
              "file" => "error.htm"
              "pattern" => "/error"
            ]
            1 => array:2 [
              "file" => "plugins.htm"
              "pattern" => "/demo/plugins"
            ]
            2 => array:2 [
              "file" => "ajax.htm"
              "pattern" => "/demo/ajax"
            ]
            3 => array:2 [
              "file" => "cookbook/blog-page.htm"
              "pattern" => "/blog/:slug"
            ]
            4 => array:2 [
              "file" => "cookbook/overriding-partials.htm"
              "pattern" => "/cookbook/overriding-partials"
            ]
            5 => array:2 [
              "file" => "cookbook/swiper-any-device.htm"
              "pattern" => "/cookbook/swiper-for-any-device"
            ]
            6 => array:2 [
              "file" => "demos/embedded-gallery-combined.htm"
              "pattern" => "/demo/embedded-gallery-combined"
            ]
            7 => array:2 [
              "file" => "demos/popup-lightbox.htm"
              "pattern" => "/demo/popup-lightbox"
            ]
            8 => array:2 [
              "file" => "demos/image-list-only.htm"
              "pattern" => "/demo/image-list-only"
            ]
            9 => array:2 [
              "file" => "demos/embedded-gallery-carousel.htm"
              "pattern" => "/demo/embedded-gallery-carousel"
            ]
            10 => array:2 [
              "file" => "demos/video-gallery.htm"
              "pattern" => "/demo/video-gallery"
            ]
            11 => array:2 [
              "file" => "demos/gallery-hub.htm"
              "pattern" => "/demo/gallery-hub"
            ]
            12 => array:2 [
              "file" => "demos/swiper.htm"
              "pattern" => "/demo/swiper"
            ]
            13 => array:2 [
              "file" => "demos/customization.htm"
              "pattern" => "/demo/customization"
            ]
            14 => 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$"
            ]
            15 => array:2 [
              "file" => "demos/embedded-gallery-slider.htm"
              "pattern" => "/demo/embedded-gallery-slider"
            ]
            16 => array:2 [
              "file" => "demos/embedded-gallery-tiles.htm"
              "pattern" => "/demo/embedded-gallery-tiles"
            ]
            17 => array:2 [
              "file" => "404.htm"
              "pattern" => "/404"
            ]
            18 => array:2 [
              "file" => "home.htm"
              "pattern" => "/"
            ]
          ]
          #routerObj: October\Rain\Router\Router {#738
            #routeMap: array:19 [
              "demos/embedded-gallery-carousel.htm" => October\Rain\Router\Rule {#1471
                #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-tiles.htm" => October\Rain\Router\Rule {#1478
                #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
              }
              "ajax.htm" => October\Rain\Router\Rule {#1451
                #ruleName: "ajax.htm"
                #rulePattern: "/demo/ajax"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/ajax"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "cookbook/overriding-partials.htm" => October\Rain\Router\Rule {#1463
                #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
              }
              "cookbook/swiper-any-device.htm" => October\Rain\Router\Rule {#1467
                #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-combined.htm" => October\Rain\Router\Rule {#1468
                #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/popup-lightbox.htm" => October\Rain\Router\Rule {#1469
                #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/image-list-only.htm" => October\Rain\Router\Rule {#1470
                #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
              }
              "plugins.htm" => October\Rain\Router\Rule {#1465
                #ruleName: "plugins.htm"
                #rulePattern: "/demo/plugins"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/plugins"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/video-gallery.htm" => October\Rain\Router\Rule {#1472
                #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/gallery-hub.htm" => October\Rain\Router\Rule {#1473
                #ruleName: "demos/gallery-hub.htm"
                #rulePattern: "/demo/gallery-hub"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/demo/gallery-hub"
                +segments: array:2 [ …2]
                +staticSegmentCount: 2
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "demos/swiper.htm" => October\Rain\Router\Rule {#1474
                #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/customization.htm" => October\Rain\Router\Rule {#1475
                #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" => October\Rain\Router\Rule {#1477
                #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" => October\Rain\Router\Rule {#1476
                #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
              }
              "404.htm" => October\Rain\Router\Rule {#1479
                #ruleName: "404.htm"
                #rulePattern: "/404"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/404"
                +segments: array:1 [ …1]
                +staticSegmentCount: 1
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "error.htm" => October\Rain\Router\Rule {#1440
                #ruleName: "error.htm"
                #rulePattern: "/error"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/error"
                +segments: array:1 [ …1]
                +staticSegmentCount: 1
                +dynamicSegmentCount: 0
                +wildSegmentCount: 0
              }
              "cookbook/blog-page.htm" => October\Rain\Router\Rule {#1466
                #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" => October\Rain\Router\Rule {#1480
                #ruleName: "home.htm"
                #rulePattern: "/"
                #conditionCallback: null
                #afterMatchCallback: null
                +staticUrl: "/"
                +segments: []
                +staticSegmentCount: 0
                +dynamicSegmentCount: 0
                 …1
              }
            ]
            #matchedRouteRule: October\Rain\Router\Rule {#1473}
            #parameters: []
          }
        }
        #loader: Cms\Twig\Loader {#635
          #obj: Cms\Classes\ComponentPartial {#4137
            #component: ZenWare\NovemberGallery\Components\GalleryHub {#1577
              +dbg: "/var/www/novembergallery.zenware.hu/public_html/storage/app/media/galleries"
              +galleries: October\Rain\Support\Collection {#3962
                #items: array:11 [
                  "budapest" => ZenWare\NovemberGallery\Classes\Gallery {#2888 …16}
                  "plants-and-flowers" => ZenWare\NovemberGallery\Classes\Gallery {#2372 …16}
                  "travels-and-landscapes" => ZenWare\NovemberGallery\Classes\Gallery {#2882 …16}
                  "budapest_gallery" => ZenWare\NovemberGallery\Classes\Gallery {#2893 …16}
                  "cute-cat-pix" => ZenWare\NovemberGallery\Classes\Gallery {#2887 …16}
                  "mountains" => ZenWare\NovemberGallery\Classes\Gallery {#3050 …16}
                  "patterns-nature" => ZenWare\NovemberGallery\Classes\Gallery {#3096 …16}
                  "philippines" => ZenWare\NovemberGallery\Classes\Gallery {#3235 …16}
                  "usa" => ZenWare\NovemberGallery\Classes\Gallery {#3450 …16}
                  "waters" => ZenWare\NovemberGallery\Classes\Gallery {#3592 …16}
                  "weddings" => ZenWare\NovemberGallery\Classes\Gallery {#3699 …16}
                ]
              }
              +dirs: array:3 [
                0 => "/var/www/novembergallery.zenware.hu/public_html/storage/app/media/galleries/budapest"
                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/travels-and-landscapes"
              ]
              +hubType: "[ALL]"
              +keyword: false
              +sortBy: "name"
              +sortDirection: "ASC"
              +maxItems: 100
              +linkUrl: "/demos/dynamic-gallery/%slug%"
              +openInNewTab: true
              +visualization: "custom"
              +visualizationTemplate: ""
              +id: "galleryHub4647e05f250374"
              +alias: "galleryHub4"
              +name: "galleryHub"
              +isHidden: false
              +pluginIcon: null
              +componentCssClass: null
              +inspectorEnabled: true
              #dirName: "/zenware/novembergallery/components/galleryhub"
              #controller: Cms\Classes\Controller {#624}
              #page: Cms62e93e1ee57c5525884294_817b82088ca0ecfdb24884e8d2336667Class {#1561
                +page: Cms\Classes\Page {#1207
                  #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"
                  ]
                  #parsable: array:2 [
                    0 => "meta_title"
                    1 => "meta_description"
                  ]
                  +apiBag: []
                  +rules: array:2 [
                    "title" => "required"
                    "url" => "required"
                  ]
                  +components: array:4 [
                    "galleryHub" => ZenWare\NovemberGallery\Components\GalleryHub {#1574}
                    "galleryHub2" => ZenWare\NovemberGallery\Components\GalleryHub {#1575
                      +dbg: null
                      +galleries: October\Rain\Support\Collection {#2370
                        #items: array:3 [
                          "budapest_gallery" => ZenWare\NovemberGallery\Classes\Gallery {#1903 …16}
                          "philippines" => ZenWare\NovemberGallery\Classes\Gallery {#1635 …16}
                          "waters" => ZenWare\NovemberGallery\Classes\Gallery {#2050 …16}
                        ]
                      }
                      +dirs: null
                      +hubType: "WATER"
                      +keyword: "WATER"
                      +sortBy: "name"
                      +sortDirection: "ASC"
                      +maxItems: 100
                      +linkUrl: "/demos/dynamic-gallery/%slug%"
                      +openInNewTab: true
                      +visualization: "titleOnly"
                      +visualizationTemplate: ""
                      +id: "galleryHub2647e05f244e0b"
                      +alias: "galleryHub2"
                      +name: "galleryHub"
                      +isHidden: false
                      +pluginIcon: null
                      +componentCssClass: null
                      +inspectorEnabled: true
                      #dirName: "/zenware/novembergallery/components/galleryhub"
                      #controller: Cms\Classes\Controller {#624}
                      #page: Cms62e93e1ee57c5525884294_817b82088ca0ecfdb24884e8d2336667Class {#1561}
                      #externalPropertyNames: []
                      +implement: []
                      #extensionData: array:4 [
                        "extensions" => []
                        "methods" => []
                        "dynamicMethods" => []
                        "dynamicProperties" => []
                      ]
                      #assets: array:3 [
                        "js" => array:1 [ …1]
                        "css" => array:1 [ …1]
                        "rss" => []
                      ]
                      #assetBundles: array:2 [
                        "js" => []
                        "css" => []
                      ]
                      +assetPath: "/plugins/zenware/novembergallery"
                      +assetLocalPath: null
                      #emitterSingleEventCollection: []
                      #emitterEventCollection: []
                      #emitterEventSorted: []
                      #dependencyResolver: null
                      #properties: array:6 [
                        "hubType" => "WATER"
                        "maxItems" => "100"
                        "linkUrl" => "/demos/dynamic-gallery/%slug%"
                        "openInNewTab" => "1"
                        "template" => ""
                        "visualization" => "titleOnly"
                      ]
                    }
                    "galleryHub3" => ZenWare\NovemberGallery\Components\GalleryHub {#1576
                      +dbg: null
                      +galleries: October\Rain\Support\Collection {#2849
                        #items: array:3 [
                          "budapest_gallery" => ZenWare\NovemberGallery\Classes\Gallery {#2382 …16}
                          "philippines" => ZenWare\NovemberGallery\Classes\Gallery {#1893 …16}
                          "waters" => ZenWare\NovemberGallery\Classes\Gallery {#2529 …16}
                        ]
                      }
                      +dirs: null
                      +hubType: "WATER"
                      +keyword: "WATER"
                      +sortBy: "name"
                      +sortDirection: "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: "galleryHub3647e05f24935f"
                      +alias: "galleryHub3"
                      +name: "galleryHub"
                      +isHidden: false
                      +pluginIcon: null
                      +componentCssClass: null
                      +inspectorEnabled: true
                      #dirName: "/zenware/novembergallery/components/galleryhub"
                      #controller: Cms\Classes\Controller {#624}
                      #page: Cms62e93e1ee57c5525884294_817b82088ca0ecfdb24884e8d2336667Class {#1561}
                      #externalPropertyNames: []
                      +implement: []
                      #extensionData: array:4 [
                        "extensions" => []
                        "methods" => []
                        "dynamicMethods" => []
                        "dynamicProperties" => []
                      ]
                      #assets: array:3 [
                        "js" => array:1 [ …1]
                        "css" => array:1 [ …1]
                        "rss" => []
                      ]
                      #assetBundles: array:2 [
                        "js" => []
                        "css" => []
                      ]
                      +assetPath: "/plugins/zenware/novembergallery"
                      +assetLocalPath: null
                      #emitterSingleEventCollection: []
                      #emitterEventCollection: []
                      #emitterEventSorted: []
                      #dependencyResolver: null
                      #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" => ZenWare\NovemberGallery\Components\GalleryHub {#1577}
                  ]
                  +settings: array:8 [
                    "url" => "/demo/gallery-hub"
                    "layout" => "default"
                    "title" => "Gallery Hub"
                    "is_hidden" => "0"
                    "description" => null
                    "meta_title" => null
                    "meta_description" => null
                    "components" => array:4 [
                      "galleryHub" => array:6 [ …6]
                      "galleryHub galleryHub2" => array:5 [ …5]
                      "galleryHub galleryHub3" => array:6 [ …6]
                      "galleryHub galleryHub4" => array:5 [ …5]
                    ]
                  ]
                  +viewBag: []
                  #passthru: array:5 [
                    0 => "lists"
                    1 => "where"
                    2 => "sortBy"
                    3 => "whereComponent"
                    4 => "withComponent"
                  ]
                  #isCompoundObject: true
                  #viewBagCache: Cms\Components\ViewBag {#1219
                    +isHidden: true
                    +id: null
                    +alias: null
                    +name: "viewBag"
                    +pluginIcon: null
                    +componentCssClass: null
                    +inspectorEnabled: true
                    #dirName: "/cms/components/viewbag"
                    #controller: null
                    #page: null
                    #externalPropertyNames: []
                    +implement: []
                    #extensionData: array:4 [
                      "extensions" => []
                      "methods" => []
                      "dynamicMethods" => []
                      "dynamicProperties" => []
                    ]
                    #assets: array:3 [
                      "js" => []
                      "css" => []
                      "rss" => []
                    ]
                    #assetBundles: array:2 [
                      "js" => []
                      "css" => []
                    ]
                    +assetPath: "/plugins/cms"
                    +assetLocalPath: null
                    #emitterSingleEventCollection: []
                    #emitterEventCollection: []
                    #emitterEventSorted: []
                    #dependencyResolver: null
                    #properties: []
                  }
                  +attributeNames: []
                  +customMessages: []
                  #themeCache: Cms\Classes\Theme {#1571
                    #dirName: "demo"
                    #configCache: null
                  }
                  #datasource: "demo"
                  +attributes: array:16 [
                    "fileName" => "demos/gallery-hub.htm"
                    "content" => """
                      url = "/demo/gallery-hub"\n
                      layout = "default"\n
                      title = "Gallery Hub"\n
                      is_hidden = 0\n
                      \n
                      [galleryHub]\n
                      hubType = "CITY"\n
                      sortBy = "publishedOnDESC"\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" => 1659452952
                    "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
                      }
                      """
                    "url" => "/demo/gallery-hub"
                    "layout" => "default"
                    "title" => "Gallery Hub"
                    "is_hidden" => "0"
                    "galleryHub" => array:6 [
                      "hubType" => "CITY"
                      "sortBy" => "publishedOnDESC"
                      "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"
                    ]
                    "description" => null
                    "meta_title" => null
                    "meta_description" => null
                  ]
                  #original: array:13 [
                    "fileName" => "demos/gallery-hub.htm"
                    "content" => """
                      url = "/demo/gallery-hub"\n
                      layout = "default"\n
                      title = "Gallery Hub"\n
                      is_hidden = 0\n
                      \n
                      [galleryHub]\n
                      hubType = "CITY"\n
                      sortBy = "publishedOnDESC"\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