{"id":376,"date":"2023-10-24T14:48:00","date_gmt":"2023-10-24T18:48:00","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=376"},"modified":"2026-08-10T20:10:37","modified_gmt":"2026-08-11T00:10:37","slug":"image","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/basic-training\/basic-training-module-3-essential-blocks\/image\/","title":{"rendered":"Image"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Image\n <\/h1>\n \n \n \n\n

Basic Training Module 3: Essential Blocks<\/p>\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n

Images can help make content more engaging, support key messages, and break up large sections of text. The Image block allows you to add images to pages and posts while providing important accessibility and formatting options.<\/p>\n\n\n\n

In this lesson, you’ll learn how to add images, provide alternative text, and adjust image settings to ensure your content is accessible and visually effective.<\/p>\n\n\n\n

When to Use an Image Block<\/h2>\n\n\n\n

Use the Image block when you want to:<\/p>\n\n\n\n

    \n
  • Illustrate a concept<\/li>\n\n\n\n
  • Showcase a person, place, or event<\/li>\n\n\n\n
  • Support text content with visuals<\/li>\n\n\n\n
  • Make a page more engaging<\/li>\n<\/ul>\n\n\n\n

    Images should support your content, not replace it. Important information should always be available in text form.<\/p>\n\n\n\n

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

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

    To add an Image block:<\/p>\n\n\n\n

      \n
    1. Click the +<\/strong> button and search for Image<\/strong>.<\/li>\n\n\n\n
    2. Select the Image block.<\/li>\n\n\n\n
    3. Choose one of the following options:<\/li>\n<\/ol>\n\n\n\n

      Upload<\/strong>
      Upload an image directly from your computer.<\/p>\n\n\n\n

      Media Library<\/strong>
      Select an image that has already been uploaded to your website.<\/p>\n\n\n\n

      Insert from URL<\/strong>
      Insert an image using a direct image URL.<\/p>\n\n\n\n

      Tip:<\/strong> In most cases, it’s recommended to use the Media Library whenever possible to ensure images are managed within your website.<\/p>\n\n\n\n

      Alternative Text (Alt Text)<\/h2>\n\n\n\n

      Alternative text, often called alt text<\/strong>, provides a text description of an image.<\/p>\n\n\n\n

      Alt text is important because:<\/p>\n\n\n\n

        \n
      • It helps visitors using screen readers understand image content.<\/li>\n\n\n\n
      • It improves accessibility.<\/li>\n\n\n\n
      • It helps search engines understand images.<\/li>\n<\/ul>\n\n\n\n

        Writing Effective Alt Text<\/h3>\n\n\n\n

        Good alt text should describe the purpose or meaning of the image.<\/p>\n\n\n\n

        Good Example<\/strong>: Student studying in the MacOdrum Library.<\/p>\n\n\n\n

        Avoid<\/strong>: Image of a student studying in the MacOdrum Library. Screen readers already identify the content as an image.<\/p>\n\n\n\n

        Decorative Images<\/h3>\n\n\n\n

        If an image is purely decorative and does not add meaningful information, alt text may be left empty.<\/p>\n\n\n\n

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

        Captions<\/h2>\n\n\n\n

        Captions provide additional context below an image.<\/p>\n\n\n\n

        Captions are useful when:<\/p>\n\n\n\n

          \n
        • Identifying people<\/li>\n\n\n\n
        • Providing photo credits<\/li>\n\n\n\n
        • Explaining diagrams or charts<\/li>\n\n\n\n
        • Adding context that may not be obvious from the image alone<\/li>\n<\/ul>\n\n\n\n

          To add a caption:<\/p>\n\n\n\n

            \n
          1. Select the image.<\/li>\n\n\n\n
          2. Locate the caption field below the image.<\/li>\n\n\n\n
          3. Enter your caption text.<\/li>\n<\/ol>\n\n\n\n

            Image Alignment<\/h2>\n\n\n\n

            Images can be aligned within the page layout.<\/p>\n\n\n\n

            Common alignment options include:<\/p>\n\n\n\n

              \n
            • Left<\/li>\n\n\n\n
            • Center<\/li>\n\n\n\n
            • Right<\/li>\n<\/ul>\n\n\n\n

              When aligned left or right, surrounding text may wrap around the image.<\/p>\n\n\n\n

              Choose an alignment that works well with the surrounding content and maintains readability.<\/p>\n\n\n\n

              Image Settings<\/h2>\n\n\n\n

              Additional image settings are available in the sidebar.<\/p>\n\n\n\n

              Depending on your site’s configuration, you may see options for:<\/p>\n\n\n\n

                \n
              • Image size<\/li>\n\n\n\n
              • Alignment<\/li>\n\n\n\n
              • Linking behaviour<\/li>\n\n\n\n
              • Expand on click<\/li>\n\n\n\n
              • Alt text<\/li>\n<\/ul>\n\n\n\n

                Not all settings are available for every image or site configuration.<\/p>\n\n\n\n

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

                If you need to update an image:<\/p>\n\n\n\n

                  \n
                1. Select the image block.<\/li>\n\n\n\n
                2. Click Replace<\/strong>.<\/li>\n\n\n\n
                3. Choose a new image from the Media Library or upload a replacement.<\/li>\n<\/ol>\n\n\n\n

                  The image will be updated while preserving the existing block location on the page.<\/p>\n\n\n\n

                  Best Practices<\/h2>\n\n\n\n

                  Always Add Alt Text<\/strong>
                  Most images should include meaningful alt text.<\/p>\n\n\n\n

                  Use High-Quality Images<\/strong>
                  Choose clear images that support the content on the page.<\/p>\n\n\n\n

                  Add Captions Only When Helpful<\/strong>
                  Not all images require captions. Use them when additional context would benefit the reader.<\/p>\n\n\n\n

                  Avoid Using Images for Text<\/strong>
                  Important information should be written as text rather than embedded inside images whenever possible.<\/p>\n\n\n\n

                  Consider Mobile Devices<\/strong>
                  Before publishing, preview your page to ensure images display correctly on smaller screens.<\/p>\n\n\n\n

                  \n