Image block

The Image block can be used to display different types of media.

Modes

The image block comes with multiple different modes of operation:

File

Choose an image file from WordPress Media Library, custom URL, upload it or use the Featured image (also works inside the core Query block).

SVG

Render any SVG image by insert raw SVG content.

Add Tailwind classes to the SVG by using normal block controls, Tailwind classes that are included in raw SVG content do not get detected.

By default the Sanitize option is enabled, which does some basic sanitization so you don’t accidentally XSS yourself when pasting a large unchecked SVG, but it may cause issues with some SVGs so turn it off when you have checked that the contents are not malicious.

Uncheck the Wrap option when you don’t want the <svg> element to be wrapped in an additional element. The Tailwind classes (and other block classes and attributes) you have configured will then be injected directly into the SVG markup that is provided.

Icon

By switching the Image block to “Icon” mode you can select a SVG icon from available icon packs.

Once you have selected an icon you can also switch back to SVG mode to edit your chosen icon. By default the width and height attributes are removed from bundled SVG icons to make them fluid, how ever if that’s not desirable the values can be recovered in the SVG mode from the data-svg-width and data-svg-height attributes. There are instances where you need the dimensions, and instances where you don’t, depends on the use case and SVG itself. The Icon mode also always wraps the <svg> element, if that is not desirable you can switch back to SVG mode as well, which has an option to toggle that functionality.

ska-icons plugin

By default ska-blocks doesn’t include any icons to keep the plugin size smaller. Download the ska-icons plugin to add Font Awesome 6 and Heroicons icons.

ska-icons.zip

Custom icons

For a few custom icons it’s easiest to just use the Image block in SVG mode and simply paste the icon file contents.

How ever, to add custom icon sets, they should be placed in your child theme directory in the icons folder.
For example: wp-content/themes/ska-theme-child/icons/my-custom-icons/*.svg.
Alternatively you can specify additional icon sources using a filter:

Adding an icon sourcePHP

add_filter('ska_blocks_icon_sources', function($sources) {
	return array_merge([trailingslashit(dirname(__FILE__))], $sources);
});

Lottie

Allows to render lightweight and scalable animations in the form of a Lottie .json file. Comes with some additional controls to configure how to render the Lottie.

Placeholder

Render a placeholder image.

Resize images on the fly

When using an image from the WP Media Library you can insert custom dimensions and hit Resize to generate an image with that size.

Image with a lightbox

<!-- wp:ska/image {"mode":"file","width":768,"height":461,"id":701,"src":"https://sinukoduleheabi.ee/docs/wp-content/uploads/2024/03/431-1280x768-1-768x461.jpg","alt":"Placeholder image","lightbox":true,"skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<a class="wp-block-ska-image"><img src="https://sinukoduleheabi.ee/docs/wp-content/uploads/2024/03/431-1280x768-1-768x461.jpg" alt="Placeholder image" width="768" height="461" loading="lazy"/></a>
<!-- /wp:ska/image -->

Icon

<!-- wp:ska/image {"mode":"icon","svg":"\u003csvg data-svg-width=\u002224\u0022 data-svg-height=\u002224\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cpath d=\u0022M9 12.75L11.25 15L15 9.75M21 12C21 13.2683 20.3704 14.3895 19.4067 15.0682C19.6081 16.2294 19.2604 17.4672 18.3637 18.3639C17.467 19.2606 16.2292 19.6083 15.068 19.4069C14.3893 20.3705 13.2682 21 12 21C10.7319 21 9.61072 20.3705 8.93204 19.407C7.77066 19.6086 6.53256 19.261 5.6357 18.3641C4.73886 17.4673 4.39125 16.2292 4.59286 15.0678C3.62941 14.3891 3 13.2681 3 12C3 10.7319 3.62946 9.61077 4.59298 8.93208C4.39147 7.77079 4.7391 6.53284 5.63587 5.63607C6.53265 4.73929 7.77063 4.39166 8.93194 4.59319C9.61061 3.62955 10.7318 3 12 3C13.2682 3 14.3893 3.6295 15.068 4.59307C16.2294 4.39145 17.4674 4.73906 18.3643 5.6359C19.2611 6.53274 19.6087 7.77081 19.4071 8.93218C20.3706 9.61087 21 10.7319 21 12Z\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00221.5\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022/\u003e\n\u003c/svg\u003e\n","collection":"heroicons","icon":"24/outline/check-badge","skaBlocks":{"cx":"size-24 text-primary","t":1709756495,"css":".size-24{width:var(\u002d\u002dska-spacing-24);height:var(\u002d\u002dska-spacing-24)}.text-primary{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-primary),1)}"},"skaBlocksSize":{"v":{"$":{"@":"24"}}},"skaBlocksTextColor":{"v":{"$":{"@":"primary"}}}} -->
<div role="figure" aria-hidden="true" class="size-24 text-primary wp-block-ska-image"><svg data-svg-width="24" data-svg-height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 12.75L11.25 15L15 9.75M21 12C21 13.2683 20.3704 14.3895 19.4067 15.0682C19.6081 16.2294 19.2604 17.4672 18.3637 18.3639C17.467 19.2606 16.2292 19.6083 15.068 19.4069C14.3893 20.3705 13.2682 21 12 21C10.7319 21 9.61072 20.3705 8.93204 19.407C7.77066 19.6086 6.53256 19.261 5.6357 18.3641C4.73886 17.4673 4.39125 16.2292 4.59286 15.0678C3.62941 14.3891 3 13.2681 3 12C3 10.7319 3.62946 9.61077 4.59298 8.93208C4.39147 7.77079 4.7391 6.53284 5.63587 5.63607C6.53265 4.73929 7.77063 4.39166 8.93194 4.59319C9.61061 3.62955 10.7318 3 12 3C13.2682 3 14.3893 3.6295 15.068 4.59307C16.2294 4.39145 17.4674 4.73906 18.3643 5.6359C19.2611 6.53274 19.6087 7.77081 19.4071 8.93218C20.3706 9.61087 21 10.7319 21 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg></div>
<!-- /wp:ska/image -->

Lottie

<!-- wp:ska/image {"mode":"lottie","id":724,"src":"https://sinukoduleheabi.ee/docs/wp-content/uploads/2024/03/Review.json","lottieSpeed":0.5,"skaBlocks":{"cx":"size-32","t":1709756495,"css":".size-32{width:var(\u002d\u002dska-spacing-32);height:var(\u002d\u002dska-spacing-32)}"},"skaBlocksSize":{"v":{"$":{"@":"32"}}}} -->
<div role="figure" class="size-32 wp-block-ska-image"><lottie-player autoplay loop speed="0.5" direction="1" mode="normal" src="https://sinukoduleheabi.ee/docs/wp-content/uploads/2024/03/Review.json"></lottie-player></div>
<!-- /wp:ska/image -->

Lottie from: https://animatedicons.co/icons/