Grids Overview

What are Grids?

ProPhoto grids are grids of image-based links which take your visitors to various types of content.  You can link to various types of content within your site, or to custom URLs anywhere you like online.  With the large number of customization options available for styling your grids, the design possibilities are almost endless.  Grids are great for displaying post excerpts, portfolio pages, client areas, blog categories, the most popular blog posts on your blog, external URL links, and for creating slick looking pseudo-menus on pages.

ProPhoto Grids are not photo galleries. They are not designed for displaying images alone. Rather, they are a navigation tool allowing you use thumbnail images to link to wherever you want. Consider a Lightbox Gallery for a photo grid layout.

How to add grids

You can insert a ProPhoto “Grid” into any post or page, or any area that accepts widgets.
Click here to learn how to add Grids.

Choosing images for the grid

When linking to a page or a post, ProPhoto will automatically try to create the grid link thumbnail image.  The thumbnail will be created from an uploaded image in this order if priority.

  1. If added, a “Featured” Image for the page/post is used. Changing the Featured Image changes the grid image.
  2. The first image inserted directly into the page or post. (not just from a gallery placed inside) 
  3. The fallback grid image uploaded to ”ProPhoto” > “Customize” > “Grids” > “Featured and fallback images”
    (if options 1 and 2 aren’t present or if the inserted image is larger than 6000 total pixels – width-plus-height)

For a galleries grid, the first image in the gallery will be used as the grid image.

For a categories grid, a featured or first image from the most recent post in that category will be used. But that image can be overridden by uploading a category specific grid thumbnail image to “ProPhoto” > “Customize” > “Grids” > “Featured and fallback images”

For a custom grid, you simply upload your grid images to “ProPhoto” > “Customize” > “Grids” > “Custom Grid Items”.

Thumbnail size

Since the ProPhoto Grid tool was created to make it easy to get neatly-organized grids, the thumbnail size is figured out and created automatically. Since Grids are sized to fit in the area they are placed, and are designed to fill the width of that space, the size of the grid thumbnail images is figured out based on things like the width of the space, the number of columns used, the gap or space applied between grid items, and any extra padding or borders added to your grid style being used.

If you want to change the size of your grid thumbnails, you’ll need to change the number of columns for your grid, or the gap/spacing between grid items. Take note that if your image is not large enough to fill the size of your grid thumbnail area, it will not be enlarged to fit – the small image will default to the top-left of the space where it should appear and will simply have extra unused space to the side or below. Use larger images if you have this problem.

Grid options

When creating a grid in either a widget or content area, you’ll have a number of options to choose from.  Each of these options areas is described below.

grid-options-popup

Grid creation options, each area explained below:

Area 1: Grid Type

There are seven different grid types to choose from. Click each of the types below for more information:

Recent Posts Grid
Recent Posts From Category
Galleries Grid
Categories Grid
Select Posts/Pages Grid
Popular Posts Grid
Custom Grid

Several Grid types allow you to slide down the content when you click each grid item, too – for more information learn about Grid slide-down content.

Area 2: Grid Style

Grids have “styles” which are ways of viewing grid items.  ProPhoto has two ways to style your grid items: Text below shows an image with Title and Text appearing below the grid image, while Overlaid text on hover shows only an image until visitors hover/touch the image, revealing Title and Text superimposed. “Text below” style also offers an optional comment count display for blog posts, and allows toggling excerpt text on/off.

Each of these styles can have a customized appearance in two separate ProPhoto areas where you can make design changes:
ProPhoto” > “Customize” > “Grids” > “Style: Text below
ProPhoto” > “Customize” > “Grids” > “Style: Overlaid text on rollover

“Text below” style example:

A text below style grid with comment count and excerpts turned on

“Overlaid text on hover” style example:

A rollover text style grid

Override post excerpt character length

text-length-box

When displaying excerpt text for each grid item, ProPhoto by default trims your post excerpts to a maximum of 120 characters followed by a link to view the full post content, like in this example:

grid-no-text-length-override

Default grid excerpt length is about 120 characters

Entering a number in the Grid creation popup will override the character limit for your grid text, allowing you to display a different amount text, like in this example:

grid-with-text-length-override

Override the text length for more or less characters of excerpt text.

NOTE- Use this option carefully with overlaid rollover style grids.  ProPhoto will always use the character limit you set here, even if the resulting text is too big for the grid item, which could potentially result in cut-off text.

grid-text-length-override-fail

Too many characters for small grid item

Area 3: Grid Layout

Choose between a cropped grid, where all the images are cropped to exactly the same size, or a masonry grid, in which images of various sizes will appear (some people call this a “Pinterest-style” grid).  Remember: in order for your grid thumbnails to achieve a masonry look like you see below, your images need to have various aspect ratios.

Masonry Grid Layout

Image crop ratio

You can set your own cropping ratio for images in cropped grid layout. You are not constrained to the default 3:2 (width:height) ratio. If you don’t want your grid image to be cropped in any way, make sure to use this ratio matches what you use for a “featured image” (for a post or page grid), or Category grid image (“ProPhoto” > “Customize” > “Grids” > “Featured and fallback images”). Otherwise, a masonry grid layout may be more appropriate.

Area 4: Grid Columns/Rows

All your grids will automatically fill the width of the content area where they’re inserted, so the more columns you have the smaller the grid images will be.  Set the number of columns and rows to create for your Grid. (some Grid Types do not show a ‘rows’ option when you pick how many items appear, since rows are based on how many things you pick)

