How to Word Wrap Text Around Photos on SmugMug

Wrapping Text Demo

While SmugMug gives you an option to add text by a photo, there is no option to wrap a field of text around an image using either a Photo Block or Text Block. The sollution is to use a HTML/CSS block. In this demo I have two images, one is left aligned and the other is right aligned. So drop a HTML/CSS block into the page you want.

Copy the code below into the HTML and CSS sections.

You will need to find the URL of the image(s) (image-url-here) that you're going to use. The easiest way is to use the Share option.

Once you've done that you can edit the alt="alt-text-here" to suit your image.

HTML


<img src="image-url-here" alt="alt-text-here" class="alignleft" />
<p>Text here.</p>
<p>Text here.</p>

<img src="image-url-here" alt="alt-text-here" class="alignright" />
<p>Text here.</p>
<p>Text here.</p>
<p>Text here.</p>
<p>Text here.</p>

CSS


.alignleft {
  float: left;
  margin: 0 1.5rem 1.5rem 0;
}

.alignright {
  float: right;
  margin: 0 0 1.5rem 1.5rem;
}

What happens if you have a couple of images, and you only have a few lines of text? Simple, You can wrap each image and text into a div as shown here.

HTML


<div class="my-container">
  <img src="image-url-here" alt="alt-text-here" class="alignleft" />
  <p>Nunc mollis arcu eu elementum rutrum. Ut aliquet arcu quis nisi tincidunt maximus et ut quam. Aliquam laoreet posuere diam, a fermentum tellus iaculis sit amet. Curabitur pellentesque lorem ut nibh placerat tincidunt. Proin sagittis euismod mauris vel pellentesque. Pellentesque eget risus malesuada, vulputate libero eget, dictum felis.</p>
</div>
<div class="my-container">
  <img src="image-url-here" alt="alt-text-here" class="alignright" />
  <p>Fusce quis quam enim. Praesent sit amet dui ligula. Ut ut fringilla elit, in condimentum arcu. Curabitur velit nulla, vehicula eget enim ac, efficitur consectetur purus. Sed sit amet mollis lorem. Morbi nisl nunc, dignissim a quam molestie, viverra auctor urna. Aliquam eleifend erat non ipsum aliquam posuere. Fusce vel magna eu diam feugiat aliquet vel eget sem. Duis eu diam metus. Etiam vel massa eget urna venenatis sagittis.</p>
</div>


.my-container {float: left;}

.alignleft {
  float: left;
  margin: 0 1.5rem 1.5rem 0;
}

.alignright {
  float: right;
  margin: 0 0 1.5rem 1.5rem;
}

Nunc mollis arcu eu elementum rutrum. Ut aliquet arcu quis nisi tincidunt maximus et ut quam. Aliquam laoreet posuere diam, a fermentum tellus iaculis sit amet. Curabitur pellentesque lorem ut nibh placerat tincidunt. Proin sagittis euismod mauris vel pellentesque. Pellentesque eget risus malesuada, vulputate libero eget, dictum felis.

Fusce quis quam enim. Praesent sit amet dui ligula. Ut ut fringilla elit, in condimentum arcu. Curabitur velit nulla, vehicula eget enim ac, efficitur consectetur purus. Sed sit amet mollis lorem. Morbi nisl nunc, dignissim a quam molestie, viverra auctor urna. Aliquam eleifend erat non ipsum aliquam posuere. Fusce vel magna eu diam feugiat aliquet vel eget sem. Duis eu diam metus. Etiam vel massa eget urna venenatis sagittis.