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?

1 Like

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.

2 Likes

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.

6 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.

1 Like

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

Within an HTML Card, the text reverts to the standard font for “body”. Just make sure that and whatever your theme font is match in the code injection for your site.

1 Like

Just got to jump in here and say Thank You! This is a very easy system to implement, and adds some functionality Ghost was definitely missing. Thanks!

2 Likes

I tested this method with the Casper v5 theme, and it doesn’t work. The reason appears to be that the theme uses a grid layout, and this method of CSS floating doesn’t work in vrid layouts, re-enforcing the idea that there’s no universal solution for floating images.

I may just give up on using floating images to give myself more flexibility to change my theme later.

Ref: css float - Floating elements in CSS Grid - Stack Overflow

This isn’t true at all. Ghost uses a grid layout, and that’s the problem - the short-sighted design choice effectively cuts off customized css layout.

Of course, you can add all your text and images using html…but if I’m writing my own html…remind me again why Ghost matters in the first place?

No matter what features Ghost adds, it’s effectively an amateur solution for anyone who cares about precision design until they move away from grid.

There’s no requirement for Ghost themes to use grid. Some themes that don’t:

Liebling (free): Liebling
Porto: Porto
Curie: Curie
Reiro: Reiro

It also wouldn’t be all that hard to convert one of the official themes to flexbox, either. I think (without digging back through the repos) that several of the official themes were not gridded a year ago. Seems like the Ghost team has standardized on a gridded layout for the themes they maintain, but nothing in the output from the post editor mandates it.

I’d be interested to hear about the design choices involved in going with a grid-heavy layout (because I can see a lot of benefits, in addition to this tradeoff), but I doubt a thread in which you’re throwing around ‘short-sighted’ is likely to get an interesting response of that sort.

4 Likes

That works nicely.
Could it be applied to more cards too, like the callouts, bookmarks, products…?

I can’t see why not, although it may require tweaking the code further.