{"id":244,"date":"2020-05-18T14:02:31","date_gmt":"2020-05-18T14:02:31","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?page_id=244"},"modified":"2026-07-29T09:39:11","modified_gmt":"2026-07-29T13:39:11","slug":"image-block","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/image-block\/","title":{"rendered":"Image Block"},"content":{"rendered":"\n

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

Images contained within the image block can be sourced from three different locations:<\/p>\n\n\n\n

    \n
  1. Uploads from the creator’s computer (which will be stored in the Media Gallery for reuse)<\/li>\n\n\n\n
  2. Images already uploaded to the Media Gallery<\/li>\n\n\n\n
  3. URLs for images hosted elsewhere<\/li>\n<\/ol>\n\n\n\n

    Alignments<\/h2>\n\n\n\n

    Several alignment options are available for images displayed in posts, which affects how widely (or narrowly) the image will display. <\/p>\n\n\n\n

    Content Width (Default)<\/h3>\n\n\n\n

    By default, inserted images will display at the same width as the post content unless otherwise specified. In most cases this is probably the best option to use.<\/p>\n\n\n\n

    There is no button to specifically select content width alignment. If the creator chooses a different alignment option and decides to return to content width, simply toggle the alternate alignment option off.<\/p>\n\n\n\n

    \"An
    An animated example of selection and deselection of image alignment options.<\/figcaption><\/figure>\n\n\n\n

    Wide Width<\/h3>\n\n\n\n

    For larger, more impactful images, the “Wide” image alignment allows the image to display slightly wider than the post content width.<\/p>\n\n\n\n

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

    Full Width<\/h3>\n\n\n\n

    This option is available on immersive template posts only.<\/em><\/p>\n\n\n\n

    For large images in immersive template posts, the “Full” alignment option will allow the image to stretch even wider than the “Wide” option. Keep in mind that this alignment option can create a very large visual footprint relative to the surrounding text.<\/p>\n\n\n\n

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

    Right Alignment<\/h3>\n\n\n\n

    This option is available on pages only.<\/em><\/p>\n\n\n\n

    The “Right” alignment option allows images to float to the right of text content. This option is ideal for supporting imagery that doesn’t necessarily need to capture a reader’s full attention but that still gives additional context to surrounding text-based content.<\/p>\n\n\n\n

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

    Note:<\/strong> Floated elements, such as right-aligned images, work best when placed next to enough text-based content to balance the height of the image. In cases where text is sparse, element overlapping may occur. Users should preview pages to verify all blocks are displaying appropriately when using this option.<\/p>\n\n\n\n

    Center Alignment<\/h3>\n\n\n\n

    This option is available on posts only.<\/em><\/p>\n\n\n\n

    The “Center” alignment option is optimal for smaller images, or images that are taller than they are wide. These images will display slightly narrower than the post content width, and unlike other alignment options, captions are placed to the right of the image. This alignment option may also be useful for displaying headshots.<\/p>\n\n\n\n

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

    Sizes<\/h2>\n\n\n\n

    Image size can be manually set to control the crop size. By default, most images uploaded at over 1024px width or height will automatically have four crop sizes available:<\/p>\n\n\n\n