{"Status":true,"Message":"","Response":{"post":{"postuid":"3wffprperc","tenantuid":"d8b744fc-2e70-4089-bb80-dd1d08f6c7b2","projectuid":"239698c5-f7eb-4574-8cc8-c6568f08b3a0","title":"Image widget","slug":"article/3wffprperc-image-widget","html":"\u003Cp\u003EWhen selected the image widget opens image specific settings in the design menu:\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/339f3ef798f07ce9ee31005f250b768b.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Cp\u003EWithin the image widget you can link the image to a URL (recommended). As well as set a title, which is also recommended.\u003C/p\u003E\u003Cp\u003EAt the bottom of the menu you\u0026#39;ll find buttons that control how the image behaves on different screen sizes:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003EFull width\u003C/b\u003E will attempt to display the image at full with. Most images should be set to full width.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003ECurrent size\u003C/b\u003E will ensure that the widget remains at the current specified width and height. Caution should be used with this setting and we recommend only using current size when working with an image less than 600px wide.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003EHide\u003C/b\u003E will hide the image when displayed on mobile devices. This can be useful for creating more compact mobile versions of the email.\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003ETo set the dimensions of the image, click the style tab and set the width and height.\u003C/p\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003E\u003Ci class=\u0022fa-duotone fa-circle-exclamation\u0022 aria-hidden=\u0022true\u0022\u003E\u003C/i\u003ERecommended\u003C/span\u003E\u003Cp\u003EIt is recommended that the image width is set to 100% unless the image is less than 600px wide. When set to a percentage the image can scale up-and-down for various screen sizes.\u003C/p\u003E\u003C/cite\u003E\u003Ch3\u003EUsing the image widget\u003C/h3\u003E\u003Cp\u003EWhen place in the designer the image will consist of two parts. In the example below the image size was changed from 100% to 300px to be able to more easily see the image container.\u003C/p\u003E\u003Ch4\u003EImage container\u003C/h4\u003E\u003Cp\u003EThe image container (1) controls all the alignment, whitespace, back ground color, and more for the image.\u003C/p\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/42096f83b1d691aa6a5219e3ff7a493d.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ccite class=\u0022recommended\u0022\u003E\u003Cspan class=\u0022title\u0022\u003E\u003Ci class=\u0022fa-duotone fa-circle-exclamation\u0022 aria-hidden=\u0022true\u0022\u003E\u003C/i\u003ERecommended\u003C/span\u003E\u003Cp\u003EWhen working with an image you can select the image container by clicking the up arrow too.\u003C/p\u003E\u003C/cite\u003E\u003Cimg class=\u0022lazy-load\u0022 data-src=\u0022https://graffiti-auf7e6dwhxhcbwek.z03.azurefd.net/d8b744fc-2e70-4089-bb80-dd1d08f6c7b2/239698c5-f7eb-4574-8cc8-c6568f08b3a0/f5f6084de5e7fbbe0aeb1db2f389cd0d.png\u0022 style=\u0022\u0022 alt=\u0022\u0022/\u003E\u003Ch4\u003ESelecting an Image\u003C/h4\u003E\u003Cp\u003EClicking Select button in the designer will open up the File Picker. From here you can \u003Ca href=\u0022/article/5n8fl49evm-file-manager-picker\u0022\u003Eselect an image, upload a new image, and event edit the image\u003C/a\u003E.\u003C/p\u003E","publish_status":0,"post_type":"Article","author":{},"featured_image_updating":false,"meta_description":"When selected the image widget opens image specific settings in the design menu: Within the image widget you can link the image to a URL (recommended). As well as set a title, which is also recommended. At the bottom of the menu you\u0026#39;ll find buttons that control how the image behaves on different screen sizes: Full width will attempt to display the image at full with. Most images should be set to full width. Current size will ensure that the widget remains at the current specified width a ...","display_toc":true,"has_workingcopy":false,"allow_indexing":true,"sort_order":2,"total_views":753,"date_published":"2024-08-26T17:18:03","date_updated":"2025-05-16T19:17:17.483","date_created":"2025-04-24T15:02:37.967"}}}