{"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":"2025-04-24T17:26:57","modified_gmt":"2025-04-24T21:26:57","slug":"image","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-basic-building-blocks\/basic-image-blocks\/image\/","title":{"rendered":"Image"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

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

Module 3.3.1 \u2013 Getting Started: Basic Building Blocks: Basic Image Blocks: Image<\/p>\n\n\n\n

\n
Examples: Image Block<\/a><\/div>\n<\/div>\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n\n
\n

\n Table of Contents\n <\/h2>\n
\n
\n \n
\n
\n \n 1.\n <\/span>\n\n \n Image Block – Example\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 2.\n <\/span>\n\n \n Step-by-Step\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 3.\n <\/span>\n\n \n Video Tutorial\n <\/a>\n <\/div>\n\n <\/div>\n \n
\n
\n \n 4.\n <\/span>\n\n \n Try it Out\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n\n\n

The Image block allows you to add images to your page or post. Using the Image block is a great way to add colorful and engaging content to your page. Below is an example of how you can use the Image Block surrounded by text.<\/p>\n\n\n\n

Image Block – Example<\/h2>\n\n\n\n

Ut egestas sapien ac urna laoreet lobortis id sit amet sapien. Suspendisse tellus urna, semper id elementum sed, lobortis eu eros. In hac habitasse platea dictumst. Nam viverra lorem non quam faucibus, id ultrices erat sodales. Nullam vitae mi vitae risus faucibus volutpat at vel magna.<\/p>\n\n\n\n

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

Curabitur eu sem nunc. Sed eu mollis neque. Suspendisse ut augue tincidunt, cursus turpis at, tincidunt mauris. Quisque euismod libero eget diam lacinia, ac rutrum nulla faucibus. Duis sed leo non massa ornare imperdiet in nec nunc. <\/p>\n\n\n<\/div>\n\n\n

\n \n\n

Sed ultricies nibh vitae pharetra facilisis. Vivamus sed erat blandit sapien tristique imperdiet. Fusce vitae orci elementum, sollicitudin justo eget, gravida massa. Sed at urna vitae tortor ullamcorper dapibus.is dis parturient montes, nascetur ridiculus mus.<\/p>\n\n\n<\/div>\n\n\n <\/div>\n\n\n <\/div>\n<\/section>\n\n\n\n

Step-by-Step<\/h2>\n\n\n\n

1.<\/strong> Add the Image block using the block menu.<\/a><\/p>\n\n\n\n

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

2.<\/strong> Upload an image of your choice. You have 3 options:<\/p>\n\n\n\n

    \n
  1. Upload<\/strong>: to upload an image from your computer;<\/li>\n\n\n\n
  2. Media Library<\/strong>: to select an image already uploaded to your site;<\/li>\n\n\n\n
  3. Insert from URL<\/strong>: to add an image from the web using its image address.<\/li>\n<\/ol>\n\n\n\n
    \"Upload<\/figure>\n\n\n\n

    3.<\/strong> Open the block settings menu to add Alt text or change the size of the image.<\/p>\n\n\n\n

    \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

    You can also toggle a button in the block options to expand an image when the user clicks on it.<\/p>\n\n\n\n

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

    4.<\/strong> You can change the image alignment by clicking on the block and selecting the Change alignment<\/strong> button from the toolbar menu. You can then select an alignment from the dropdown.<\/p>\n\n\n\n

    If you align the image to the left or right, text will wrap around the other side.<\/p>\n\n\n\n

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

    5.<\/strong> Add a caption to your image by clicking the toolbar option and entering your caption. <\/p>\n\n\n\n

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

    6.<\/strong> You can replace an image by hovering over the image and clicking on Replace<\/strong>. From here, select a new method of uploading an image, and choose a new image.<\/p>\n\n\n\n

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

    Video Tutorial<\/h2>\n\n\n\n