Contents
columnwidth
the width of each column in the grid. The image width spans the columns.
In version 1, the columnwidth value defaulted to 150.
In version 2 (and up), the columnwidth value defaults to 1 if there is no gutter. If there is a gutter, the plugin first checks for an itemwidth and sets the columnwidth to the itemwidth. If this is not set, the columnwidth defaults to the largest width of all of the items. The columnwidth must be greater than the gutter width & able to accommodate all of the images.
Default grid
Display thumbnail images (150 x 150) with a default gutter & margin of 5px – Column width defaults to the widest image width . In this case, the images are all the same width making the columnwidth 150px
[featured_image_pro ]
Default columnwidth with no gutter
Display thumbnail images with no gutter or margin. Column width defaults to the 1 . In this case, the images are all the same width.
[featured_image_pro imagesize='thumbnail' gutter=0 marginbottom=0]Default columnwidth when the itemwidth option is used with a gutter
Display thumbnail images with a default gutter & margin of 5px and an itemwidth of 300 and a border for illustration – Column width defaults to the item width
[featured_image_pro imagesize='thumbnail' border=1 padimage=true itemwidth='300px' ]Default column Width when the itemwidth option is used with no gutter
Display medium images with no gutter and an itemwidth of 300 – Column width defaults to 1. Image stretches in the item and has padding.
[featured_image_pro imagesize='medium' itemwidth='300px' imagewidth='100%' imageheight='auto' border=1 padimage=true gutter=0 marginbottom=0]
Image width = column width
Both the imagewidth and the columnwidth are the same.
[featured_image_pro imageheight='150px' columnwidth=150 imagewidth='150px']Image width less than column width, centered
The imagewidth is less than the columnwidth and is centered within the column width
[featured_image_pro columnwidth=200 imagewidth='150px' imageheight='150px']Image width greater than column width
The imagewidth is greater than the columnwidth may cause images to overlap or to have large gaps especially when the images have different widths and heights.
[featured_image_pro columnwidth=150 imagesize="medium" imagewidth='200px' imageheight='auto' ]Item width greater than column width
You can set the image inside of the item to a fixed value of 100% and the height to auto for a clean look.
[featured_image_pro columnwidth=150 itemwidth='200px' imagesize="medium" maxwidth='200px' imageheight='auto']Here the columnwidth is 100, the itemwidth 200px. The witdh of the image is set to stretch to the itemwidth and the height is auto.
[featured_image_pro columnwidth=100 itemwidth='200px' imagesize="medium" imagewidth='100%' imageheight='auto']Default column width when the image width is auto.
Estimated column widths work very well unless the items are of different widths. The images used for these examples are of varying widths.
In there are items of varying widths, if there is a gutter, there will be wide gaps between some of the items. It’s better to set the gutter and margin to 0 and to use the padimage option instead.
Display medium images with no gutter or margin Column width defaults to 1
[featured_image_pro imagesize='medium' gutter=0 marginbottom=0]Display medium images with a gutter of 15 – Column width defaults to the widest image width
[featured_image_pro imagesize='medium' gutter=15]Display medium images with a fixed height of 150px and auto width. The gutter is 0, the margin is 0 with padding enabled. – Column width defaults to 1
[featured_image_pro imagesize='medium' gutter=0 margin=0 padimage=true imageheight='150px']Display medium images with a fixed height of 150px and auto width. The gutter is 0, the margin is 0 with padding disabled . – Column width defaults to 1
[featured_image_pro imagesize='medium' gutter=0 margin=0 imageheight='150px']