Image Block Left or Right (w/Caption) Snippet

Another option for using photography on your webpages is to place photos within a paragraph of text. The Image Block Left (w/Caption) and the Image Block Right (w/Caption) affords you the possibility of adding an image in a paragraph of text that flows around the image.

This is a DIY snippet. You can add it to your pages without assistance from Digital Strategy. Make sure to follow all standards outlined in this guide.

This snippet should only be used in the Main Content Region.

The Image Block Left (w/Caption) allows you to add a photo that is left justified (placed on the left) with text that flows around the image. A very brief caption is also an option for this snippet. For more information see Resizing In-Content Images (PDF). 

The Image Block Right (w/Caption) allows you to add a photo that is right justified (placed on the right) with text that flows around the image.

Example

Student in class
Optional captions for this snippet should be brief.

Image Block Left (w/Caption)

Adding the Image Block Left (w/Caption) allows you the option to place the image within a paragraph of text that will flow around the image to the right. Images for this snippet should be cropped as in-content images (use web image code 鈥漣c.鈥�). There are three options for getting your images cropped as in-content images (dependent on the image orientation): horizontal crops, vertical crops and square crops.  

快活视频music student playing a trumpet
Optional captions for this snippet should be brief.

Image Block Right (w/Caption)

Adding the Image Block Right (w/Caption) allows you the option to place the image within a paragraph of text that will flow around the image to the left. Images for this snippet should be cropped as in-content images (use web image code 鈥漣c.鈥�). There are three options for getting your images cropped as in-content images (dependent on the image orientation): horizontal crops, vertical crops and square crops.  

What Works

  • adding a paragraph of text with a minimum of five to seven lines of text that flows around the image

What Doesn鈥檛

  • adding less than five to seven lines of text will cause a large blank space between the paragraph鈥檚 end and the next line of text