Breakdance4fun Logo

The new Image element: simplified code and added features

Starting from version 2.1, the image element has been completely revamped. The front-end has been enhanced for efficiency, and new controls have been added.

Important note: Technically, the new Image element does not replace the old version. It is an entirely new element that can only be used in version 2.1 and higher.
The old version is actually renamed Image V1 and it will only be displayed when it was used on previous version of Breakdance, for compatibility purpose. But the element won't be visible anymore in the list.

Why a new version?

The main reason is the structure. In the frontend, for a single image without any fancy effect, the old version, aka Image V1, looks like this:

Image V1 Code

The new version no longer uses containers it's now just a simple IMG tag.

Image Code

What do we gain?

A part from being less bloated, a couple of features have been added:

The Alt Tag is linked to the Media Library and will be automatically updated when added or modified in the Media Library. This was not the case with the previous version of the Image element.

We can disable the default WordPress Srcset & Sizes options, which can be very handy in some cases. (if for example you want to keep the exact same image for each breakpoint).

We can easily display images from anywhere, simply by entering the URL.

Image V1 Content
Image Content

What do we Lose

Because there are no containers (divs) anymore, some options had to be removed:

Links & Lightbox

No container = no link! If we want to link an image or add a traditional lightbox, we must use the wrapper Link element.

Wrapper Link StructureWrapper Link Lightbox

Mask Effect

Image V1 had a Mask option, where we could easily add an SVG mask to the image.
This can still be easily accomplished by using the Masker element:

Masker Element StructureMasker Element

Zoom effect

With Image V1, we could add a zoom effect on hover. It was simple but convenient to use. As it's not possible anymore, we have to make our own effect.
We can use custom CSS or add a transition and a transform (scale) effect in the advanced wrapper settings.
Don't forget to wrap the image in a Div or Wrapper Link element with the overflow set to hidden.

Image Advanced Effects
Made By Breakdance Logo39

Caption

Same for the caption, there is no replacement, we have to build it ourself.
In a Div, with an image and a text element.

The only downside is that we can't use the more semantic way, with the figure and figcaption html tags, as they are actually better for accessibility and SEO.