Advanced Image Block

The Advanced Image block is based on the default Image block in Gutenberg. This improved version of the block has tons of extra features including focal points, overlays, custom text and more.

Video guide to the Advanced Image block

How to create the Advanced Image block

You can create an Advanced Image block by clicking its button in the PublishPress Blocks category:

Screen Shot 2020 12 10 At 12.00.57

Settings for the Advanced Image block

You can adjust key settings for thee image by using the right sidebar:

  • Action on click Open the image in a lightbox, or open a custom URL.
  • Link URL: This will send visitor to a new URL if they click on the image.
  • Open link in new tab: On/Off
  • Image Size: Should the image be displayed as full width, or with a custom height and width.

Focal Point, Overlay and Text

The focal point allows you to choose which part of the image is at the center of the block display. In this settings area, you can also control the image overlay, and any text.

  • Focal Point Picker: Select a point to focus on, or choose horizontal/vertical position
  • Overlay opacity default
  • Overlay opacity hover
  • Color Settings: 
    • Titles color
    • Subtitle color
    • Overlay color
  • Text Alignment: 
    • Vertical alignment (Top, Center, Bottom)
    • Horizontal alignment (Left, Center, Right)

Change title and subtitle tag (Pro)

You can change the HTML tag for the title and subtitle in order to display the content in a different size.

PublishPress Blocks - Advanced Image
  1. Go to Content tags panel
  2. Choose a different HTML tag for the title and subtitle

Default settings for all your Advanced Image blocks

You can set default options for every Advanced Image block added to your site. This is possible with the Default Blocks Config feature and it allows you to create a consistent look-and-feel for all your accordions.

  • Go to PublishPress Blocks in your WordPress admin menu.
  • Click Configuration, then Default Blocks Config.
  • Click Advanced Image.
Advanced Image Blocks
Advanced Image Blocks

Professional publishing plugins for WordPress! Get PublishPress