Contents
Basic Settings
responsive
is a percentage value that can be used to automatically create a responsive grid. Columns may not calculate exactly. Increase the gutter or reduce the percentage by 1 or 2 to get the number of columns that you want in the grid.
basic responsive grid with captions
[featured_image_pro responsive='25%' gutter='10' showcaptions=true]
grid items with images of different sizes and a 1px gutter.
[featured_image_pro responsive='23%' imagesize='medium' itemheight='auto' gutter=1 marginbottom=0]
Advanced Responsive Settings: Percent Position
There are only two options that are required, percentposition and itemwidth. These two items are the equivalent to setting responsive to a percentage value.
When using percent position some different options need to be set
percentposition
creates a responsive grid where the itemwidth is based on a percentage of the container.
percentposition is a true/false value that defaults to false
itemwidth
Sets the size of each item and must be set to a percentage when percentposition is true.
25% width of each item with no gutter
[featured_image_pro percentposition=true itemwidth='24%']To add a gutter, use calc in the width. Always leave spaces between the dash and the values. calc(percentvalue – guttervalue)
each grid item 25% with a gutter of 10px
[featured_image_pro percentposition=true itemwidth='calc(25% - 10px)' gutter=10]These are additonal settings that are available if percentposition=true and require some understanding of the masonry.js plugin.
The sizerwidth setting is available but not supported in this context. columnwidth is not supported in this context. Do not modify these settings unless you know what you are familiar with the masonry plugin and they are not guaranteed to work. These settings are not currently supported in this context and are not guaranteed to work. The following settings should not be changed:
fitwidth
– defaults to false (The container will always be 100% and does not need to be resized)
imagewidth
= defaults to 100% – the image width will stretch to the full width of the item