2

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

Craft's Position Select 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?!

2

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.

| improve this answer | |
  • How is this any different from the classical image floats? – Sandwich Jun 27 '16 at 12:49
  • It's pretty much the same, only using the position field makes it really easy and nice for the end user to choose how to position the image. They shouldn't have to care how it's doing it - other than if I click the left position, the image will be on the left, text wrapping around it. – Damon Jun 28 '16 at 15:48
  • 1
    Ok, but the question is how to achieve the drop-left and drop-right positioning specifically, as opposed to the left and right positions. Supplying code for achieving the latter does not answer the former... ;) – Sandwich Jun 28 '16 at 19:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.