[4.1] Image and Figure User experience

[brianteeman]

Part 1

Steps to reproduce the issue

This screen is confusing or doesnt do what I thought it would do.

Example 1

Enter an Image class AND a figure class

Expected result. that the image would be inserted with that image class and then wrapped in a figure element with the figure class

Actual result. The image is inserted with the image class only and no figure element

Example 2

Enter a figure class
Expected result. that the image would be inserted and then wrapped in a figure element with the figure class

Actual result. The image is inserted with no class or figure element

What actually happens

The image is ONLY wrapped in a figure element when there is a figure caption. So the figure class is completely ignored in all other uses.

What should happen

Maybe the results are what a well educated person would expect. I didn't and thought the code was broken. It should be much clearer that the figure element is only created when there is a figure caption AND so there is no point adding a figure class if you dont have a figure caption.

Also when the figure element is not created then anything entered as a figure class is lost forever

(updated)

Part 2

Now it becomes more clear and more confusing.

When you add an intro or full image then you dont get asked for a figure class at all. As you can see you are only asked for an image class and a caption.

So based on the experience from Part 1 I expect that if I only add a caption then a figure element will wrap the image and caption. ✔️ it does

And I expect that if I only add an image class then the image will be inserted with an image element and class only. ❌😢
What actually happens is that the image is inserted without the class but it is wrapped in a figure element that is using the image class.

• The logic for why intro/full images always use figure even without a caption escapes me.
• The logic behind having both an image and figure class in media manager and only an image class in intro/full escapes me.
• The logic behind having a field where you enter an image class that is either an image or a figure class depending on the screen you are on escapes me.

updated again

Part 3

Because of the behaviour in part 2 it is not possible to use many of the bootstrap image classes. There is for example no way to center a figure element using a bs image class.

[Vanshitasingh]

@brianteeman What is a figure class?

[drmenzelit]

@brianteeman What is a figure class?

A css class that would be added to the figure element

[brianteeman]

Am I really the only one who sees the inability to add an image class to an intro or full image as being a real difficulty - its hitting me really hard

[chmst]

Finally someone says it .. I thought it is only me.

[brianteeman]

So how dowe move forward

[chmst]

First part:
I would like to always have a figure around images, also if there is no caption. This makes styling much easier. Maybe there are disadvantages? @dgrammatiko?
I'll make a draft PR so we can discuss.

[dgrammatiko]

Fwiw the logic for the figure seems a bit odd now that I see it in action and it’s my fault. The image selector has already the state of the class AND the caption text so it should be fairly easy to change the conditional to append a figure even if the caption is empty if a class is defined

[brianteeman]

only a bit odd ;)

[Ruud68]

Running into this exact issue.
The full text image class doesn't add the class to the image but to the wrapped figure class. This leads to unexpected issues when (in my case) external glighbox script that automatically adds a lightbox / gallery to (image) elements that have a configured class.

Currently although it says 'IMAGE class' the class is not added to the image, but to the wrapping figure element, leading to issues and the inability to (in my use case) add the lightbox to the image.

My proposal would be to rename (for B/C reasons), the image class to figure class and add an additional image class that will actually do what it is supposed to do (add the configured class to the image).

as for above part 1: totally agree, you either insert an image or a figure holding the image, now you have conditional output depending on what class you configure where, where the figure class doesn't do anything if the caption is empty. This is IMO a scenario for messy workarounds by (extension) developers

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/37380.}