Responsive Image

Image sizes

You have two options for the image size 768 X 432 ( landscape, 16:9 aspect ratio) and 768 X 1024 (portrait, 3:4 aspect ratio)..

*Please ensure the image is optimized for the web. File must not be larger than 100KB.

Component elements

Please note all elements with an asterisk next to the element title are required.

Example:

To add the image, click the Select button. The library selection box will pop up.

Find your image in the library, select it and click OK.

You will see the image is now loaded. To change the image, click Select again and follow the same steps.

Click the expand arrow next to Image Attributes and add the Image Alternate Text.

Select the image ratio size. 16:9 (landscape) or 3:4 (portrait). The default setting is 16:9.

Enter the image URL. Please use the following URL formats:

1. To link to an external page: Always begin with http(s):// + URL. Example. To add a link to element14 it would be https://www.element14.com/community/welcome

2.  To link to an internal page: Use the following format: /wps/portal/ + page url. Example. To add a link to this page https://www.avnet.com/wps/portal/us/solutions/iot/ you would use /wps/portal/us/solutions/iot/

*Make sure to remove the word “my” that is in front of the word “portal" if you are copying the URL from pre-prod

3. To link to a commerce page: Begin the URL from the /shop all the way to the end of the URL. Example. To link to this page https://www.avnet.com/shop/us/c/amplifiers/ you would use /shop/us/c/amplifiers/

Click the drop down to select the image link target. The options are Self (default): opens the link in the same tab or New: opens the link in a new tab. The best practice is to use self if linking to a page within your site and new when linking to an external site or a document/video/download.

Save and Close your changes.