Thumbnails

 

Customize your galleries thumbnails for your Fluid Infinity gallery. Within the Thumbnails section in the Container widget,  you can control the thumbnail settings, height, effects and more. 

 

Screen_Shot_2018-01-04_at_4.59.29_PM.png

 

Index                    

Settings

Breakpoints

Height

Text

Icon

Hover Effect

Lazy Load

Sorting Animation

 


 

Settings

 

Screen_Shot_2018-01-04_at_4.51.42_PM.png

 

Within the Settings drop-down, you may adjust the appearance of your Gallery on load by:

  • Selecting its on-load Filter
  • Styling the containers of each thumbnail
  • Customizing the on-load Loading Bar
  • Adjusting the space above the Gallery when a button is clicked

 

Appearance

Adjust the alignment, spacing and corner radius of the thumbnails within your Gallery. Select the option to place thumbnails within the Gallery randomly. By selecting this option you opt to disable the Comment feature from your Gallery. 

 

Loading Bar

The Loading Bar appears on the load of the page and can be styled through the Container widget. Select the bars thickness, color, and background. 

 

Select the checkbox for the page to scroll to the top of the gallery when a button, like a filter, is selected. Use the Gap entry field to place padding above the gallery when this function is selected.


 

Breakpoints

 

Screen_Shot_2018-01-04_at_4.51.53_PM.png

 

Use the Breakpoints dropdown to set the number of thumbnails in one row at each breakpoint. The first breakpoint will be your largest breakpoint, second your second largest and so on. As the browsers width increases and decreases, the number of thumbnails per row will shift accordingly.  

 

Height

 

Screen_Shot_2018-01-04_at_4.52.11_PM.png

 

Use the drop-down found within the Height section to select whether you would like for your gallery thumbnails to use Pixel, Percentage or Proportional heights. Each measurement can be adjusted for each breakpoint within your project. 
 

Pixel

Use a set height in pixels for each breakpoint.

Percentage

Use a percentage of the current browsers height for each gallery item.

Proportional

Adhere to the items actual proportion as the browser dimensions change.

 

Text

 

Screen_Shot_2018-01-04_at_4.52.28_PM.png

 

Use the Text drop-down area to change your thumbnails title and description alignment, animation, and spacing. In this area you can also choose to include or exclude either the title, description or both from your view on your thumbnails.

 

Position

Align the title and description of each thumbnail to the left, center or right of the thumbnail. Select one of the dropdown options to apply to all thumbnails within your gallery.

Animation

Select a pre-made animation to occur when a thumbnail is hovered over. From these options, the title and description of your thumbnails can either move in or out of the thumbnails container. 

 

Text is moved from view on thumbnail: 

Fade Out

Move Out

 

Text moves into view on thumbnail:

Fade In

Move In

 

Spacing

The spacing of the thumbnail references the padding and margin of the text given to each thumbnail. Within the Thumbnail text box widget, you can alter the styling of the text as far as color, font, and size. Here, use the areas to control the spacing of each text box item. Each uses pixels as the base unit of measurement.

 

Inner Spacing

Inner spacing adds padding into the container of the whole text-frame. Use this area to add space around the text within its container.

Outer Spacing

Outer spacing adds a margin on the perimeter of the container of the text-frame in reference to its thumbnail container. Use this area to add space around the entirety of the textbox.

Space Between

The space between the title and description is the area below the title and above the description. Use this area to add vertical spacing between the title and description within the textbox.  

 

Icon

 

Screen_Shot_2018-01-04_at_4.52.40_PM.png

 

Use the icon dropdown area to apply an icon to each thumbnail included in your gallery. Then, further customize the icons size, position, spacing and animation for each thumbnail in one place. 

 

Size

Determine the size (in pixels) of your thumbnails icon. This value will be used for all breakpoints so it would be best if not created too large to accommodate for smaller breakpoints.

Position

Select from the position drop-down where your icon will be placed in reference to each thumbnails container. From the drop-down, you have the option to align your icon to the center, top and bottom of each thumbnail. 

Spacing

Use the spacing around your icon area to give a margin to your icon on each thumbnail. This spacing will be in reference to where the icon is determined to be placed through the positioning above.

Animation

Select a pre-made animation to add to your icon when the thumbnail has been hovered over. These animations are independent of the animations given to the thumbnails using the text animation options found within the Container widget. 

 

Icon starts in view on thumbnail:

Fade Out

Move Out

Scale Out

 

Icon ends in view on thumbnail:

Fade In

Move In

Scale In 

 

Hover Effect

 

Screen_Shot_2018-01-04_at_4.53.12_PM.png

 

Effects applied to your thumbnails once they are hovered over are mastered through the Hover Effect dropdown area. Use this section to customize the setting for the overlay, timing and scaling of each thumbnails effects. 

Timing

Control the duration (in seconds) of your thumbnails transitions once the thumbnail has been hovered over. Fast transitions will use smaller numbers like .2 and slower transitions will use larger numbers like 2.

Overlay

The overlay is a cover over your thumbnail when hovered. Use the Overlay section to change the color, blending filter, and the opacity of the overlay when normal and hovered. 

Scale

The scale of your image will shift when hovered based on the value you input into the Scale on Hover area. If you would like your image to scale down, use values less than 1. If you would like your image to scale up, use values greater than 1. For instance, if you would like your image to scale up 200% or 2x its loaded size, input 2 into the scale area.

 

LazyLoad

 

Screen_Shot_2018-01-04_at_4.53.34_PM.png

 

LazyLoad allows your images to be loaded on to the page as they are needed, speeding up the time it takes for your page to load. You can deselect this feature from the LazyLoad settings.

 

Methods & Assigning

 
The Lazy Load feature can be activated by scrolling to the bottom of the gallery or by clicking the Load More button. Choose the Method of loading you would like to use through the drop-down provided within the Lazy Load settings area. 
 
To make your Load More button another object:
  1. Add a Graphic Style Name for the button into the Lazy Load section
  2. Create the object your Load More button will be. 
  3. Select the Load More button and create a Graphic Style that is verbatim the Style Name you inputted into the widget. 
 
Below this section input the number of thumbnails you want the gallery to include on-load of the page and how many images the Load More button or scrolling will add to the gallery.

 

Loading Animation

Use this section to first select where you would like to apply the loading animation that occurs when more thumbnails are being added to the gallery within the page. Here, also, select the pre-made shape of the animation of your gallery.

Further customize this animations loading color, background color and opacity and its size and position on the page. At the bottom of Gallery will place your animation below the already loaded items. Centered on the page will place your loading animation vertically and horizontally centered on the page as more items are loaded to the gallery. 

Sorting Animation

 

Screen_Shot_2018-01-04_at_4.53.51_PM.png

 

Upon load of the page and every load of additional items to the gallery, there is a transition that can be customized through the Sorting Animation area. Use the following areas to create smooth transitions as thumbnails are added to your gallery.

Timing

Input (in seconds) how long your gallery sorting animation should be and the delay of each item as it is added to the page. 

Transforming

Transform each thumbnail using rotation, scale and directional values as each thumbnail comes into view. Each value represents the positioning and orientation of each thumbnail upon load of page. For instance if you would like your thumnails to scale in from 200% and rotate 45 degrees then you would input 45 into Rotation and 2 into scale.

Have more questions? Submit a request
Back to FAQ