Image Widget

A flexible image widget. Choose from a wide range of supporting settings.

Requirements

To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Image Widget.

The Image Widget is ready to be used anywhere:

Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.

Settings

Image file
Choose Media: Select an image from your media library or upload a new image.
Image Search: Search Pixabay.com for a free stock image.
External URL: Display an image from an external site. Input the URL of the image to display it.

Image size
Select the image size to be used. This field uses the image sizes available in your WordPress installation. Select the Custom Size option if you’d like to set a custom image size. Two new fields will be displayed, Width and Height.

Image alignment
Choose from the following options, default, left, right, or center.

Title alignment
Choose from the following options, default, left, right, or center.

Title text
Optionally enter an image title.

Title position
Set the title position. Choose from the following options, hidden, above, or below.

Alt text
Optionally enter the image alternative text. Describe the purpose of the image or leave it empty if the image is purely decorative.

Destination URL
Enter a destination URL to link the image.

Link title to URL
Enable to link the image title to the destination URL.

Open in new window
Enable to open the link in a new window.

Bound
Enable to make sure the image doesn’t extend beyond its container.

Full-width
Enable to resize the image to fit its container.

Rel
Optionally enter a rel value. The rel attribute specifies the relationship between the current document and the linked document. Only used if the destination URL is used. Read more about the rel attribute.

The following sections are available as part of the Lightbox, Image Overlay and Tooltip Addons included with SiteOrigin Premium.

Enable Lightbox
This will override the destination URL.

Image Overlay

Enable Image Overlay
Choose between Use global setting, Enabled or Disabled. The global setting is accessible from SiteOriginPremium AddonsImage Overlay: Settings.

Overlay Theme
Choose between Use global setting, Light or Dark.

Tooltip

Enable Tooltip
Choose between Use global setting, Enabled or Disabled. The global setting is accessible from SiteOriginPremium AddonsTooltip: Settings.

Tooltop Theme
Choose between Use global setting, Light or Dark.

Advanced Customizations

siteorigin_widgets_image_lazy_load

Exclude an Image Widget image from lazy loading using the siteorigin_widgets_image_lazy_load filter. Replace 6119 with the ID of the widget you’d like to exclude.

add_filter( 'siteorigin_widgets_image_lazy_load', function( $lazy, $instance, $widget ) {
	return $instance['image'] !== 6119 ? $lazy : '';
}, 10, 3 );

wp_omit_loading_attr_threshold

The SiteOrigin Image and Image Grid Widgets use wp_get_loading_attr_default to prevent lazy loading above the fold. wp_omit_loading_attr_threshold can be used to adjust how many images are excluded from lazy loading. The below example will exclude the first two images on the page from lazy loading.

add_filter( 'wp_omit_loading_attr_threshold', function( $omit_threshold ) {
	return 2;
} );