Adding an image to a page
Often an image needs to be added to a product page, either in the product description section or the size guide section for example.
When adding an image to a page it may be that the image is difficult to see when using a small device form (such as a mobile device), particularly if the image contains text that needs to be read. There are a few techniques that should be used to address this:
- Make sure that the image resizes according to the device/window size.
- Make it so that if the image is selected, a new tab/window opens containing just the image – this can then be re-sized/zoomed independently from the page.
To do this, you need to edit the product in Admin and then open the HTML editor for the relevant section (e.g. Product Description):
To ensure resizing, add this code snippet to the image () tag:
To allow the image (or a link to a video on a website for example) to open in a new tab/window if the image is selected, wrap the image (<img>) tag in an anchor (<a>) tag with a target attribute value “_blank”:
Example 1
This example demonstrates these two techniques of wrapping the image in a link that opens in a new tab/window and ensuring the image resizes correctly
Code:
Centre align an image
This demonstrates how to centre align an image horizontally in its container
Code:
