{"id":1375,"date":"2020-01-21T13:14:13","date_gmt":"2020-01-21T21:14:13","guid":{"rendered":"https:\/\/www.hmc.edu\/communications\/?page_id=1375"},"modified":"2025-12-03T14:24:27","modified_gmt":"2025-12-03T22:24:27","slug":"featured-image","status":"publish","type":"page","link":"https:\/\/www.hmc.edu\/communications\/wordpress-how-tos\/featured-image\/","title":{"rendered":"WordPress: Featured Image"},"content":{"rendered":"\n

To add a single image to a page or post, the simplest method is by setting the Featured Image. This will position the image at the top of the page and adjust its dimensions to meet the College’s preferred image specifications.<\/p>\n\n\n\n

Featured Image Examples<\/h2>\n\n\n\n
\"Screenshot
A landscape-orientation featured image on a page.<\/figcaption><\/figure>\n\n\n\n
\"Screenshot
A portrait-orientation featured image on a news post.<\/figcaption><\/figure>\n\n\n\n

Featured Image Specifications<\/h2>\n\n\n\n

Landscape Orientation (Wider than Tall)<\/h3>\n\n\n\n

Our specification size for a landscape orientation featured image is 768 x 450 pixels<\/strong>. If you use an image that does not exactly meet these dimensions, it will be displayed as if it were to 768 x 450 pixels with any excess cropped from view. This may affect the image’s composition so to ensure the image is displayed to your liking, the safest option is to ensure it is 768 x 450 pixels to begin with.<\/p>\n\n\n\n

Portrait Orientation (Taller than Wide)<\/h3>\n\n\n\n

Our specification size for a landscape orientation featured image is 358 x 412 pixels<\/strong>. If you use an image that does not exactly meet these dimensions, it will be displayed as if it were to 358 x 412 pixels with any excess cropped from view. This may affect the image’s composition so to ensure the image is displayed to your liking, the safest option is to ensure it is 358 x 412 pixels to begin with.<\/p>\n\n\n\n

File Size and Format<\/h3>\n\n\n\n

Most images and all<\/em> photos should be in .jpeg format as this format has smaller file sizes. .png format is optimal for graphics and images with solid colors. If used for photographs, .png can produce large files sizes so should not be used.<\/p>\n\n\n\n

All images should have the smallest file size that produces satisfactory quality. No image should be greater than 1MB in size.<\/p>\n\n\n\n

Add a Featured Image<\/h2>\n\n\n\n

Open Page Settings<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
    \n
  1. In the page or post editor, ensure the settings sidebar is open<\/li>\n\n\n\n
  2. Ensure the Page tab is selected<\/li>\n\n\n\n
  3. Select the Set featured image<\/kbd> button<\/li>\n<\/ol>\n\n\n\n

    Upload or Choose Image<\/h3>\n\n\n\n

    There are two tabs: Upload Files<\/strong> that allows new images to be uploaded and Media Library<\/strong> that allows one to be chosen from the existing library.<\/p>\n\n\n\n

    Upload Files<\/h4>\n\n\n\n

    Using the Upload files<\/kbd> tab, images may be drag and dropped or selected for upload as defined by your computer\u2019s operating system.<\/p>\n\n\n\n

    \"\"
    Screenshot<\/figcaption><\/figure>\n\n\n\n

    Media Library<\/h4>\n\n\n\n

    Alternatively, select a previously uploaded image from the Media Library<\/kbd> tab.<\/p>\n\n\n\n

    \"\"
    Screenshot<\/figcaption><\/figure>\n\n\n\n

    Configure the Image<\/h3>\n\n\n\n

    After either uploading the image or selecting an existing one from the library, the right side of the library popup allows configuration of the image:<\/p>\n\n\n\n

    \"\"
    Image configuration options<\/figcaption><\/figure>\n\n\n\n
      \n
    1. Alt Text (required)<\/strong>. If a caption is not specified, then alt text is required.<\/li>\n\n\n\n
    2. Title<\/strong>. This is not used on the website but will allow images to be searched more easily within the library. Images should be named relevantly and simply.<\/li>\n\n\n\n
    3. Caption (optional)<\/strong>. Any text entered here will be displayed underneath the image<\/li>\n\n\n\n
    4. Description<\/strong>. Not required or used and may left blank.<\/li>\n<\/ol>\n\n\n\n

      When finished, select the Set Featured Image<\/kbd> button. A thumbnail will indicate that the image is set.<\/p>\n","protected":false},"excerpt":{"rendered":"

      To add a single image to a page or post, the simplest method is by setting the Featured Image. This […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":995,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1375","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/1375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/comments?post=1375"}],"version-history":[{"count":5,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/1375\/revisions"}],"predecessor-version":[{"id":2612,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/1375\/revisions\/2612"}],"up":[{"embeddable":true,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/995"}],"wp:attachment":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/media?parent=1375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}