Overview
The static image option allows you to add an image to your WordPress website. This may seem overly simplistic, but this option is designed to quickly and efficiently add images. It also comes with a host of additional settings. This content type is perfect for adding banner images, ad blocks, image CTAs, and anything else you can think of that requires a single static image.
Usage
The screenshot below depicts the available settings for a static image content block. The usage is nearly identical for both Local and Global blocks. The only difference is that Global blocks have an additional image type option. This is explained below.
Image Types
The first step in setting up a static image block is choosing an image type.
Featured Image
The featured image option is available on both Local and Global blocks. If you select this option, the block will attempt to pull the featured image of whatever webpage it is being displayed on. If the webpage does not have a featured image, nothing will display. This option is typically most useful on Local blocks where you will clearly know if the webpage has a featured image or not.
Custom Image
The custom image option is also available on both Local and Global blocks. If you select this option, you will be prompted to add an image from your media library. The screenshot above depicts the usage of a custom image.
Once an image has been added, you will have the option to add a title, alt text, and also CSS classes to the image. The plugin will attempt to pre-populate the title and alt fields with content that is already attached to the media file. Feel free to edit/delete this content as you see fit. Note that the CSS classes are added directly to the <img> element and must be space separated.
Featured or Custom Image
This option is unique to Global blocks, and therefore does not appear on Local blocks. Since Global blocks can be added to many webpages at one time, there are likely instances where some of these pages have a featured image and others do not. With the featured or custom option, you are prompted to add a custom image. If the block is shown on a page without a featured image, the custom image will be displayed. However, if the webpage does have a featured image, the block will display it instead.
This option can be very convenient if you are adding a block to a large number of webpages and you are not sure if all have featured images set. For example, lets say you wanted to add a header image to all posts. The custom image would serve as a default for any post that does not have a featured image, thereby ensuring that every post has at least some sort of header image.
Display featured images on singular pages
You may have noticed this setting on Global blocks whenever you are using an image type that includes a featured image. See the screenshot below.
Featured images can technically only be added on singular pages. A singular page is a page on your website that you can directly edit, such as a post or a page. Global blocks can be located on non-singular pages, like archive pages. Having the image type set to display a featured image can generate some unexpected results on these pages. Checking this box will prohibit the plugin from trying to find a featured image on non-singular pages.
genesis_entry_header hook, it would display the featured image for each post in the archive.Image Size
Once you have chosen the image type, you will have the option to choose the image size. The sizes available in the dropdown are the default WordPress image sizes as well as any custom sizes that have been added to your website. If you want full control over the size of the image, this should be controlled with CSS styling.
Image Link
The image can also be linked to a custom URL. If enabled, the standard link settings are available including rel and the option to add link specific CSS classes. Any classes that you add are attached directly to the <a> element.
Image Caption
You also have the option to add an image caption. Only safe HTML and shortcodes are allowed in the caption. Blox includes some very basic default styling which controls the look of the image caption. This default styling can be easily turned off on the Style tab if you wish. You can also apply your own CSS to the image caption on the Style tab.
Set As Background
The background option is perhaps one of the most powerful yet difficult to implement. When this option is activated, the image you have selected, whether that be a featured image or custom image, will be added as a background image on the blox-image-wrapper div. For a complete breakdown of the markup, check out the frontend markup reference page. The plugin includes some basic default CSS to get you started, but you will likely need to tweak these styles or add your own on the Style tab.
Resources
- Default Styles for static image blocks
- Frontend Markup for static image blocks
Tutorials
Tutorials coming soon…