A cropped grid will organize the image in very neat rows and columns; all the images will be exactly the same width and height. In a masonry grid all the images will be the same width but the height will depend on the original image aspect ratio. See the Masonry layout example below:

A masonry grid: ProPhoto fits the images together like a puzzle – rows may not match perfectly.

A cropped grid displays images in uniform columns and rows, creating clean lines and a neat look.

Grid Customization Options

Now that you selected and added your grid, you’ll want to tweak your customization options so that your grid is styled just how you want.

Click here to learn how to customize your grid Styles.


What are Grids?

ProPhoto grids are grids of image-based links which take your visitors to various types of content.  You can link to various types of content within your site, or to custom URLs anywhere you like online.  With the large number of customization options available for styling your grids, the design possibilities are almost endless.  Grids are great for displaying post excerptsportfolio pagesclient areasblog categoriesexternal URL links, and for creating slick looking pseudo-menus on pages.

 ProPhoto Grids are not photo galleries. They are not designed for displaying images alone. Rather, they are a navigation tool allowing you use thumbnail images to link to wherever you want. Consider a Lightbox Gallery for a photo grid layout.

How to add grids

You can insert a ProPhoto “Grid” into any post or page, or any area that accepts widgets.
Click here to learn how to add Grids.

Choosing images for the grid

When linking to a page or a post, ProPhoto will automatically try to create the grid link thumbnail image.  The thumbnail will be created from an uploaded image in this order if priority.

  1. If added, a “Featured” Image for the page/post is used. Changing the Featured Image changes the grid image.
  2. The first image inserted directly into the page or post. (not just from a gallery placed inside) 
  3. The fallback grid image uploaded to ”ProPhoto” > “Customize” > “Grids” > “Featured and fallback images”
    (if options 1 and 2 aren’t present or if the inserted image is larger than 6000 total pixels – width-plus-height)

For a galleries grid, the first image in the gallery will be used as the grid image.

For a categories grid, a featured or first image from the most recent post in that category will be used. But that image can be overridden by uploading a category specific grid thumbnail image to “ProPhoto” > “Customize” > “Grids” > “Featured and fallback images”

For a custom grid, you simply upload your grid images to “ProPhoto” > “Customize” > “Grids” > “Custom Grid Items”.

Thumbnail size

Since the ProPhoto Grid tool was created to make it easy to get neatly-organized grids, the thumbnail size is figured out and created automatically. Since Grids are sized to fit in the area they are placed, and are designed to fill the width of that space, the size of the grid thumbnail images is figured out based on things like the width of the space, the number of columns used, the gap or space applied between grid items, and any extra padding or borders added to your grid style being used.

If you want to change the size of your grid thumbnails, you’ll need to change the number of columns for your grid, or the gap/spacing between grid items. Take note that if your image is not large enough to fill the size of your grid thumbnail area, it will not be enlarged to fit – the small image will default to the top-left of the space where it should appear and will simply have extra unused space to the side or below. Use larger images if you have this problem.

Grid Options

When creating a grid in either a widget or content area, you’ll have a number of options to choose from.  Each of these options areas is described below.

grid-options-screenshot

Grid option 1: Type

There are seven different grid types to choose from.

Recent Posts Grid
Recent Posts From Category
Galleries Grid
Categories Grid
Select Posts/Pages Grid
Custom Grid

Grid option 2: Style

Grids have “styles” which are ways of viewing grid items.  Right now ProPhoto has two ways to style your grid items: an image with text below, or an image with text overlaid when hovered.  The “text below” style gives you the option to view a comment count and toggle the excerpt text on/off.

Each of these styles has a dedicated customization area where you can make design changes that apply to each specific style:
ProPhoto” > “Customize” > “Grids” > “Style: Text below
ProPhoto” > “Customize” > “Grids” > “Style: Overlaid text on rollover

Examples:

A text below style grid with comment count and excerpts turned on

A rollover text style grid

Grid option 3: Layout

Choose between a cropped grid, where all the images are cropped to exactly the same size, or a masonry grid, in which images of various sizes will appear (some people call this a “Pinterest-style” grid).  Remember!  In order for your grid thumbnails to achieve a masonry look  like you see below, your grid images need to have various aspect ratios.

Masonry Grid Layout

Image crop ratio

You can set your own cropping ratio for images in cropped grid layout. You are not constrained to the default 3:2 (width:height) ratio. If you don’t want your grid image to be cropped in any way, make sure that the image you “feature” (for a post or page grid), or that you set as your category grid image (“ProPhoto” > “Customize” > “Grids” > “Featured and fallback images”) is the same aspect ratio as the “crop ratio” you set for an individual grid. Otherwise, a Masonry Grid layout may be more appropriate.

Grid option 4: Columns/Rows

All your grids will automatically size themselves to fit into the content area into which they are inserted, so the more columns you have the smaller the grid images will be.  A cropped grid will organize the image in very neat rows and columns; all the images will be exactly the same width and height. In a masonry grid all the images will be the same width but the height will depend on the original image aspect ratio. See the Masonry layout example below.

A masonry grid: ProPhoto fits the images together like a puzzle – rows may not match perfectly.

A cropped grid displays images in uniform columns and rows, creating clean lines and a neat look.

Grid Customization Options

Now that you selected and added your grid, you’ll want to tweak your customization options so that your grid is styled just how you want.

Click here to learn how to customize your grid Styles.

Did you find this tutorial helpful? Thanks for helping us support our customers better! Yes No saving...

If you’ve searched the tutorials and can’t find what you need, please contact us. We’re here to help. Contact Us