Image figure tag

[maccaroney]

Hi there,

I want to avoid to many inline styles. Is there a way to get rid of the figure tag?

When not 2 things:

Here an example what is not needed with the current style when I align a image e. g. to float right:
margin: 0px 0px 10px 10px;

I try to not use more chars inside a html or css than needed and I want spelling like this:
margin: 0 0 10px 10px;

Is this manageable with a change of code somewhere?

I know that I can do: figure.left {and my own css} but I think it will help many people which are not so much into css or html to have their pages smaller on size.

Second thing is:
Responsiveness of images. When I align a image to the right and crop it to have a half/half with text and image it will stay on this size on tablet and mobile. I know, viewports are not supported to load different images but how can I manage it to have a smaller size on desktop and full size on tablet/mobile?

Beside of this questions - Is there an editor on your roadmap, where you can manage content setting up with blocks (not the blocksapp and not your pagebuilder)?

All the best,
Dennis

[maccaroney]

additional problem:
When I change the margin style inside the figure tag and after this I set an link to the image it will set the margin to the default values. Is this a known behavior?

[pulsecms]

I want to avoid to many inline styles. Is there a way to get rid of the figure tag?

Yes - I wonder if this helps you:

Graphical Hotspots

Since 5.2 BETA5 we've allowed <figure> to appear in the Redactor Editor output so that images can be aligned left/right, captions etc For your project go to admin/redactor/ redactor_init.js and change L45 to "false" and it will work: imageFigure: false,

Responsiveness of images. When I align a image to the right and crop it to have a half/half with text and image it will stay on this size on tablet and mobile. I know, viewports are not supported to load different images but how can I manage it to have a smaller size on desktop and full size on tablet/mobile?

Do you have an example URL? Images should be fully responsive as set by the Template CSS.

Usually something like:

.img {
width: 100%;
height: auto;
}

Beside of this questions - Is there an editor on your roadmap, where you can manage content setting up with blocks (not the blocksapp and not your pagebuilder)?

You mean for example setting out a Page layout by determining what Blocks go on the page and where? If so, yes If not, please let us know more information here and we'll see what we can do.

When I change the margin style inside the figure tag and after this I set an link to the image it will set the margin to the default values. Is this a known behavior?

This is not known and could be a bug with the Editor. If you set it again after the link does it work? Can we have a little more information so we can replicate it?

Thanks

[Torsten]

.img {
width: 100%;
height: auto;
}

An additional media query could also be helpful:

@media (min-width: 960px) {
  img {
    max-width: 480px;
  }
}

Now the image will be full width only on devices with a smaller width than 960px. Or to put it another way: The image will be resized to fit beside the text on desktop devices.