Image

5 min read Updated

The Image widget adds a single responsive image. You can set its size, alignment, title, link and shape.

Requirements

The Image widget is active by default. If it is not, go to PluginsSiteOrigin Widgets and activate Image.

You can use the Image widget in three places:

Page Builder: Add the SiteOrigin Image widget to a Page Builder layout in the Classic Editor or in the SiteOrigin Layout block.
Block Editor: Add the SiteOrigin Image block. It is in the SiteOrigin category of the block inserter.
Widget areas: Add the widget to any theme or plugin widget area.

Settings

The Image widget form

Image file
Click Choose Media to pick an image from the Media Library. Click Image Search to find a free stock image. Or enter an external image URL.

Image size
The image size to load for a Media Library image. The list shows Full and the sizes your site registers. Choose Custom Size to enter a Width and Height.

Enforce Dimensions
Appears with Custom Size. Forces the image to the exact Width and Height you enter. Set both values for it to work. At and below the Responsive Breakpoint global setting (default 780px), the height becomes automatic so the image can shrink.

External image size
Appears when you use an external image URL. Choose Full, or Custom Size to set a Width and Height for the external image.

Image alignment
Default, Left, Right or Center. Default: Default.

Title alignment
Default, Left, Right or Center. Default: Default.

Title text
The image title. If you leave it empty, the widget uses the image caption from the Media Library. If there is no caption, it uses the image title, unless that title is the file name.

Title position
Hidden, Above or Below the image. Default: Hidden.

Alt text
A text alternative for screen readers. If you leave it empty, the widget uses the alt text from the Media Library.

Destination URL
Makes the image a link.

Link title to URL
Also link the title to the Destination URL. Default: off.

Open in new window
Opens the Destination URL in a new tab. Default: off.

Bound
Make sure the image doesn’t extend beyond its container. Default: on.

Full width
Resize the image to fill the width of its container. Default: off.

Rel
Adds a rel attribute to the image tag.

Image Shape

Image Shape is a free feature. It masks the image with a shape.

Enable
Turn on the image shape. The other Image Shape settings appear when this is on. Default: off.

Image Shape
Circle, Oval, Triangle, Square, Diamond, Rhombus, Parallelogram, Pentagon or Hexagon. Default: Circle.

Repeat
No Repeat, Repeat, Repeat (No Clipping), Repeat Horizontally or Repeat Vertically. Default: No Repeat.

Size
The size of the shape. Leave it empty to fit the shape inside the image.

Alignment
The position of the shape in the image: Left, Center or Right. Default: Center.

The Image Shape section with the Circle shape selected

Global Settings

Go to PluginsSiteOrigin Widgets and click Settings on the Image widget.

Responsive Breakpoint
The screen width at which Enforce Dimensions lets the image height become automatic. Default: 780px. This is a widget setting. It is separate from the Page Builder Mobile Width setting.

A centered image with its title on the front end

SiteOrigin Premium

SiteOrigin Premium adds these features to the Image widget:

  • Image Shape: adds 43 more shapes, a Custom Shape upload, and Shadow and Shadow Hover sections to the Image Shape section. Each shadow section has Enable, Color, Horizontal Offset, Vertical Offset, Blur and Spread.
  • Lightbox: adds a Lightbox section. Enable Lightbox opens the image in a lightbox and overrides the Destination URL. Album name groups images from several widgets into one lightbox. Disable caption for this lightbox hides the caption.
  • Image Overlay: shows the image title over the image. The addon turns the overlay on for this widget by default. Use Enable Image Overlay (Use global setting, Enabled or Disabled) and Overlay Theme in the Image Overlay section to change it.
  • Tooltip: shows the image title in a tooltip. It is off for this widget by default. Set Enable Tooltip to Enabled in the Tooltip section, and choose a Tooltip Theme.

Premium image shapes and Shadow settings in the Image widget

Advanced Customizations

Add custom CSS at AppearanceCustom CSS with the SiteOrigin CSS plugin, or in your theme’s Additional CSS. Add PHP snippets with a plugin such as Code Snippets, or in a child theme’s functions.php file.

Change the image title style

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

Turn off lazy loading for one image

In Page Builder and Block Editor content, WordPress adds lazy loading to the image. Use this WordPress filter and replace northfield-team with the image file name, without the extension.

add_filter( 'wp_img_tag_add_loading_attr', function( $value, $image, $context ) {
	if ( strpos( $image, 'northfield-team' ) !== false ) {
		return false;
	}
	return $value;
}, 10, 3 );

In a widget area, the widget sets lazy loading itself. Use the siteorigin_widgets_image_lazy_load filter instead. Replace 123 with the Media Library ID of the image.

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

Remove the image title attribute

This removes the title attribute from the image when Title text is empty.

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

Change how many images load without lazy loading

The Image widget uses the WordPress loading optimization. WordPress doesn’t lazy load the first images in the page content. This WordPress filter sets how many. The default is 3.

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