Actions

Work Header

How to Wrap Text around Images

Work Text:

preludeinz on tumblr made a request for a tutorial about wrapping text around images. I'm going to show you two ways you can possibly do this with the main version not requiring the use of a separate workskin at all.

First of, probably the most simple way is to add align="" to our image html, where can be either "right" or "left". The text that follows it will then be aligned to the opposite side of the image. So if your image was aligned left, your text will be aligned to the right, and vice versa.

For example, if we wanted our image to be on the right, we would put the following:

<img src="IMAGE URL HERE" align="right">

Which would give us something like this:

Image is a blue rectangle with white text in the center that reads 'Width: 300px Height: 200px'This is text with images aligned on the right and the following text on the left.

The image doesn't have to necessarily come before the text. For example, here's a image aligned left (align="left") in the middle of some dummy text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac eleifend erat, eget pellentesque eros. Duis eget mi id justo pellentesque convallis. Pellentesque ac lectus a ligula feugiat porttitor ac vitae magna. Quisque in nibh eget nisi blandit luctus quis iaculis tellus. Etiam eleifend risus felis, id pretium lectus ullamcorper in. Curabitur bibendum malesuada sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Image is a blue rectangle with white text in the center that reads 'Width: 300px Height: 200px' This is text after the image coding. Vestibulum volutpat mi non molestie tempor. Cras at molestie orci. Aliquam in convallis diam. Vestibulum diam nibh, tempor et ligula eget, sollicitudin tempor nisl. Vivamus vel nulla aliquet felis sodales hendrerit sit amet in turpis. Integer euismod sem eu orci pellentesque luctus. Donec non mi interdum, porta enim finibus, finibus neque. Aliquam interdum sem nec mattis scelerisque. Vestibulum sagittis magna vitae feugiat efficitur. Proin cursus tincidunt vestibulum. Morbi lobortis justo id felis vulputate, eget feugiat libero efficitur. Phasellus pretium hendrerit lectus interdum rhoncus. Pellentesque sagittis libero dui, ac sagittis neque vehicula at. Praesent egestas sed quam a gravida. Maecenas eleifend orci euismod est porttitor, id laoreet ipsum volutpat. Vestibulum vitae lacus sodales, tincidunt erat sit amet, tempor urna. Ut viverra mauris nulla, consequat lobortis mi vulputate eu. Sed scelerisque nisi consectetur urna vulputate, id mollis risus porttitor.

You can also have multiple images in different alignments in the same paragraph. Here's an example of image being aligned to the right and then one to the left:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim libero, bibendum blandit hendrerit in, varius id tortor. Donec dictum magna orci, porta facilisis nunc efficitur ac. Vestibulum rhoncus congue erat, sed ornare nisl luctus vitae. Donec pellentesque congue est, et dictum orci euismod sit amet. Etiam consectetur mauris et nunc finibus tincidunt. Sed mauris magna, sollicitudin ac dignissim ac, pulvinar non mauris. Donec erat dui, cursus eget lectus a, semper posuere risus. Cras eu nulla leo. Sed mollis, nisl sit amet venenatis viverra, ipsum nulla dictum turpis, vel facilisis elit sem ut nunc. Image is a blue rectangle with white text in the center that reads 'Width: 300px Height: 200px' This text after the image aligned to right is inserted.Vivamus lectus leo, maximus vitae risus et, faucibus mattis ante. Nullam facilisis vulputate sagittis. Proin sed ullamcorper sapien, venenatis eleifend mi. Integer sed fringilla risus. Cras varius dignissim pellentesque. Proin vehicula turpis eu orci lacinia fermentum. Aenean sem ipsum, mattis sit amet ultricies in, efficitur scelerisque arcu. Ut ut felis id dolor ultrices sollicitudin. Phasellus magna lacus, euismod id dolor id, fringilla aliquet mi. Vestibulum mollis mattis ipsum commodo condimentum. Cras consectetur tincidunt nunc, sit amet fermentum orci tempus eu. Donec ullamcorper leo tortor, facilisis ullamcorper lectus volutpat non. In egestas urna sed tempus interdum. Vivamus nec est vel velit vestibulum imperdiet vitae nec lacus. Image is a blue rectangle with white text in the center that reads 'Width: 300px Height: 200px' This text after the image aligned to left is inserted. Duis orci mi, dignissim eget venenatis ac, ultricies quis mi. Nam turpis arcu, bibendum ut mi et, accumsan tempor eros. Nullam cursus est a condimentum consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet volutpat elit. Phasellus pretium felis euismod, ornare nibh nec, posuere dui. Donec pharetra enim ac augue pellentesque tincidunt. Suspendisse arcu ligula, rhoncus at neque tempus, sodales luctus dui. Maecenas id nunc at metus maximus hendrerit. Aenean accumsan, magna et laoreet gravida, enim purus iaculis lacus, ut mattis risus diam ut turpis. Maecenas suscipit neque quis arcu ullamcorper, accumsan condimentum lacus luctus. Proin placerat in ex fringilla sodales. Curabitur dignissim ante at mi pharetra, at vulputate quam posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris ornare ipsum vitae odio posuere, condimentum sodales metus ultrices.

