Aligning images (HTML image embedding) does not work

[aleksati]

Referring to this page of the guides talking about how we should embed images. I tried to downsize an image quite substantially before using align to relocate the image in the post. However, adding "left", "right" or "middle" does nothing. The image simply stays center.

<figure align="changing this field does not align the image">
   <img src="assets/image/YYYY_MMDD_username_filename.jpg" alt="Alternate Text" 
    title="Image Title" width="auto" height="auto" />
   <figcaption align="middle">Caption Text</figcaption>
</figure>

[stefanofasciani]

We should inspect the body of a blog post and check if the image inherit the alignment from any other CSS style in the theme of the blog (or if there is anything overriding the stated alignment). I am pretty sure that is the cause of this bug.

[aleksati]

@stefanofasciani , I havnt been able to figure out whats overriding the align attribute in the HTML media content embedding after trying a whole bunch of things. But the conflict must be with the "@import "minima" statement at the very top of the css file and this section we have added (I think...):

.wrapper figure, .wrapper img, .wrapper video, .wrapper iframe {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  margin-left: auto;
  margin-right: auto;
  display: table;
}

.wrapper figcaption {
  display: table-caption;
  caption-side: bottom;

However, what does work is replacing "align="left/right/middle" with "style = float: left/right/none", like this:

<figure style="float: left">
   <img src="/assets/image/2018_08_22_stefanof_AshaneSilva.jpeg" alt="Alternate Text"
   title="Image Title" width="100" height="100"/>
   <figcaption>Caption Text</figcaption>
</figure>

This aligns the fig caption and figures well without having to remove anything in the css. But have a look to see if you find the culprit which doesnt allow us to use the "align" method when you have the opportunity.

[stefanofasciani]

the floating style seems a suitable alternative. If this is the only way, consider updating the instructions in the guide. Would that work also with Videos and Audio Player?

[aleksati]

@stefanofasciani I have to check if it is compatible with video and audio. If yes, then I will update the guides with the updated info.

[aleksati]

The style="float: left/right/none" works fine with all media content. And since we're always scaling the content size according to its original aspects ratio, the height attribute of the HTML embedding can be misleading. You only ever scale down the width of the content if you want to make it smaller or bigger. The webpage automatically scales the height accordingly. I think this is a nice feature. It can also easily be overridden by commenting out this part of the css:

.wrapper figure, .wrapper img, .wrapper video {
  height: auto;
}

So with this in mind, I think the new way of embedding media content should be like this (with no height):

<figure style="float: left/right/none">
   <img src="/assets/image/2018_08_22_stefanof_AshaneSilva.jpeg" alt="Alternate Text"
   title="Image Title" width="100"/>
   <figcaption>Caption Text</figcaption>
</figure>

@stefanofasciani If you agree, then I can add it to the guides when I have the opportunity.

The only problem with the style="float: left/right/none" method I've encountered is that when aligning a smaller image to either left or right, the text should optimally be a couple of pixels further away from the image wall. Since this is not a pressing issue atm, I will make another issue for this just so that we don't forget.

[stefanofasciani]

that sounds reasonable. You can update the guides accordingly and close this issue. I believe that in the guide you need to update both the HTML code snippet and also the following description explaining all the options/parameters that can be tweaked to adjust the layout and appearance.