Adding Images and Featured Media to Posts

WordPress allows you to add many types of media to any post or page. You can place images, audio, video, and photo galleries in the body text, add captions and credits, resize and make text wrap left or right around any image or other media item.

Largo adds the ability to add Featured Media to the top of each post, which can display as a "hero" image up to 1170px wide. You can feature an image, an embedded video, or even assemble a photo gallery. This page explains how to add media and Featured Media to a post or page, using the Add Media and Set Featured Media buttons.

Add Media button in WordPress

Featured Media button in Largo

Add Media

The Add Media button above the body text area allows you to upload and insert images of various sizes anywhere in a post:

  • Place the cursor where you want an image to appear in the text.
  • Click the Add Media button, and either select from the existing Media Library or upload a new image. This opens the Insert Media screen which has two tabs: the Media Library tab which shows all media uploaded previously and the Upload Media tab where you can upload new media:

the Insert Media window

  • Tip: You can drag and drop media items directly into the Media Library.
  • After you upload an image or other media in the Insert Media screen, you can add a Caption, Description, Credit, Credit URL, Organization, and Alt Text. Alt Text is very important for meeting accessibility requirements and serving visually-impaired users.
  • Also in the Insert Media screen, you can set the image alignment, add a link to the image, and set the image to full-size, medium, or thumbnail.
  • Upload or select the image you want, and add details and settings:

Adding an image with a caption and other text detailsThen click the Insert into post button to see the results in the post edit screen:

image added to the post in the post edit screen

You can then click the Preview button to see how the post will look on the actual web page:

preview of the post

Remember that while you're working on a post or page, you can use the Save Draft button to save your work without actually publishing it on the website. The Preview button allows you to see the post as if it were published, but only logged-in users can see the preview.

Edit the Images in a Post

Once an image or other media element is added to a post, you can click on it to edit as needed. Any changes you make to the caption, credit, and other descriptive information will be saved in the Media Library, where you can reuse the media item as needed for other pages or posts.

Featured Media

You can use the Set Featured Media button to add an image or other media item to the top of your post. A strong image or video can more deeply engage your audience by getting their attention the moment they view the story page. It also increases sharing on social networks and extends the reach and impact of your work.

The standard WordPress site allows you to add a featured image to display at the top of each story page, as a thumbnail for each post on the homepage, etc. Largo extends this by allowing you to feature not just static images, but many kinds of media content (video, slideshows, and other embedded media).

Featured media will display at the top of the post page between the byline and the main text:

Pope Francis

For best visual results use a landscape-shaped image (or other media) with a width of 1170px. Featured images will also display as cropped thumbnails on the home page or section page associated with the post. Note that featured videos, embed codes, and galleries will not display a home/section page thumbnail.

To add featured media, in the edit screen of your post click the Set Featured Media button. This opens a modal window where you have some options:

Featured Image screen

  • You can enter embed code from any type of embeddable content. If you add a Title, Caption, and Credit, they’ll appear along with the embedded media.
  • Featured video allows you to enter a Video URL from YouTube, Vimeo, or another video hosting service. If the embed code is not pulled in automatically you can enter it in the Video embed code field. You can add a custom thumbnail image for display on the home/section page, but note that the custom thumbnail won't display on the post page in place of the video itself.
  • Featured image is typically used to include a "hero" image at the top of the post. For best results use a landscape image with a width of 1170px.
  • Featured gallery enables you to build a carousel of images. Select multiple images from the Media Library, or upload new images to use in the gallery.

When uploading images you can click the Select Files button in the Upload Files tab, or just drag and drop images into the modal window. With all featured media you can add a title, caption, and other descriptive information for display with the media on the post page. When using images for any purpose, make sure to add Alt Text to meet accessibility requirements for visually impaired website users.

Setting featured media

Featured Images will also display as a cropped thumbnail image on the home page and any multiple-post pages, like Category pages and other Series or Landing pages:

thumbnail on home page

Override Display of Featured Media on a Post Page

If you don't want the Featured Media to display on the single-post page for any reason, you can check the box next to "Hide on Single Post display" in the Featured Image panel:
Hide on Single Post display

This might be desirable in cases where a Featured Image has an odd aspect ratio that doesn't work well on the post page, or if you want to use different images on the post page and the homepage.

Hiding the Featured Media for a post will only remove it from the top of the single-post page. It'll still display as a thumbnail image on the homepage and any landing pages (for example Category pages) associated with the post.

Advanced Tip: Drag and Drop Images Into a Post

Once you get the hang of using the post edit screen, you might find it easier to just drag and drop images directly into the editor. You must be in Visual mode to do this. As when using the Add Media button, make sure to position your cursor at the point of the text where you want the image to display. Drag the image into the editor, and the Insert Media screen will appear where you can add a caption, Alt Text, etc.

Still need help? Contact Us Contact Us