The thing to remember while using this technique is that once you align an image, text is going to continue wrap around it, even if you have a separate paragraph(s), until the text clears the image. To better explain what I mean, let's look again at the first example we had:

Image is a blue rectangle with white text in the center that reads 'Width: 300px Height: 200px'It's fine if we want this line of text to be wrapped around the image.

But what about this one?



Or even this one? Even dividers will get caught up in it.



The way to get around this is by adding <br class="clear"> at the end of the end of the text we want wrapped around our image. For example, if we put the following in our worktext:

<img src="URL HERE" align="right">This text is aligned with our image.<br class="clear">
This text is not aligned.

We now get this:

Image is a blue rectangle with white text in the center that reads 'Width: 300px Height: 200px'This text is aligned with our image.

This text is not aligned.

I'm a fan of aligning images this way because it works even when the creator's style is turned off. However, there is a way to use a workskin to align your images if you really want to go that route.

First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "Create Work Skin". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box we're going to put the following:

#workskin .imgr {
  float: right;
}

#workskin .imgl {
  float: left;
}

I've created two different sections, one for each alignment, but if you want just right (or just left), feel free to get rid of the other one.

Hit "Submit" (or "Update" if adding to a previous work skin), and you've created the work skin for aligning images. Now to implement it.

Go to your the work you want the images aligned, and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", and how you want you want your images aligned will change what coding you use.

To go back to our first example with the image on the right, you would put the following in your Work Text:

<img src="URL HERE" class="imgr">

And again you'll get the image aligned to the right, but using a workskin only:

Image is a blue rectangle with white text in the center that reads 'Width: 300px Height: 200px'

Our text will be aligned to the left of the image, just like before. Unless you've turned off creator's style, and now the image and text are not aligned. To turn creator's style back on, click here

And we still have the text sticking to the image because we aren't using the <br class="clear"> coding.

The problem, as mentioned before, is that if the creator's style is turned off, the text isn't wrapped. (Click here to see what I mean) You could always make sure it'll align no matter what by using both align="right" and class="imgr", but that seems rather excessive and unnecessary.

So is there any point in using a work skin while wrapping text around images? Kind of; you can use CSS to affect how the text wraps around the image. For example, here's a dummy paragraph wrapped around a image just using align="left":

Image is a blue rectangle with white text in the center that reads 'Width: 300px Height: 200px'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim libero, bibendum blandit hendrerit in, varius id tortor. Donec dictum magna orci, porta facilisis nunc efficitur ac. Vestibulum rhoncus congue erat, sed ornare nisl luctus vitae. Donec pellentesque congue est, et dictum orci euismod sit amet. Etiam consectetur mauris et nunc finibus tincidunt. Sed mauris magna, sollicitudin ac dignissim ac, pulvinar non mauris. Donec erat dui, cursus eget lectus a, semper posuere risus. Cras eu nulla leo. Sed mollis, nisl sit amet venenatis viverra, ipsum nulla dictum turpis, vel facilisis elit sem ut nunc. Vivamus lectus leo, maximus vitae risus et, faucibus mattis ante. Nullam facilisis vulputate sagittis. Proin sed ullamcorper sapien, venenatis eleifend mi. Integer sed fringilla risus. Cras varius dignissim pellentesque.

