Image Block

Last updated last month

The image block enables you to add a single photo and have them custom aligned attractively and efficiently.

To add a image, click on the Add Block button and select the Image block. Alternatively, you can start typing /image in a new paragraph block, then press enter.

Use the slash command /image to insert a image block

Detailed instructions on adding blocks can be found here.

Block Interface

Each block comes with unique toolbar icons and specific user controls that allow you to manipulate the block right in the editor.

The image toolbar supports multiple alignments including wide and full width alignment

Adding Image

Upon adding the image block, you have two options to chose from, Upload and Media Library. The upload button allows you to upload a single image from your device and media library allows you to select image that you’ve already uploaded to your site’s media library.

Once you’ve uploaded your image or have chosen them through the Media Library window, you will get the chance to caption the image afterward.

Edit Image

This is another option in the file block’s toolbar. Choosing the pencil icon will allow you to select a new image file for your block. Use this if you need to replace the image file in your image block, or change the Title or Alt Text.

Captions

Captions can be added to images within two possible ways:

Add a caption to a singular instance of an image block

If you wish to add a caption to a singular instance of an image, simply type it in the caption space below the image in the editor.

Add the caption to the image from the media library

Or in case you would like for the same caption to be present across all instances of an image, you will need to add the caption to the image from the media library by clicking the edit button on the image block.

Alignment

A block-specific toolbar will appear whenever you select the image block. Three of the options are for the block’s alignment, right, center, and left. Choosing the right or left will allow you to place another block alongside the image block moreover picking center will return the block to its default, taking up the full width of the post or page content.

If you wish for the image to be emphasized on the page, the Wide and Full-Width options will expand the image block beyond the bounding column of the page. These two options are exclusively available within the Conj - eCommerce WordPress Theme which supports these alignments in any fluid width page template.

Resizing Image

You can resize and adjust the image alignment to better fit the surrounding content right after adding the image to the editor.

Resize an image by dragging its handles

Clicking on the image will reveal the draggable resize handles. Then, you would be able to resize handles by dragging the image to your desired size.

The image size can be modified by adjusting width and height dimensions manually within the right-hand side block settings panel. There are also a few convenient options in the block settings for setting the image to 100, 75, 50, and 25% of its original size.

In addition to the options found in the block’s toolbar, you may locate the block specific settings in the editor sidebar panel. Clicking on the cog icon next to the publish button will toggle the visibility of this panel.

Image Settings

The image settings panel provides an option to alter the Alternative text description, which is essential for accessibility and SEO. In addition to that, you can also change the width and height dimensions of an image in 25% increments, or with exact pixel dimensions.

Changing the dimensions of an image in 25% increments of its original size

Linking

This control determines what happens when your visitors click on the images in your block. The following options are available with the drop-down select menu:

  • None: This makes your image unclickable, so they don’t link to anything at all.

  • Media File: This opens the image in a blank tab or window, which enables your visitors to go through one image at a time.

  • Attachment Page: This will lead anyone who clicks on your image to your site’s attachment page. This is an informational page about your image, which includes the image, the caption, the image description, and a comment field.

  • Custom URL: This will allow you to hyperlink your image to a custom URL of your choice.

Responsive Text Alignment

This control offers left, right, and center alignment responsive classes that can be used to realign the block’s position with the same viewport width breakpoints as the grid system. Basically, they work just like the usual alignment classes, except that they have suffixes that represent the breakpoint from which they come to effect.

Realign the image block across the different viewports

This feature is exclusively available within the Conj - eCommerce WordPress Theme which supports these alignment controls in any given post or page template.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and apply styles to the block as you see fit.