{"id":3001,"date":"2024-10-23T14:29:36","date_gmt":"2024-10-23T18:29:36","guid":{"rendered":"https:\/\/umaine.edu\/userguide\/?p=3001"},"modified":"2024-10-23T14:29:40","modified_gmt":"2024-10-23T18:29:40","slug":"replacing-image-content-block","status":"publish","type":"post","link":"https:\/\/umaine.edu\/userguide\/2024\/10\/23\/replacing-image-content-block\/","title":{"rendered":"Replacing Image Content Block"},"content":{"rendered":"\n<p>The &#8220;Image&#8221; Content Block is one of our most popular blocks, and allows for superimposing text over an image to use it as a link to more content.<\/p>\n\n\n\n<p>Image as a selection in the Content Blocks page editor:<\/p>\n\n\n<style>.kb-image3001_e5e656-16.kb-image-is-ratio-size, .kb-image3001_e5e656-16 .kb-image-is-ratio-size{max-width:285px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image3001_e5e656-16.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image3001_e5e656-16 .kb-image-is-ratio-size{align-self:unset;}.kb-image3001_e5e656-16{max-width:285px;}.image-is-svg.kb-image3001_e5e656-16{-webkit-flex:0 1 100%;flex:0 1 100%;}.image-is-svg.kb-image3001_e5e656-16 img{width:100%;}.kb-image3001_e5e656-16 .kb-image-has-overlay:after{opacity:0.3;}.kb-image3001_e5e656-16 img.kb-img, .kb-image3001_e5e656-16 .kb-img img{border-top:2px solid #abb8c3;border-right:2px solid #abb8c3;border-bottom:2px solid #abb8c3;border-left:2px solid #abb8c3;}@media all and (max-width: 1024px){.kb-image3001_e5e656-16 img.kb-img, .kb-image3001_e5e656-16 .kb-img img{border-top:2px solid #abb8c3;border-right:2px solid #abb8c3;border-bottom:2px solid #abb8c3;border-left:2px solid #abb8c3;}}@media all and (max-width: 767px){.kb-image3001_e5e656-16 img.kb-img, .kb-image3001_e5e656-16 .kb-img img{border-top:2px solid #abb8c3;border-right:2px solid #abb8c3;border-bottom:2px solid #abb8c3;border-left:2px solid #abb8c3;}}<\/style>\n<figure class=\"wp-block-kadence-image kb-image3001_e5e656-16 size-full\"><a href=\"https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-selected.png\" class=\"kb-advanced-image-link\"><img loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"142\" src=\"https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-selected.png\" alt=\"A screenshot of the image content block selection icon.\" class=\"kb-img wp-image-3004\" srcset=\"https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-selected.png 598w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-selected-300x71.png 300w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-selected-105x25.png 105w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-selected-317x75.png 317w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-selected-423x100.png 423w\" sizes=\"auto, (max-width: 320px) 85vw, (max-width: 768px) 67vw, (max-width: 1024px) 62vw,598px\" \/><\/a><\/figure>\n\n\n\n<p>The dialog box for Image:<\/p>\n\n\n<style>.kb-image3001_3a8e32-c9.kb-image-is-ratio-size, .kb-image3001_3a8e32-c9 .kb-image-is-ratio-size{max-width:441px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image3001_3a8e32-c9.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image3001_3a8e32-c9 .kb-image-is-ratio-size{align-self:unset;}.kb-image3001_3a8e32-c9{max-width:441px;}.image-is-svg.kb-image3001_3a8e32-c9{-webkit-flex:0 1 100%;flex:0 1 100%;}.image-is-svg.kb-image3001_3a8e32-c9 img{width:100%;}.kb-image3001_3a8e32-c9 .kb-image-has-overlay:after{opacity:0.3;}.kb-image3001_3a8e32-c9 img.kb-img, .kb-image3001_3a8e32-c9 .kb-img img{border-top:2px solid #abb8c3;border-right:2px solid #abb8c3;border-bottom:2px solid #abb8c3;border-left:2px solid #abb8c3;}@media all and (max-width: 1024px){.kb-image3001_3a8e32-c9 img.kb-img, .kb-image3001_3a8e32-c9 .kb-img img{border-top:2px solid #abb8c3;border-right:2px solid #abb8c3;border-bottom:2px solid #abb8c3;border-left:2px solid #abb8c3;}}@media all and (max-width: 767px){.kb-image3001_3a8e32-c9 img.kb-img, .kb-image3001_3a8e32-c9 .kb-img img{border-top:2px solid #abb8c3;border-right:2px solid #abb8c3;border-bottom:2px solid #abb8c3;border-left:2px solid #abb8c3;}}<\/style>\n<figure class=\"wp-block-kadence-image kb-image3001_3a8e32-c9 size-large\"><a href=\"https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-dialog.png\" class=\"kb-advanced-image-link\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"611\" src=\"https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-dialog-1024x611.png\" alt=\"A screenshot of the modal window for image settings.\" class=\"kb-img wp-image-3005\" srcset=\"https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-dialog-1024x611.png 1024w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-dialog-300x179.png 300w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-dialog-768x458.png 768w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-dialog-105x63.png 105w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-dialog-317x189.png 317w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-dialog-423x252.png 423w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-dialog-634x378.png 634w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-dialog-846x505.png 846w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-dialog-951x568.png 951w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2024\/10\/image-block-dialog.png 1166w\" sizes=\"auto, (max-width: 320px) 85vw, (max-width: 768px) 67vw, (max-width: 1024px) 62vw,1024px\" \/><\/a><\/figure>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading3001_79a1a8-78, .wp-block-kadence-advancedheading.kt-adv-heading3001_79a1a8-78[data-kb-block=\"kb-adv-heading3001_79a1a8-78\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading3001_79a1a8-78 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading3001_79a1a8-78[data-kb-block=\"kb-adv-heading3001_79a1a8-78\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading3001_79a1a8-78 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading3001_79a1a8-78[data-kb-block=\"kb-adv-heading3001_79a1a8-78\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading3001_79a1a8-78 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading3001_79a1a8-78\">There are multiple new blocks available for images:<\/h3>\n\n\n\n<p>If your image content block had been used to place an image on a page, we recommend the <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/advanced-image\/\" target=\"_blank\" rel=\"noreferrer noopener\">Image (Adv) Block<\/a>. Some of its features include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A <strong>maximum image width<\/strong> setting to control the overall image size<\/li>\n\n\n\n<li>The ability to <strong>set a fixed ratio<\/strong> to the image which will crop the image if necessary (this setting is recommended when lining up several images on a page)\n<ul class=\"wp-block-list\">\n<li>Note: when selecting a fixed ratio, you can set the center point of the image to control where the cropping occurs<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Mask settings<\/strong>: the image can adopt different shapes (triangular, circular, etc)<\/li>\n\n\n\n<li>For images with <strong>captions<\/strong>, the text can be transformed in color, size, font, etc.<\/li>\n\n\n\n<li><strong>Image filters and overlays<\/strong>, to add a tint or desaturation to your image<\/li>\n\n\n\n<li><strong>Border settings<\/strong>, including box shadows and drop shadows<\/li>\n\n\n\n<li><strong>Animate on scroll<\/strong> is a feature that allows the image to appear on the page as the reader scrolls the page. Options include fade, flip, slide, and zoom. <\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/advanced-image\/\" target=\"_blank\" rel=\"noreferrer noopener\">The WP Kadence documentation for the Image (Adv) block details these options and more.<\/a><\/p>\n\n\n\n<p>If your image content block had text superimposed, we recommend the <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/image-overlay-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">Image Overlay block<\/a>. Some of its features include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Title and subtitle settings<\/strong>, allowing you to control heading settings\u2014 and override the default heading size and style with your own preferred font, size, and color<\/li>\n\n\n\n<li><strong>Color overlay with opacity controls<\/strong>, allowing you to control the color contrast between the overlay text and the image for web accessibility compliance. &#8220;Hover&#8221; options allow the image to react when the mouse\/cursor passes over the image.<\/li>\n\n\n\n<li><strong>Animate on scroll<\/strong> is a feature that allows the image to appear on the page as the reader scrolls the page. Options include fade, flip, slide, and zoom. <\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/advanced-image\/\" target=\"_blank\" rel=\"noreferrer noopener\">The WP Kadence documentation for the Image (Adv) block details these options and more.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The &#8220;Image&#8221; Content Block is one of our most popular blocks, and allows for superimposing text over an image to use it as a link to more content. Image as a selection in the Content Blocks page editor: The dialog box for Image: There are multiple new blocks available for images: If your image content [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":"","spc_primary_category":0},"categories":[17,41,34,5],"tags":[],"class_list":["post-3001","post","type-post","status-publish","format-standard","hentry","category-content-blocks","category-projects-cb","category-gutenberg","category-updates"],"taxonomy_info":{"category":[{"value":17,"label":"Content Blocks"},{"value":41,"label":"Content Blocks removal project"},{"value":34,"label":"Gutenberg"},{"value":5,"label":"Updates"}]},"featured_image_src_large":false,"author_info":{"display_name":"kirby","author_link":"https:\/\/umaine.edu\/userguide\/author\/kirby\/"},"comment_info":"","category_info":[{"term_id":17,"name":"Content Blocks","slug":"content-blocks","term_group":0,"term_taxonomy_id":17,"taxonomy":"category","description":"","parent":0,"count":24,"filter":"raw","cat_ID":17,"category_count":24,"category_description":"","cat_name":"Content Blocks","category_nicename":"content-blocks","category_parent":0},{"term_id":41,"name":"Content Blocks removal project","slug":"projects-cb","term_group":0,"term_taxonomy_id":41,"taxonomy":"category","description":"","parent":0,"count":16,"filter":"raw","cat_ID":41,"category_count":16,"category_description":"","cat_name":"Content Blocks removal project","category_nicename":"projects-cb","category_parent":0},{"term_id":34,"name":"Gutenberg","slug":"gutenberg","term_group":0,"term_taxonomy_id":34,"taxonomy":"category","description":"","parent":0,"count":22,"filter":"raw","cat_ID":34,"category_count":22,"category_description":"","cat_name":"Gutenberg","category_nicename":"gutenberg","category_parent":0},{"term_id":5,"name":"Updates","slug":"updates","term_group":0,"term_taxonomy_id":5,"taxonomy":"category","description":"","parent":0,"count":76,"filter":"raw","cat_ID":5,"category_count":76,"category_description":"","cat_name":"Updates","category_nicename":"updates","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/posts\/3001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/comments?post=3001"}],"version-history":[{"count":2,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/posts\/3001\/revisions"}],"predecessor-version":[{"id":3007,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/posts\/3001\/revisions\/3007"}],"wp:attachment":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/media?parent=3001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/categories?post=3001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/tags?post=3001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}