Why is there no wrap image in text option?

Wrapping an image in text is a standard and attractive way to display images in a blog post.

Yet wrap image in text does not exist in the default image options and I cannot find a workaround.

Is anyone able to help on this issue?

There is no simple way to wrap images in modern html/css, it would need to be done in a different way for every theme that uses a different type of layout (float, flex-box, grid, etc) and would be very dependent on the surrounding content in a post. Because of that there wouldn’t be a way to have what you see in the editor reliably match what is shown on your website.

If you use a HTML card you can add specific markup that works with the theme you are using in the context of the surrounding content.

1 Like

Appreciate your fast reply, Kevin. The post you linked to doesn’t show any example markup that’d make it easy for users who have limited coding skills to wrap image in text. Perhaps you’d consider adding it to the post? I think it’d be useful for a lot of people.

Also, I’ve just spent an hour trying to work out the CSS for styling the hr divider (3 dots). I can’t work it out. Do you know the CSS for making the dots bigger and changing their colour?

An exact methodology wasn’t specified, but I’d say that a better method than using HTML cards to code the entirety of <figure> and <img> tags (which I’ve been doing for about two years now) would be to utilise image cards and then wrap those with HTML cards, utilising snippets. I clued into this just a couple of days ago, and am in the process of switching everything over. I’ll expand on this, with example code, tomorrow.

1 Like

@redders I used to utilize HTML cards for images for a few years now in order to achieve several stylistic goals that couldn’t be done with image cards out of the box (shrink down portrait-oriented images, add borders to images with white backgrounds, etc.). But with lazy-loading being built into image cards a few months ago (which I was “jealous” of but didn’t want to go through all of my previous images to add the functionality to, never mind what might be added later) I was then indirectly led to cluing in to how to achieve all that I had previously accomplished with HTML cards.

Rather than uploading images, capturing the image’s URL, deleting the image card, creating an HTML card with the URL of the image, etc., the following is one version of my new methodology, in this case for floating images.

First off, and as Kevin insinuated, the float-styling will be different for every theme. The styling I’ve created for one theme I’ve customized is as such, which I added to the coding of the theme itself (you can add it to the site’s code injection if you’d really like):

.float-left-half figure,
.float-left-two-thirds figure {
    float: left;
    margin: 8px 20px 6px 0;
}
.float-right-half figure,
.float-right-two-thirds figure {
    float: right;
    margin: 8px 0 6px 20px;
}
.float-left-half figure,
.float-right-half figure {
    max-width: 50%;
}
@media (min-width: 64em) {
	.float-left-two-thirds figure,
	.float-right-two-thirds figure {
    	max-width: 67%;
    }
}

With that out of the way, the idea is to then wrap snippets around image cards, which makes everything super easy and quick. The first snippet created is a simple </span> snippet since it’ll get used the most often and which you thus want at the top of the snippets list. Then create snippets for the four classes/styles of floating just created.

So in all, the five snippets created for the above float styles are:

</span>
<span class="float-left-half">
<span class="float-left-two-thirds">
<span class="float-right-half">
<span class="float-right-two-thirds">

With those created, every image (image card) you’d like to float you precede it with the snippet whose styling you’re after, then follow it up with the closing snippet.

Easy, and you get to maintain all the present (and future?) advantages of image cards.

3 Likes

@Stromfeldt thanks a lot for sharing this. I’m sure it’ll be useful to a lot of people. This kind of thing should be shared by Ghost.

2 Likes

@redders thanks for sharing this!

I’m trying to follow the instructions - to clarify: after I enter the above code in code injection, when I’m editing text in a page, where do I add the text?

E.g. I tried to create an HTML block, insert this:

<span class="float-left-half">
<img src="file.jpg"  style="width:30%;" >

And then add the text as normal. But I only get the image and after that the text.
I have also tried to add the text within the HTML block, but then it shows as not formatted.

Thanks a lot!

Did you close </span>? And rather than code injection, it may be better to edit the theme css.

@drewlr Did you make sure you wrap the stying for the code injection with <style>...</style> tags?

Secondly, no need for the <img src="file.jpg" style="width:30%;"> portion as the whole idea is to get away from using HTML cards (for the images themselves). Upload an image via the regular image card process, then precede the image card with either your snippet or an HTML card with <span class="float-left-half"> as its code. Last of all, follow the image card with your snippet or an HTML card with </span>

Text doesn’t seem to wrap around the image though. I ended up having an image aligned to the left and text starting below the image. How to get text wrapped around the image as well?

Do you have a URL?

Ok I realized I have to put the closing </span> after a few paragraphs for the text to wrap.

I am curious if there is a way to retain the font styling of the theme within the HTML?