{"id":1377,"date":"2020-01-21T13:14:29","date_gmt":"2020-01-21T21:14:29","guid":{"rendered":"https:\/\/www.hmc.edu\/communications\/?page_id=1377"},"modified":"2026-02-25T10:22:18","modified_gmt":"2026-02-25T18:22:18","slug":"images","status":"publish","type":"page","link":"https:\/\/www.hmc.edu\/communications\/wordpress-how-tos\/images\/","title":{"rendered":"WordPress: Images in Content"},"content":{"rendered":"\n

Images may be added within a web page\u2019s content.<\/p>\n\n\n\n

Use the Featured Image<\/a> functionality if you wish to only add a single image to the top of page. <\/p>\n\n\n\n

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

Please use the following specifications for images that you wish to add to pages.<\/p>\n\n\n\n

File Format<\/h3>\n\n\n\n
    \n
  • JPEG for photographs<\/li>\n\n\n\n
  • PNG is preferred for images with simple graphical elements like logos or pie charts<\/li>\n<\/ul>\n\n\n\n

    Landscape Orientation<\/h3>\n\n\n\n

    Landscape (i.e. wider than tall) images should be 768 pixels wide by 450 pixels high. When inserted into a page, they should be full-size and will therefore span the entire content area.<\/p>\n\n\n\n

    \"Placeholder
    768 x 450 pixels, 96 pixels per inch.<\/figcaption><\/figure>\n\n\n\n

    Portrait Orientation<\/h3>\n\n\n\n

    Portrait (i.e. taller than wide) images should be 358 pixels wide by 412 pixels high. When inserted into a page, they normally should be floated left, which means other content wraps around the image. The system will automatically limit the width of such images depending on the user’s device screen size.<\/p>\n\n\n\n

    \"\"
    358 x 412 pixels, 96 pixels per inch.<\/figcaption><\/figure>\n\n\n\n

    Adding an Image<\/h2>\n\n\n\n

    Insert an Image Block<\/h3>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    With the cursor in the block placeholder (where it says Type \/ to chose a block<\/code>), type forward slash \/<\/kbd> and either choose image or start typing ‘image’ until the image option is visible for you to select.<\/p>\n\n\n\n

    Upload or Select the Image<\/h3>\n\n\n\n

    The image selector\/uploader appears the image’s location. As instructed, you may drag and drop an image, or select the Upload<\/kbd> button to add a new image. You may also choose an existing image by selecting the Media Library<\/kbd> button.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

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

    In the right sidebar settings you can configure the settings thus:<\/p>\n\n\n\n

    1. Styles<\/h4>\n\n\n\n

    You can set the alignment of an image but note the following:<\/p>\n\n\n\n

      \n
    • Portrait image: the preferred alignment for portrait images is Align left<\/kbd>. This will wrap surrounding copy to the right of the image. An alternative is Align right<\/kbd>, but use only to break up a page with multiple images. Avoid Default<\/kbd> or Align center<\/kbd> (both will be displayed in the same way. normally.<\/li>\n\n\n\n
    • Landscape images: as landscape images suit a full-width layout, choose Default<\/kbd> or Align center<\/kbd> and avoid Align left<\/kbd> and Align right<\/kbd><\/li>\n<\/ul>\n\n\n\n

      2. Alternative Text<\/h4>\n\n\n\n

      Alternative text is required for accessibility. Keep the text short and descriptive of what is in the image. Avoid including details that aren’t apparent in the image. Use the caption setting for additional information (see below)<\/p>\n\n\n\n

      3. Image Link<\/h4>\n\n\n\n

      With the image selected in the editor you can access the image link setting in the toolbar. This provides options for when the user clicks or selects the image. <\/p>\n\n\n\n

      While the image may be linked to another page or resource, you normally do not want to do this. A case where you may want to link an image is if the image were the cover of a document. By default when inserted, the image is not linked. <\/p>\n\n\n\n

      You may also need to link the image to itself, for example if you wish the user to have a larger view of it. You do not normally need to do this for a decorative image but it may be necessary for an image that is conveying some kind of information.<\/p>\n\n\n\n

      4. Caption<\/h4>\n\n\n\n

      To add a visible label underneath an image, select the caption button. Text is entered underneath the image itself. Use the caption to add more information or context to an image.<\/p>\n\n\n\n

      \"\"
      This is the caption for the image.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

      Images may be added within a web page\u2019s content. Use the Featured Image functionality if you wish to only add […]<\/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-1377","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/1377","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=1377"}],"version-history":[{"count":5,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/1377\/revisions"}],"predecessor-version":[{"id":2679,"href":"https:\/\/www.hmc.edu\/communications\/wp-json\/wp\/v2\/pages\/1377\/revisions\/2679"}],"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=1377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}