Image

Add a responsive image with custom dimensions, positioning, caption, link, and styling options.

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.

Image Shape

Enable
Enable to open the Image Shape settings section.

Image Shape
Choose between the following shapes:

  • Circle
  • Oval
  • Triangle
  • Square
  • Diamond
  • Rhombus
  • Parallelogram
  • Pentagon
  • Hexagon

A selection of additional shapes, a custom shape, and shadow and hover shadow options are available as part of the SiteOrigin Premium Image Shape Addon.

Repeat
Choose from one of the following shape repeat options:

  • No Repeat
  • Repeat
  • Repeat (No Clipping)
  • Repeat Horizontally
  • Repeat Vertically

Size
Optionally enter a size value for the shape. The size of your overall image can set by choosing a suitable size from the Image Size dropbox at the top of the widget settings. A Custom option is available.

Alignment
Choose between aligning the shape on the Left, Center, or Right.

Lightbox

Add lightbox functionality to the Image Widget with the SiteOrigin Premium Lightbox Addon.

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

Add hover tooltip functionality to the Image Widget with the SiteOrigin Premium Tooltip Addon.

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.

Custom CSS Customizations

Adjust the widget title text font size, margin top, and margin bottom.

.widget_sow-image .widget-title {
	font-size: 15px;
	margin-top: 0;
	margin-bottom: 0;
}

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 );

Remove the Image Title Tag

add_filter( 'siteorigin_widgets_image_args', function( $args, $instance ) {
	if ( empty( $instance['title'] ) ) {
		unset( $args['attributes']['title'] );
	}
	return $args;
}, 10, 2 );

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;
} );