Masonry Items & Images

itemwidth

The width for a grid item automatically defaults to the width of the image. You can set the width for the grid item.  The caption and the excerpt will stretch to fit the grid item while the image will default to it’s native width and height unless specified otherwise.

[featured_image_pro itemwidth='300px'  showcaptions=true excerpt=true ]

To stretch the image, set imagewidth to 100% and the item height to auto to maintain perspective.

[featured_image_pro itemwidth='300px'  showcaptions=true excerpt=true imagewidth="100%" imageheight="auto" ]

marginbottom

this controls the margin under each masonry item.

marginbottom defaults to 5px

A grid with a bottom margin of 15px.

[featured_image_pro marginbottom='15px']


imagesize

The WordPress image size. Thumbnail, Medium, Large, or custom sizes. Use the shortcode generator to generate shortocode for a image size.

imagesize defaults to thumbnail

A grid with the imagesize set to medium.

[featured_image_pro imagesize='medium'  imagewidth='300px' imageheight='auto' columnwidth='300']

 


imagewidth, imageheight

– Set a fixed image width and height. Use auto px, %, em, etc.  The image width works with the columnwidth. If your columnwidth is 150 and your imagewidth is 200, your image will span two columns. Use the sidebar widget to see how these two settings work together prior to creating your shortcode.

imagewidth and imageheight default to the individual image width and height.

A grid with different sized images, the width is set to 150 and the height is set to auto so that it is proportional 

[featured_image_pro imagesize='medium' imagewidth='150px' imageheight='auto' ]

 


maxwidth

maxheight

Set a maximum image width and height. Again, these values work in concert with the columnwidth.

There is no default value for maxwidth and maxheight

A grid with images that have a max width of 300px and a proportional height of auto. 

[featured_image_pro imagesize='medium' maxwidth='300px' imageheight='auto']


border

– the width of the border. Note that the border adds to the width of an image. A border may need to be compensated for in the width and height of the image (100%/auto) or the column width (add the border width x 2).

border defaults to none

Images with border width of px – changed columnwidth by adding 4 px

[featured_image_pro border='1' columnwidth=154 showcaptions=true ]

Images with border width of 2px – set imagewidth to 100% or less than the width of the itemwidth, set imageheight = auto to maintain perspective

[featured_image_pro border='2' columnwidth=150 itemwidth='150px' imagewidth='100%'  imageheight='auto' showcaptions=true ]