Skip to main content

News With Images Module

Best Practices

  • The News with Images module is designed to highlight exactly three news stories and link to a more detailed new page if needed.
  • If you will have less than three news items, choose a different module.
  • Headlines should intrigue users into clicking the link, but save the in-depth information for the news story itself.
  • Avoid repeating the link text ("learn more," etc.). See example link text. For news items, it may make sense to reference the news organization in the link ("Read on NY Times," etc.).
  • Choose images without text that are all the same size. See News with Images image library.

To create a new news with images module:

  1. From the New Content menu, click Modules->News with images. The module will be placed in the _modules folder by default. You can create multiple sub-folders within _modules as needed (similar to images and files). To create multiple instances of this module, copy the module and rename it. Edit each module separately.
  2. Click Edit to bring up the edit screen.
  3. Complete these fields:
    • Headline (all caps):
      • Keep short ("News")
    • View All Link (all caps):
      • Note: Shares a line with the headline, but in a smaller font
      • Keep short ("View all news")
    • News Item: Exactly three boxes, each with:
      • Date (all caps)
      • Headline (sentence case):
        • Keep it simple: No formatting is available in this section, including paragraphs
        • Brief is better. 15-20 words = 2-3 lines.
      • Link Text (all caps, underlined):
        • Maximum 30 characters
      • Image:

Options

  • The individual fields in each News Item are optional. You can enter any combination of Date, Headline, and link text.
  • This module can be used for other types of categories such as events. 

Examples

News With Images

Scripps pier

April 1, 2020

Each module must have 3 news items. Each item may display a Date, Headline, Link Text, and Image.

Geisel Library entrance

September 28, 2020

The image size for the News With Images module is 388 pixels wide x 246 pixels high.

Price Center

December 31, 2020

Keep headlines short and about the same size across all 3 news items in the module.


What Not to Do

Text problems:

There is too much text in this module, causing it to look unbalanced.

  • Link text is too long In the first news item. Link text looks best with 2-4 words; users will click on it for more information.
  • Headline text is too long In the second news item. Keep the headlines to about a sentence (10-12 words, or 2-4 lines of text).
  • The text in the boxes is uneven. The news module looks best when each of the 3 news areas are even in text length, and when they are concisely edited.

Text Issues

April 1, 2020

Here's the first news item in the row of three

September 28, 2020

Here's the 2nd news item but it has too much text in this Headline field. The News module looks best when all 3 news items contain about the same amount of text in the Date, Headline, and Link Text fields.

December 31, 2020

This Headline and Link Text length are optimal for the News with Images module.

Image problems:

  • Each of the images should be the same size, or the module will be distorted. Crop each image before uploading to the CMS, and then place into the News module.
  • Avoid text in images.

See the News with Images image library.

Image Issues

Not cropped to size

This image is too tall. All 3 News module images should be cropped to 388 x 246 pixels.

Photos work best

Photos look better than logos or other images with text only. This image is also not cropped to the correct size.

Just right

This photograph is the only image in this module that is cropped to the correct size.