{"id":620,"date":"2025-07-17T20:56:26","date_gmt":"2025-07-17T20:56:26","guid":{"rendered":"https:\/\/blogarchive.utc.edu\/web-kb\/?p=620"},"modified":"2025-07-18T14:47:38","modified_gmt":"2025-07-18T14:47:38","slug":"image-blocks","status":"publish","type":"post","link":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/","title":{"rendered":"Image Blocks"},"content":{"rendered":"\n

Adding Images to a Drupal Content Page.<\/h3>\n\n\n\n

Images are crucial for webpages because they enhance user engagement, improve comprehension, and boost search engine optimization (SEO). They can convey complex information quickly, make content more visually appealing, and increase the time visitors spend on a site.<\/p>\n\n\n\n

\n\n\n\n

When adding an image block to your content page, you can choose from the available images in our Media Library, or you can upload your own images. <\/em>

If you are using previous images in the Media Library, skip to Step 2.<\/em>

<\/p>

  1. Media Library<\/strong>

    To add your own image, navigate to the top of your workbench taskbar and select the \u201cMedia\u201d<\/strong> button. On the Media page, select the \u201cAdd image\u201d<\/strong> button.\u00a0In the Media Library dialogue, make sure you fill out the \u201cName\u201d<\/strong> and \u201cUTC Organizational Code\u201d<\/strong> for your image. After uploading your image navigate back to your content page.\u00a0<\/p> <\/li>

  2. Add Image Block<\/strong>

    Starting with our content page, we are going to select our \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. Next, we will select our \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu where we will select our \u201cUTC Image Block\u201d.\u00a0<\/p> <\/li>

  3. Find Your Image<\/strong>

    In the configure menu select the \u201cadd media\u201d<\/strong> button. You will be able to search for your image by filter with the name and UTC Organizational Section of the image\u00a0<\/p> <\/li>

  4. Image Formatting<\/strong>

    After selecting and uploading your image, you have the ability to edit how the image is displayed and formatted on the page.a<\/strong>. Image Alignment\u00a0\u00a0<\/strong>Where your image will align on your page.<\/em>\u00a0b<\/strong>. UTC Image Caption\u00a0<\/strong>Image captions are crucial for providing context, enhancing understanding, and improving accessibility of visual content.<\/em>\u00a0c. Margin top<\/strong>The amount of additional whitespace to display above the button group.<\/em>\u00a0d. Margin Bottom\u00a0\u00a0<\/strong>The amount of additional whitespace to display below the button group. \u00a0<\/em>\u00a0e. View mode\u00a0<\/strong>\"\"<\/strong> \u00a0<\/p> <\/li>

  5. Save and Finish!<\/strong>

    After formatting your image, select the \u201cupdate\u201d button at the bottom of the configure menu and your image will be displayed on your content page!\u00a0<\/p> <\/li><\/ol><\/div>\n","protected":false},"excerpt":{"rendered":"

    Adding Images to a Drupal Content Page. Images are crucial for webpages because they enhance user engagement, improve comprehension, and boost search engine optimization (SEO). They can convey complex information quickly, make content more visually appealing, and increase the time visitors spend on a site.<\/p>\n","protected":false},"author":2040,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[3],"tags":[14],"class_list":{"0":"post-620","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-drupal","7":"tag-drupal-content-blocks","8":"entry","9":"has-post-thumbnail"},"yoast_head":"\nImage Blocks - UTC Website Knowledge Base Archive<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Blocks - UTC Website Knowledge Base Archive\" \/>\n<meta property=\"og:description\" content=\"Adding Images to a Drupal Content Page. Images are crucial for webpages because they enhance user engagement, improve comprehension, and boost search engine optimization (SEO). They can convey complex information quickly, make content more visually appealing, and increase the time visitors spend on a site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"UTC Website Knowledge Base Archive\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-17T20:56:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T14:47:38+00:00\" \/>\n<meta name=\"author\" content=\"Kailey Agoo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kailey Agoo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/\",\"name\":\"Image Blocks - UTC Website Knowledge Base Archive\",\"isPartOf\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#website\"},\"datePublished\":\"2025-07-17T20:56:26+00:00\",\"dateModified\":\"2025-07-18T14:47:38+00:00\",\"author\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3\"},\"breadcrumb\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogarchive.utc.edu\/web-kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Image Blocks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#website\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/\",\"name\":\"UTC Website Knowledge Base Archive\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogarchive.utc.edu\/web-kb\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3\",\"name\":\"Kailey Agoo\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/author\/jzc491\/\"},{\"@type\":\"HowTo\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#howto-1\",\"name\":\"Image Blocks\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/\"},\"description\":\"When adding an image block to your content page, you can choose from the available images in our Media Library, or you can upload your own images.<em> <\/em><br><br><em>If you are using previous images in the Media Library, skip to Step 2.<\/em><br><br>\",\"step\":[{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#how-to-step-1751037453739\",\"name\":\"Media Library\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"To add your own image, navigate to the top of your workbench taskbar and select the <strong>\u201cMedia\u201d<\/strong> button. On the Media page, select the <strong>\u201cAdd image\u201d<\/strong> button.\u00a0<br\/><br\/>In the Media Library dialogue, make sure you fill out the <strong>\u201cName\u201d<\/strong> and <strong>\u201cUTC Organizational Code\u201d<\/strong> for your image. After uploading your image navigate back to your content page.\u00a0<br\/><br\/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#how-to-step-1751037488514\",\"name\":\"Add Image Block\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Starting with our content page, we are going to select our \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. Next, we will select our \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu where we will select our \u201cUTC Image Block\u201d.\u00a0<br\/><br\/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#how-to-step-1751037497524\",\"name\":\"Find Your Image\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"In the configure menu select the <strong>\u201cadd media\u201d<\/strong> button. You will be able to search for your image by filter with the name and UTC Organizational Section of the image\u00a0<br\/><br\/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#how-to-step-1751037533076\",\"name\":\"Image Formatting\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"After selecting and uploading your image, you have the ability to edit how the image is displayed and formatted on the page.<br\/><br\/><strong>a<\/strong>. <strong>Image Alignment\u00a0\u00a0<\/strong><br\/><em>Where your image will align on your page.<br\/><\/em>\u00a0<br\/><strong>b<\/strong>. <strong>UTC Image Caption\u00a0<\/strong><br\/><em>Image captions are crucial for providing context, enhancing understanding, and improving accessibility of visual content.<\/em><br\/>\u00a0<br\/><strong>c. Margin top<\/strong><br\/><em>The amount of additional whitespace to display above the button group.<\/em><br\/>\u00a0<br\/><strong>d. Margin Bottom\u00a0\u00a0<br\/><\/strong><em>The amount of additional whitespace to display below the button group. \u00a0<br\/><\/em>\u00a0<br\/><strong>e. View mode\u00a0<\/strong><br\/><strong><br\/><\/strong> \u00a0\"}],\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#schema-image-3881ffaa5b6fa077f5a417cd84903f68\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-4.52.47\u202fPM.png\",\"contentUrl\":\"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-4.52.47\u202fPM.png\",\"width\":738,\"height\":770}},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#how-to-step-1751037761931\",\"name\":\"Save and Finish!\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"After formatting your image, select the \u201cupdate\u201d button at the bottom of the configure menu and your image will be displayed on your content page!\u00a0<br\/><br\/>\"}]}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image Blocks - UTC Website Knowledge Base Archive","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/","og_locale":"en_US","og_type":"article","og_title":"Image Blocks - UTC Website Knowledge Base Archive","og_description":"Adding Images to a Drupal Content Page. Images are crucial for webpages because they enhance user engagement, improve comprehension, and boost search engine optimization (SEO). They can convey complex information quickly, make content more visually appealing, and increase the time visitors spend on a site.","og_url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/","og_site_name":"UTC Website Knowledge Base Archive","article_published_time":"2025-07-17T20:56:26+00:00","article_modified_time":"2025-07-18T14:47:38+00:00","author":"Kailey Agoo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kailey Agoo","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/","name":"Image Blocks - UTC Website Knowledge Base Archive","isPartOf":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#website"},"datePublished":"2025-07-17T20:56:26+00:00","dateModified":"2025-07-18T14:47:38+00:00","author":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3"},"breadcrumb":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogarchive.utc.edu\/web-kb\/"},{"@type":"ListItem","position":2,"name":"Image Blocks"}]},{"@type":"WebSite","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#website","url":"https:\/\/blogarchive.utc.edu\/web-kb\/","name":"UTC Website Knowledge Base Archive","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogarchive.utc.edu\/web-kb\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3","name":"Kailey Agoo","url":"https:\/\/blogarchive.utc.edu\/web-kb\/author\/jzc491\/"},{"@type":"HowTo","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#howto-1","name":"Image Blocks","mainEntityOfPage":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/"},"description":"When adding an image block to your content page, you can choose from the available images in our Media Library, or you can upload your own images.<em> <\/em><br><br><em>If you are using previous images in the Media Library, skip to Step 2.<\/em><br><br>","step":[{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#how-to-step-1751037453739","name":"Media Library","itemListElement":[{"@type":"HowToDirection","text":"To add your own image, navigate to the top of your workbench taskbar and select the <strong>\u201cMedia\u201d<\/strong> button. On the Media page, select the <strong>\u201cAdd image\u201d<\/strong> button.\u00a0<br\/><br\/>In the Media Library dialogue, make sure you fill out the <strong>\u201cName\u201d<\/strong> and <strong>\u201cUTC Organizational Code\u201d<\/strong> for your image. After uploading your image navigate back to your content page.\u00a0<br\/><br\/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#how-to-step-1751037488514","name":"Add Image Block","itemListElement":[{"@type":"HowToDirection","text":"Starting with our content page, we are going to select our \u201cLayout\u201d option in the content page menu. From there, we are going to select the \u201cadd block\u201d option for the area we want to add our card to. Next, we will select our \u201cCreate custom block\u201d option at the top of the pop-up menu. This will take us to our final menu where we will select our \u201cUTC Image Block\u201d.\u00a0<br\/><br\/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#how-to-step-1751037497524","name":"Find Your Image","itemListElement":[{"@type":"HowToDirection","text":"In the configure menu select the <strong>\u201cadd media\u201d<\/strong> button. You will be able to search for your image by filter with the name and UTC Organizational Section of the image\u00a0<br\/><br\/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#how-to-step-1751037533076","name":"Image Formatting","itemListElement":[{"@type":"HowToDirection","text":"After selecting and uploading your image, you have the ability to edit how the image is displayed and formatted on the page.<br\/><br\/><strong>a<\/strong>. <strong>Image Alignment\u00a0\u00a0<\/strong><br\/><em>Where your image will align on your page.<br\/><\/em>\u00a0<br\/><strong>b<\/strong>. <strong>UTC Image Caption\u00a0<\/strong><br\/><em>Image captions are crucial for providing context, enhancing understanding, and improving accessibility of visual content.<\/em><br\/>\u00a0<br\/><strong>c. Margin top<\/strong><br\/><em>The amount of additional whitespace to display above the button group.<\/em><br\/>\u00a0<br\/><strong>d. Margin Bottom\u00a0\u00a0<br\/><\/strong><em>The amount of additional whitespace to display below the button group. \u00a0<br\/><\/em>\u00a0<br\/><strong>e. View mode\u00a0<\/strong><br\/><strong><br\/><\/strong> \u00a0"}],"image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#schema-image-3881ffaa5b6fa077f5a417cd84903f68","url":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-4.52.47\u202fPM.png","contentUrl":"https:\/\/blogarchive.utc.edu\/web-kb\/files\/2025\/07\/Screenshot-2025-07-17-at-4.52.47\u202fPM.png","width":738,"height":770}},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/17\/image-blocks\/#how-to-step-1751037761931","name":"Save and Finish!","itemListElement":[{"@type":"HowToDirection","text":"After formatting your image, select the \u201cupdate\u201d button at the bottom of the configure menu and your image will be displayed on your content page!\u00a0<br\/><br\/>"}]}],"inLanguage":"en-US"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts\/620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/users\/2040"}],"replies":[{"embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/comments?post=620"}],"version-history":[{"count":13,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts\/620\/revisions"}],"predecessor-version":[{"id":930,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts\/620\/revisions\/930"}],"wp:attachment":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/media?parent=620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/categories?post=620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/tags?post=620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}