Portfolio Block
The portfolio block lets you show off your latest work with a dedicated portfolio project grid. Using a dedicated custom post type, you can create unique portfolio pages complete with title, text, images, galleries and videos, and display those pages in a customizable grid.
Visit the Portfolio Items link in the WordPress admin menu and click Add New. Creating a portfolio item is very similar to creating a post or page. You can use the block editor to create an expressive, visually-impressive portfolio post with images, videos, galleries, and other blocks.
To ensure your portfolio grid displays properly, be sure to add a featured image. This image will be used to represent your portfolio item.
Once you've finished creating your portfolio items, you can use the Portfolio block to display a portfolio grid on any post or page. Use the block inserter and search for the AB Portfolio block and add it to your page to get started. The Portfolio block comes with several handy settings to help you quickly customize the grid match your site's content.
Portfolio Settings
- Order By - Display your posts in ascending or descending order based on publish date or by post name.
- Category - Show portfolio posts from a particular category.
- Number of Items - Select the number of posts you'd like to show on the grid.
- Number of Items to Offset - Select the number of posts you'd like to skip from the beginning of the post list.
- Columns - Select the number of columns (between 1 and 4) to display your posts in.
Portfolio Content
- Content Toggles - Use the toggles to enable or disable the output of the post title, featured image, excerpt, and continue reading link.
Portfolio Markup
-
Post Grid Section Tag - This dropdown selector allows you to choose the HTML tag for the wrapper around the post grid to help you match your content hierarchy.
-
Post Title Heading Tag - Change the heading tag on the post title to match your content hierarchy.
The Portfolio block comes with settings to adjust the size of the featured image displayed in the post grid. The block will detect image sizes defined by the theme, as well as the standard thumbnail, medium, large, and full size image sizes provided by WordPress. The block also provides a AB Grid Square and AB Grid Landscape sizes that are designed to fit the grid's design.
By default, the post grid will load the full size image, since this image will always be available. However, it is advised that you select an image size that suits your content accordingly.
There will be instances where there isn't an image available for the image size that you select (indicated by a little yellow icon on the image). This could be that the featured image for that post is smaller than the size you selected, or that the image simply doesn’t have that size generated yet. This can happen if your image was uploaded before the image size was defined a theme or plugin.
The easiest way to fix this is by regenerating your image sizes by installing the Regenerate Thumbnails plugin. Once installed, go to Tools > Regenerate Thumbnails to run the plugin. This plugin will go through your media library and regenerate the missing image sizes. Once you've refreshed your images, you should have images available for all the image sizes in the post grid image size settings.