How does one achieve drop-left or drop-right image position?

Question

How is one to achieve the layout visualised by Craft's drop-left and drop-right icons?

I feel dumb asking but I don't know of any way to have a floated image stick to the bottom of its sibling text node with text running around it above and to the side, which is what is implied by the icons.

What have I been missing all these years?!

Answer 1

Generally, I'll have a div that picks up on the position's value.

For example:

<div class="image-{{ entry.myPositionHandle }}">
    <img src="my-image.jpg">
</div>

That renders something like:

<div class="image-left">
    <img src="my-image.jpg">
</div>

Then I'll have a css rule like this:

.image-left img {
    float:left;
}

It's also important to note where you place this element in relation to your text. You many need to put the image call before or after your text.