Why is there no wrap image in text option?

Developer help
5

@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