Advanced configuration settings for images, block quotes, and columns

Created by Cole LaFrance, Modified on Fri, 29 May 2020 at 12:44 PM by Ryan Ginsberg

NOTE: These advanced configuration settings are in beta and have not been configured on every site. They do not yet have a user interface, which means that you'll need to be familiar and comfortable with editing posts in "Source" mode. This article is meant to be a reference for clients who have already discussed advanced configuration needs with Digital Deployment. If you're not sure if these settings have been configured on your site, or you would like more information on how they're to be used, please submit a ticket and a member of our support team will be in touch.

This article will cover how to make the following changes:

Images

Change width
Change position within body content (float left/right/center)
Change where the caption displays (left/right of image)
Embed photo galleries using all or select images

Block Quotes

Change position within body content (float left/right/center)

Columns

Placing images into columns
Placing text into columns
Places images and text in columns

NOTE: When adding classes to content, type directly into the post source by clicking the "Source" button in the editor. Do not copy/paste from text below as formatting may disrupt class functionality.

Images

To change how images are displayed in the body content, you must first embed the image by adding the image tag. Once you upload your image, copy and paste the [image:#] into the body text where you want it to appear. By default, this image will display at 100% width of the post.

Changing the image width (percentage)

[image:#, image w25]

Here are the different widths you can use:

w25: Reduces the width of the image to 25%
w30: Reduces the width of the image to 30%
w35: Reduces the width of the image to 35%
w40: Reduces the width of the image to 40%
w45: Reduces the width of the image to 45%
w50: Reduces the width of the image to 50%
w55: Reduces the width of the image to 55%
w60: Reduces the width of the image to 60%
w65: Reduces the width of the image to 65%
w70: Reduces the width of the image to 70%
w75: Reduces the width of the image to 75%
w80: Reduces the width of the image to 80%
w85: Reduces the width of the image to 85%
w90: Reduces the width of the image to 90%
w95: Reduces the width of the image to 95%

Change position (float left/right/center)

Float right:
[image:#, image right]
Float left:
[image:#, image left]
Center:
[image:#, image center]

Change where the caption displays (left/right of image)

Floating the image caption right:
[image:#, image caption-right]
Floating the image caption left:
[image:#, image caption-left]

Floating the image left and the caption right:
[image:#, image left caption-right]
Floating the image right and the caption left:
[image:#, image right caption-left]

Change multiple items: width and position (with or without caption)

List the image tag, followed by the width and position/caption

Examples:

[image:#, image w75 left]

[image:#, image w75 caption-right]

[image:#, image w75 left caption-right]

Photo Galleries

To add photo galleries using all images or specific images you’ll need to click the Source button in the toolbar and add this special HTML where you’d like the gallery to appear:

All images:

<div class="photo-gallery">[images]</div>

Specific images:

<div class="photo-gallery">[image:1][image:3][image:4][image:123]</div>

Block Quotes

Create the blockquote by typing the quote in a regular paragraph block. Then click the “ icon in the toolbar to engage the blockquote styling. Click the source button and special styling by adding class=”right” or class=”left” to the first part of the blockquote.

Change position within body content (float left/right/center)

Float a blockquote right:
<blockquote class="right"> … </blockquote>
Float a blockquote left:
<blockquote class="left"> … </blockquote>

Columns

Click the source button in the toolbar to add these special styles.

Images in columns

Placing photos into two columns (50% width on each image):
<div class="two-columns">[image:4][image:123]</div>
Placing photos into three columns (33% width on each image):
<div class="three-columns">[image:1][image:3][image:4]</div>
Placing photos into four columns (25% width on each image):
<div class="four-columns">[image:1][image:3][image:4][image:5]</div>
Adding lines between photos:
<div class="three-columns lines">[image:1][image:3][image:4]</div>

Text in columns

Placing text into two columns (50% width on each piece of text):
<div class="two-columns">
  <p>Text for 1st column</p>
  <p>Text for 2nd column</p>
</div>
Placing text into three columns (33% width on each piece of text):
<div class="three-columns">
  <p>Text for 1st column</p>
  <p>Text for 2nd column</p>
  <p>Text for 3rd column</p>
</div> 
Placing text into four columns (25% width on each piece of text):
<div class="four-columns">
  <p>Text for 1st column</p>
  <p>Text for 2nd column</p>
  <p>Text for 3rd column</p>
  <p>Text for 4th column</p>
</div>
Adding lines between text columns:
<div class="three-columns lines">
  <p>Text for 1st column</p>
  <p>Text for 2nd column</p>
  <p>Text for 3rd column</p>
</div>

Photos and text in columns

Placing photos and text into two columns (50% width on each piece of content):

<div class="two-columns">
  <p>Text for 1st column</p>
  <p>[image:2]</p>
</div>

Photos and lists in columns

Floating an image left or right to wrap it around a list can be difficult. Instead, try adding a list and an image in separate columns to achieve the same look:

<div class="two-columns">
  <p>[image:3]</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
    <li>List item 6</li>
  </ul>
</div>

You can use all the different versions of columns with or without lines between them by replacing the text for images or the images for text.