Video Gallery
Use this gallery to display videos inline. You can choose to upload your videos to your website or to show videos hosted on YouTube/Vimeo/Wistia.
"Thumbnails" Layout
Gallery
Settings used for this example:
Component Inspector
| Gallery Selector/ID | #videos |
| Gallery Layout | Thumbnails |
| Gallery Width | 1100 |
| Gallery Height | 450 |
Page HTML
<div id="videos">
<div data-type="youtube"
data-title="Waimea cliff jump"
data-description="Waimea cliff jump description"
data-thumb="https://i.ytimg.com/vi/sogCtOe8FFY/mqdefault.jpg"
data-image="https://i.ytimg.com/vi/sogCtOe8FFY/sddefault.jpg"
data-videoid="sogCtOe8FFY" ></div>
<!-- Further links to videos omitted for brevity... -->
</div>Custom CSS
.ug-theme-video {
margin: 0 auto;
}Explanation: Instead of picking a media folder, we set the "Gallery Selector/ID" option in the component inspector. We then have to add a div that matches the specified selector, and add the gallery items as described here. The div that we added is shown in the Page HTML box above.
We also set the gallery layout to "Thumbnails" and an explicit width and height for the gallery that matches the proportions of our videos with some space on the side for the thumbnails. We add a CSS rule (in a stylesheet that we manually add to our layout) to center all galleries with the "video" theme within their container.
// Options that can be set from the OctoberCMS component inspector:
gallery_theme: "video" //This is included automatically for all "video" galleries
theme_skin: "right-thumb" //right-thumb | right-title-only | right-no-thumb
// - please use the OctoberCMS component inspector to set this option!
gallery_width:900, //gallery width - please use the OctoberCMS component inspector to set this option!
gallery_height:500, //gallery height - please use the OctoberCMS component inspector to set this option!"Titles Only" Layout
Gallery
Settings used for this example:
Component Inspector
| Gallery Selector/ID | #videos-2 |
| Gallery Layout | Titles Only |
Page HTML
<div id="videos-2">
<div data-type="youtube"
data-title="Waimea cliff jump"
data-description="Waimea cliff jump description"
data-thumb="https://i.ytimg.com/vi/sogCtOe8FFY/mqdefault.jpg"
data-image="https://i.ytimg.com/vi/sogCtOe8FFY/sddefault.jpg"
data-videoid="sogCtOe8FFY" ></div>
<!-- Further links to videos omitted for brevity... -->
</div>Custom CSS
.ug-theme-video {
margin: 0 auto;
}Explanation: Again we set the "Gallery Selector/ID" option in the component inspector and add a div that matches the specified selector, and add the gallery items inside that div as described here. The div that we added is shown in the Page HTML box above.
We also set the gallery layout to "Titles Only". We add a CSS rule (in a stylesheet that we manually add to our layout) to center all galleries with the "video" theme within their container.
// Options that can be set from the OctoberCMS component inspector:
gallery_theme: "video" //This is included automatically for all "video" galleries
theme_skin: "right-title-only" //right-thumb | right-title-only | right-no-thumb
// - please use the OctoberCMS component inspector to set this option!
gallery_width:900, //gallery width - please use the OctoberCMS component inspector to set this option!
gallery_height:500, //gallery height - please use the OctoberCMS component inspector to set this option!"No Thumbnails" Layout
Gallery
Settings used for this example:
Component Inspector
| Gallery Selector/ID | #videos-2 |
| Gallery Layout | No Thumbnails |
Page HTML
<div id="videos-3">
<div data-type="youtube"
data-title="Waimea cliff jump"
data-description="Waimea cliff jump description"
data-thumb="https://i.ytimg.com/vi/sogCtOe8FFY/mqdefault.jpg"
data-image="https://i.ytimg.com/vi/sogCtOe8FFY/sddefault.jpg"
data-videoid="sogCtOe8FFY" ></div>
<!-- Further links to videos omitted for brevity... -->
</div>Custom CSS
.ug-theme-video {
margin: 0 auto;
}Explanation: This is the same as the previous gallery excep that we set the gallery layout to "No Thumbnails".
// Options that can be set from the OctoberCMS component inspector:
gallery_theme: "video" //This is included automatically for all "video" galleries
theme_skin: "right-no-thumb" //right-thumb | right-title-only | right-no-thumb
// - please use the OctoberCMS component inspector to set this option!
gallery_width:900, //gallery width - please use the OctoberCMS component inspector to set this option!
gallery_height:500, //gallery height - please use the OctoberCMS component inspector to set this option!Additional Options
All Available Component Inspector Options for Video Galleries
| Code | OctoberCMS Component Inspector Property | Description |
|---|---|---|
| alias | Alias | Standard OctoberCMS stuff, you refer to the component in your page via this unique identifier, the default is “embeddedGallery” but you can change it to anything you want (don’t use spaces or special characters though!) |
| mediaFolder | Media Folder | Select the folder that you uploaded the images to in the OctoberCMS Media manager. Only folders under the “Base Media Folder” set on the November Gallery settings page are valid. |
| maxItems | Max Images | The maximum number of images to display |
| sortBy | Order by | Order to display the gallery items in; note: Image Title, Description, and Sort Order only work for images uploaded using the Galleries page! Options are: (1) title / Image Title (2) description / Image Description (3) sortOrder / Image Order in Gallery (4) width / Image Width (5) height / Image Height (6) orientation / Image Orientation (7) fileName / Filename (8) fileSize / File Size (9) uploaded / Date/Time Uploaded; and all options are also available in reverse order (append DESC onto the option code). |
| videoGalleryItemsSelector | Gallery Selector/ID | JQuery selector for the element that holds the video items; for example: #videos |
| videoGalleryLayout | Gallery Layout | Select a gallery layout; possible values are: (1) default / Default (use the gallery layout set on the plugin settings page) (2) video_gallery_right_thumb / Thumbnails (3) video_gallery_right_title_only / Titles Only (4) video_gallery_right_no_thumb / No Thumbnails |
| additionalVideoGalleryOptions | Script Options | Additional JS options that you want passed onto the UniteGallery script, for example: theme_autoplay: true |
| imageResizerHeight | Thumbnail Height | Height of the generated thumbnail; Leave empty or set to 0 to only constrain the image by height; leave both width and height empty to fall back on the values set on the backend plugin configuration page |
| imageResizerMode | Thumbnail Mode | Select how to resize your images into thumbnails, or select “default” to use the thumbnail mode set on the plugin settings page; possible values are: (1) Default (2) Exact (3) Portrait (4) Landscape (5) Auto (6) Crop |
| galleryWidth | Gallery Width | Can be a number (pixel lenght) or a percent (of the parent container). Leave empty to fall back on the values set on the backend plugin configuration page |
| galleryHeight | Gallery Height | Only applies to “Combined” and “Slider” galleries! Can be a number (pixel lenght) or a percent (of the parent container). Leave empty to fall back on the values set on the backend plugin configuration page |
Script options applicable to all "Video" galleries...
theme_autoplay: false, //autoplay videos at start. true / false. Don't working on mobiles. theme_disable_panel_timeout:2500 //How much time the right panel will be disabled. in ms
You can read more and see a lot of examples at the UniteGallery website!