See how close the text is to the image? Maybe we want a little bit of space between our image and text. So let's go to our work skin and since we're not using the work skin to align our images, we can have only the following for our skin:

#workskin .img {
padding: 1em;
}

CAUTION: If you use .img, then you have to add class="img" to all images you want to modify. If you remove the period in front of img (i.e. just have #workskin img), you don't have to add class="img" because your coding will automatically affect ALL of your images in your work. Which might be a good thing if you want all your images to be the same, but if you want to affect different images individually, best to go with a system like .img, .img2, .img3, etc. and change each section to your liking.

Okay, back in our Work Text box, we would put the following before our dummy text:

<img src="URL HERE" align="left" class="img">

Then we would now get the following:

Image is a blue rectangle with white text in the center that reads 'Width: 300px Height: 200px'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim libero, bibendum blandit hendrerit in, varius id tortor. Donec dictum magna orci, porta facilisis nunc efficitur ac. Vestibulum rhoncus congue erat, sed ornare nisl luctus vitae. Donec pellentesque congue est, et dictum orci euismod sit amet. Etiam consectetur mauris et nunc finibus tincidunt. Sed mauris magna, sollicitudin ac dignissim ac, pulvinar non mauris. Donec erat dui, cursus eget lectus a, semper posuere risus. Cras eu nulla leo. Sed mollis, nisl sit amet venenatis viverra, ipsum nulla dictum turpis, vel facilisis elit sem ut nunc. Vivamus lectus leo, maximus vitae risus et, faucibus mattis ante. Nullam facilisis vulputate sagittis. Proin sed ullamcorper sapien, venenatis eleifend mi. Integer sed fringilla risus. Cras varius dignissim pellentesque.

This puts a margin around the image so the text isn't as close. The thing about this is that it puts a margin on all sides, not just the side by the text. We can adjust this by adding directions to our margin like the following:

#workskin .img {
margin-top: .5em;
    margin-right: 1em;
    margin-bottom: .5em;
    margin-left: 0em;
}

Which gives us the following (I've put the image in between the paragraphs so you get a better idea of the top and bottom margin):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim libero, bibendum blandit hendrerit in, varius id tortor. Donec dictum magna orci, porta facilisis nunc efficitur ac. Vestibulum rhoncus congue erat, sed ornare nisl luctus vitae. Image is a blue rectangle with white text in the center that reads 'Width: 300px Height: 200px' Donec pellentesque congue est, et dictum orci euismod sit amet. Etiam consectetur mauris et nunc finibus tincidunt. Sed mauris magna, sollicitudin ac dignissim ac, pulvinar non mauris. Donec erat dui, cursus eget lectus a, semper posuere risus. Cras eu nulla leo. Sed mollis, nisl sit amet venenatis viverra, ipsum nulla dictum turpis, vel facilisis elit sem ut nunc. Vivamus lectus leo, maximus vitae risus et, faucibus mattis ante. Nullam facilisis vulputate sagittis. Proin sed ullamcorper sapien, venenatis eleifend mi. Integer sed fringilla risus. Cras varius dignissim pellentesque. Proin vehicula turpis eu orci lacinia fermentum. Aenean sem ipsum, mattis sit amet ultricies in, efficitur scelerisque arcu. Ut ut felis id dolor ultrices sollicitudin. Phasellus magna lacus, euismod id dolor id, fringilla aliquet mi. Vestibulum mollis mattis ipsum commodo condimentum. Cras consectetur tincidunt nunc, sit amet fermentum orci tempus eu. Donec ullamcorper leo tortor, facilisis ullamcorper lectus volutpat non. In egestas urna sed tempus interdum. Vivamus nec est vel velit vestibulum imperdiet vitae nec lacus. Duis orci mi, dignissim eget venenatis ac, ultricies quis mi. Nam turpis arcu, bibendum ut mi et, accumsan tempor eros. Nullam cursus est a condimentum consectetur.

As you can see, the image has a space between it and the text, but not from the sides of the window so it's still in line with the body of the work. If you wanted to do something similar but with an image that's aligned to the right, you would switch the values of the margin-right and margin-left attributes.

Just so you know, this also the section you would edit if you wanted to add a border to your image. I'm not really going to get in the details of different styling options about borders (I discuss it briefly in this tutorial), but real quickly, this is how we would add a border while still maintaining our margin:

#workskin .img {
margin-top: .5em;
    margin-right: 1em;
    margin-bottom: .5em;
    margin-left: 0em;
border-style: solid;
  border-width: .25em;
  border-color: #f73b67;
}

