Image Management Tutorial

How to...Optimize Pages and News Items for Social Sharing

Kelly Hansen — Thu, 10 Mar 2022 22:58:20 +0000

How to...Optimize Pages and News Items for Social Sharing Kelly Hansen Thu, 03/10/2022 - 17:58

View a Sample Optimized News Article

Use Correct Image Sizes

More About News Items

How to... Login to Content Hub
May 8, 2023
How to...Create a News Item - Legacy
July 26, 2022
How to...Optimize Pages and News Items for Social Sharing
April 28, 2022
How to...Use the Blockquote Style to Format a Fact Box
April 8, 2022
How to...Topic Tag and Share a News Item
March 10, 2022

Always expect news items to be shared on social media.

Add a custom summary text and a thumbnail to every page, profile, and news item to improve brand impact, social engagement, as well both external and internal search engine ranking (SEO). The thumbnail and summary text display as the page's social media card and search result preview snippet.

This page's thumbnail and summary text in action.

Guide to Adding Summary Text and Thumbnail

Summary text and thumbnail images are added on the ‘Edit Settings’ screen
The thumbnail and summary text combine to become the page's search result and social media card preview snippet
The summary text should be a one-sentence highlight of the article
The thumbnail image should be an informative visual illustration of the summary text
Thumbnail images should be square (1:1 ratio) images, with minimum dimensions of 300x300 pixels and maximum dimensions of 600x600 pixels
Use a social media previewer such as OpenGraph

Even if you have no distribution plans of your own, web content is highly shareable. One can’t predict which stories will be shared by your readers.

Dr. Washington avidly promotes Mason on social media, he may be sharing your story!

Topics

Content Hub

Best Practices Tutorial

News Item Tutorial

Image Management Tutorial

Content Hub News Items

How to...Add Alt Text to Images

Kelly Hansen — Mon, 13 Dec 2021 21:51:40 +0000

How to...Add Alt Text to Images Kelly Hansen Mon, 12/13/2021 - 16:51

��AV is committed to ensuring an inclusive digital experience. One essential practice to maintain accessibility is adding descriptive alt text to images.

What is Alt Text?

Alt text, or alternative text, is a brief description of an image that allows screen readers to convey the image’s content to users with visual impairments. It ensures that images are accessible to everyone, providing essential context for those who cannot see them. Alt text also improves SEO, as search engines favor pages that provide meaningful alt text for images.

Best Practices for Writing Alt Text

Be specific and relevant: Focus on what the image represents and its function within the content.
Be concise: Keep descriptions short but informative. Avoid overly detailed or redundant explanations.
Describe the purpose: If the image contains information not provided elsewhere, include that key information in the alt text.
Use context-appropriate language: Tailor the description to fit the surrounding content, avoiding technical jargon or irrelevant details.
Handle decorative images appropriately: If an image is purely decorative and doesn't add to the content, use null alt text (alt="") to signal screen readers to skip the image.

Example of Alt Text in Action:

For a photo of a tree: “A large oak tree with green leaves in summer.”
For a chart: “A bar chart comparing enrollment data from 2022 and 2023, showing a 15% increase in enrollment.”
For decorative images: Use empty alt text (alt="").

SiteMasonry CMS – How to Add Alt Text to Images

SiteMasonry offers two main ways to add images: via the Featured Image block and by embedding images into a Text Block. Adding alt text ensures that images remain accessible and compliant with accessibility standards.

Adding Alt Text to a Featured Image

Featured images automatically prompt for alt text upon upload.

Navigate to your page and select the Featured Image block.
Upload your image and enter a brief, descriptive alt text.
Click Save to finalize.

Adding Alt Text to an Embedded Image

Embedded images require manual entry of alt text.

Place your cursor in the text block where the image should appear.
Use the Insert Media icon to upload or select an image.
After inserting, click the Edit Media icon on the image.
Add a descriptive alt text, then select alignment and size if needed.
Click Save to apply the changes.

Additional Resources

Topics

Image Management Tutorial

Accessibility Tutorial

Best Practices Tutorial

Content Hub

SiteMasonry Tutorial

SiteMasonry

Digital Accessibility

How to...Embed an Image

Kelly Hansen — Tue, 16 Mar 2021 18:14:27 +0000

How to...Embed an Image Kelly Hansen Tue, 03/16/2021 - 14:14

Embedded images are secondary supporting images within the text of a news story. The June 2021 update to the embed feature changed the icon in the WYSIWYG toolbar and smoothed out the embed process.

Create your content item (page or content type - news, faculty profile, program)

Click the 'Customize Page' tab
Add a 'Basic Text' block to a section
Title the block
Add text content (I used cupcake Ipsum to generate filler text - http://www.cupcakeipsum.com/)
put your cursor in the top left corner of the block editing window, ahead of the text you pasted in
Click the embed icon (it looks like an image with musical notes on top of it)
Upload an image to embed - I chose a 6 KB cupcake image
Click Save and Insert

After inserting the image in the block, you will need to add the alt text, set the alignment, opt to use a caption, and choose the display size. From the text block:

Click the small 'edit' button next to the image in the text block
Add alt text
Select the alignment (none, left, center, right)
If a caption is needed, click the caption box (you will add the caption after the image is placed)
Select the desired display size (extra large, large, medium, small)
Click 'save'

View a sample page with image embed sizes and descriptions.

Commit your work by clicking 'save layout' on the Customize Page screen

Remember to publish!

View a sample page with image embed sizes and descriptions.

Topics

Page Basics

Image Management Tutorial

Image Management Tutorial

How to...Optimize Pages and News Items for Social Sharing

View a Sample Optimized News Article

Use Correct Image Sizes

More About News Items

Guide to Adding Summary Text and Thumbnail

Topics

How to...Add Alt Text to Images

What is Alt Text?

Best Practices for Writing Alt Text

Example of Alt Text in Action:

SiteMasonry CMS – How to Add Alt Text to Images

Adding Alt Text to a Featured Image

Adding Alt Text to an Embedded Image

Additional Resources

Related Tutorials

Topics

How to...Embed an Image

Create your content item (page or content type - news, faculty profile, program)

After inserting the image in the block, you will need to add the alt text, set the alignment, opt to use a caption, and choose the display size. From the text block:

Commit your work by clicking 'save layout' on the Customize Page screen

Topics