Adding images to your Shogun pages is super simple with the Image element. Images can be accessed through the Elements library on the left side of the editor.

Uploading a new image into Shogun is super easy, simply drop an Image Element onto your page, and select Pick Image. You can drag and drop content into the add media tab, or browse your folders.

The image element supports the following file formats: JPG, static PNG, WebP, SVG*, and animated GIFs.

*Note: attempting to use the "edit image" option with an SVG will change them into a non-vector format. Images should be adjusted before uploading to avoid this.

Additionally, there is also a Pick Image option in the sidebar - for times that you may have elements covering the button on top of the Image Element.

Any images larger than 3000px wide will be scaled down as per the documentation here; What is the resolution of images uploaded in Shogun?

If your image thumbnail is broken and it doesn't add to the image element, please note that the upload process can time out if the image is > 5MB. Scaling the image down to a more appropriate size in a third-party image editor before attempting to reupload it should resolve the issue.

When selecting an image for your page, the Media Library can be used to easily access photos and graphics that you have previously uploaded to Shogun.

To remove content from your Media Library, simply hover over the image you wish to delete and click the trash can icon.

We currently offer a range of third party services that you can select data from, you will find these in the image selector.

Shogun has a built-in image editor that can help you do just that! Simply click on the Image element, and select Edit Image.

Cropping in the Shogun image editor is really easy! Simply drag the crop box over the area that you would like to crop and click 'save' - done!

You can use the Shogun image editor to resize the images on your Shogun page. To get started hit 'edit image'.

Clicking on the lock icon will remove the editors ability to keep the aspect ratio of the image. Disabling this will give you more creative freedom.

Rotating images is super simple! You can choose to rotate it clockwise, or anticlockwise by 45-degree increments!

Sometimes, you would like to let your customers see an alternative image when they hover over an image, maybe you want to showcase more of your product! This can be done using the 'alternate image' option within Shogun.

Please note, both images need to be the same dimensions in order for this effect to be effective.

Adding alternate text to your images is important for search engine optimization and screen readers. This is super simple to add into your images in your Image Elements.

Note: background images within the Container Element do not have alt tags as they are decorative visuals added through CSS styles. They are not added into the content of the page and therefore are not detected by search engines or screen readers.

The Aspect ratio field can be used to adjust the height and width of an image uploaded to the Shogun image element.

Shogun will read an image's aspect ratio, and input it in the controls, which when adjusted will change the aspect ratio of the image. Custom values can be reset using the 'auto' button.

You can enable this setting in order to leverage a default responsive image configuration to vary the image size downloaded based on the user's device.

This improves performance on mobile devices by only downloading images of a resolution that is perceivable on that screen size.

The Border radius style setting can be used to create rounded or circle images within the editor.

In the Image element, you can set the image to open in a lightbox. This means that when a user clicks on one of your images on your page, a larger view of the image will display over the content in the form of a popup.

Note: Gif files can't be used in conjunction with the 'Open Lightbox' feature.