Tracker: http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_item_id=32935

I've just done a quick test of this and it isn't working for me, though I can't see why the code looks good.

Neither figure nor figcaption tags are being added in my article markup, though the caption text is being correctly output. Hmmm…

When I tested it using chrome, I had to clear my browser cache so the changed JS would be loaded. Maybe try that?

I have. No change for me. Are you using TinyMCE? I am.

Great change!

Did you only force-reload the page or did you delete the browser data in the settings? Because I had to do the latter. Force-reloading didn't work, it still used the cached JS for some stupid reason.
I used TinyMCE as well. However it shouldn't matter imho.

I'm also using Chrome and you can clear the browser cache from the developer tools' 'network' tab, which is what I always do.

I thought it might be text-filtering as set in config, but checked there also and it's set to not filter. I'm not sure why it's not working for me… :(

@nternetinspired Sounds strange. Can you see if the JS file /media/media/js/popup-imagemanager.js indeed changed the content (search for "figure")? And if Chrome loads the correct file? Or do you maybe have template or language overrides in place for this file?

Worked for me!

All alignments broken here.

@infograf768 Thanks, good catch. Should be fixed now.

From tracker:

‘Further test show that we can change partly this behavior by acting on each item:

<p>image with align not set</p>
<figure style="text-align: center;"><img title="mon titre" src="images/joomla_black.gif" alt="mydescription" />                
<figcaption>caption align not set</figcaption></figure>
<p>Image with align set to left</p>
<figure class="pull-left" style="text-align: center;"><img title="title left" src="images/joomla_green.gif" alt="description" /><figcaption>caption with align left</figcaption></figure>
<p>Image with align right</p>
<figure class="pull-right" style="text-align: center;"><img title="title right" src="images/joomla_black.gif" alt="Description align right" /><figcaption>Caption align right</figcaption></figure>

’

@infograf768 Why would you want to do that?

Can you explain why you think this behaviour is not correct? It looks to me like the previous, incorrect, alignment is now fixed. Inline styling is certainly never the correct course of action, whatever the desired outcome.

One has to change alignment now manually to get the caption centered under the image, and not setting an alignment in the popup does not center the image as it did before, as my screen captures show.

The code above is obtained AFTER the image is inserted, by acting on its parts.
It is not worse or better to me, it is different than we used to do. It just takes more mouse clicks to get this result.

I do like the fact that we can now see in Tiny the caption itself.

I am concerned that we get a big margin at left and right of the image by using <figure
To solve this in Protostar the class .figure has to get margin: 0;

(BTW, I could not find a way to align the caption left or right if one wants the image to be centered in the page.)

I think we should leave this to the templates. We can add such a rule to Protostar easy to get the caption centered and margins lowered.

figcaption {
text-align: center;
}
figure {
margin: 0;
}

Well the caption isn't centred in the way it was previously as the caption does not carry the redundant .img-caption class, but I's also consider this an improvement. Captions should not be centered.

The margin around figure elements is being applied (correctly) by the default browser stylesheet. Images inserted using the 'images and links' fields carry an additional class .item-image that is targeted by protostar to override the default margins.

Captions shouldn't really be centered and figures most certainly should not have margins removed. If you continue using the the styling applied by Protostar then either:

Markup should be changed to output:

<figure class="item-image">
<figcaption class="img-caption"></figcaption>
</figure>

The better option would be to modify those selectors in Protostar so the same CSS is applied directly to figure and figcaption elements, as the selectors themselves are now redundant.

I tend to agree with @nternetinspired on that.
I wouldn't add those classes to the figure and figcaption. They're meant for the leading images, not for images within an article. Maybe we could add a new one especially for images within an item.
I think how it now works is even better than how it was before. Now you have much more control over how the image will be shown. And especially template designers will have much more control.

"Captions shouldn't really be centered and figures most certainly should not have margins removed. "
Where do you take that rule from? Why would you prevent a user from having no margin and a centered caption in an article? By doing this you would force the user to create tables.

Understand me well: it may be what figures are for, but then why force to use figures in articles?

As Bakual states (If I understand well) I am speaking of images in articles not of the images and links feature.
Bootstrap is already forcing most sites to look alike so we would also have that "normalised"?

Let me try to explain further:
In a site, I may want to have in some articles some images centered or not on the page with centered captions, and in other articles images aligned differently as well as captions.
How can I manage with TinyMCE to reach that goal?

@infograf768 I played a bit around with the options in TinyMCE and it looks like you can do quite a lot of funny stuff now. For the screenshot below I selected "left" in the align dropdown list and after it was inserted I used the right align button in TinyMCE to align it right.

This results in a left-floated, right-aligned image. So this kind of stuff would be possible if needed.

I'm not sure if we should add a rule to protostar to center it by default. I think it would only make it harder to specify something else in the editor.

The margins are set by the browser to 40px. Personally I don't think it looks bad as it is. I like some margin around the pictures, especially if there is a caption. But that's a design question and I suck at design. I would like to leave that open for now.

The observed behaviour of both figures and caption text is, I believe, correct as it is the result of a browsers default styles being applied. Typographical style defaults are almost identical across all browsers, because they are accepted typographical conventions. In a LTR document it is the always default that text flows left to right and margins are applied to figures, in all browsers.

In no way does this prevent a user from removing the margin, we're simply not disabling a standard browser behaviour. I'd consider that a fix.

It is easy to achieve any layout of figures or captions using only the text editor and without the use of tables.

Protostar does not style the figure or figcaption elements beyond the styles applied in Bootstrap's ‘css reset’ normalize.css (https://github.com/joomla/joomla-cms/blob/master/media/jui/less/reset.less#L13), so I think this can also be considered to be the standard behaviour for Bootstrap also. Without a very good reason to break these conventions, I'd argue against doing so in Joomla!'s default template as it sets a bad example to both users and template developers.

My $0.02.

Added an option to apply a class to the figure element form within the popup. The class field also makes use of the new HTML5 datalist tag (discovered that one today ) which makes the field show some suggestions for the class. I've added text-left, text-center and text-right to this list as those are the Bootstrap classes for aligning text.

I also changed the language string for the floating from "Align" to "Image Float" so it is consistent with the article options.

This is great @Bakual

win=win

+1

After some discussion with @infograf768 we improved this again:

• Moving caption class from <figure> to <figcaption>. There were some issues when the caption was longer than the image width
• Fixed the datalist. There was a typo
• Added a "center" option to the "Image Float" list. This will apply the (new) class pull-center to <figure>
• Added some CSS rules to the templates. This will make sure the text is aligned to the image instead to the page and it will also autowrap the caption if it's longer than the image width.

Another update:

• Changed the tag to use CSS floating instead of the deprecated align attribute
• Added tooltips to the Image Float and Caption Class fields

I suggest to add to beez and hathor the following css
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}

and to suggest these in the Tip for Caption Class field
instead of
+COM_MEDIA_CAPTION_CLASS_DESC="This will apply the entered class to the '<figcaption>' element"
maybe
+COM_MEDIA_CAPTION_CLASS_DESC="This will apply the entered class to the '<figcaption>' element. For example: 'text-left', 'text-right', 'text-center'"