Documentation
Docs

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

Placeholder image

Icon

Lottie

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