Image is a blue rectangle with white text in the center that reads 'Width: 300px Height: 200px' Which now gives us a pink (hex code #f73b67) border around our image.

The last thing I want to discuss is not to do with the images but the text itself and how to get it flush with our image by justifying it. If you're not aware of justifying text, I can better explain what I mean by the following example:

Image is a blue rectangle with white text in the center that reads 'Width: 300px Height: 200px' This example is just using align=right with our image which aligns our text to the left. However, as the text gets closer to the image, especially when in a paragraph, our lines of text began to look jagged and not exactly lining up with the side of our image. This is due to the different character lengths of each of our lines not adding up to be equal. You can get a better idea of what I mean when I add some dummy text. Nullam facilisis vulputate sagittis. Proin sed ullamcorper sapien, venenatis eleifend mi. Integer sed fringilla risus. Cras varius dignissim pellentesque. Proin vehicula turpis eu orci lacinia fermentum. Aenean sem ipsum, mattis sit amet ultricies in, efficitur scelerisque arcu. Ut ut felis id dolor ultrices sollicitudin. Phasellus magna lacus, euismod id dolor id, fringilla aliquet mi. Vestibulum mollis mattis ipsum commodo condimentum. Cras consectetur tincidunt nunc, sit amet fermentum orci tempus eu. Donec ullamcorper leo tortor, facilisis ullamcorper lectus volutpat non. In egestas urna sed tempus interdum. Vivamus nec est vel velit vestibulum imperdiet vitae nec lacus.


But we can add the following section to our work skin:

#workskin p {
  text-align: justify;
}

And now our text lines are flush against our images:

Image is a blue rectangle with white text in the center that reads 'Width: 300px Height: 200px' Nullam facilisis vulputate sagittis. Proin sed ullamcorper sapien, venenatis eleifend mi. Integer sed fringilla risus. Cras varius dignissim pellentesque. Proin vehicula turpis eu orci lacinia fermentum. Aenean sem ipsum, mattis sit amet ultricies in, efficitur scelerisque arcu. Ut ut felis id dolor ultrices sollicitudin. Phasellus magna lacus, euismod id dolor id, fringilla aliquet mi. Vestibulum mollis mattis ipsum commodo condimentum. Cras consectetur tincidunt nunc, sit amet fermentum orci tempus eu. Donec ullamcorper leo tortor, facilisis ullamcorper lectus volutpat non. In egestas urna sed tempus interdum. Vivamus nec est vel velit vestibulum imperdiet vitae nec lacus.

CAUTION: Like you might have guessed because there was no period in front of the p, using #workskin p affects ALL of the paragraphs in the body text of your work. Personally, I think it looks better, but if some reason you only want the paragraphs with images to be justified, you can switch the name of the work skin section to something like #workskin .justify (just putting a period in front of the p won't work in this case for some reason), and then depending on how many paragraphs you have that you want aligned is where you put the class="justify">.

What I mean is, for just one paragraph, you would put it like this:

<p class="justify">This is the one paragraph to be justified.</p>

For multiple paragraphs, I would put them all in a div tag so you don't have add the class coding for each and every paragraph, like this:

<div class="justify"><p>This our first paragraph, justified.</p>

<p>And our second.</p>

<p>And our third, still justified.</p>

NOTES

- Doing some research, I found there is a way to have text wrap around a centered image, but a) it can be accomplished with a work skin only, and b) it's a little more coding intensive. So I've skipped it for now, but if there's enough demand for it, I might give it a go some day.

- This doesn't really work on mobile devices; it just shoves the image in the middle of the text, so keep that in mind.

- As always, if you have any questions or concerns, feel free to leave a comment here or send me an ask at to-skin-a-fic.tumblr.com