Image Element

On this page:

  1. Adding and using an image element on your page
  2. Image properties
  3. Cropping & Repositioning your image
  4. Deleting the image element

While there are multiple different ways you can add images into Limecube, the advantages of the image element are:

1. Better control over the image through sizing, cropping, image position
2. Optimisation of the image. Limecube automatically optimises the image to a webp next gen image format.
3. Adding animation individual to the image
4. Being able to round the corners of the image simply and easily

Adding and using an image element on your page

This help video walks you through how to:

  1. Add the image element to a page
  2. Use different settings to get your image perfect
  3. Adjusting your image according to the device (Desktop/Mobile) view.

Image properties

Image Resising Mode

These 2 options give you flexibility around the type of image being used, and where it is being placed.

Shrinking with dynamic height - How it works:

Responsive to the screen width, the image frame will shrink proportionally by the frame’s proportion. The image frame is what your image sits inside of.

Desktop behaviour

  • The image frame will fit into 100% width to the area it is placed.
  • The height set by the height slider or value field.

Mobile behaviour

  • Once the toggle is set to ‘on’, you have the option to set a separate mobile height for the frame.
  • The image frame will fit into 100% width to the area it is placed.
  • It works the same as desktop when ‘Different on mobile’ toggle is ‘off’.
Cropping with fixed height - How it works:
  • Responsive to the screen width. The image itself will not shrink and instead crops
  • the image frame will stay at the set height, and
  • the frame width will always be 100% of the area it is within.
  • it will crop the image based on the centre point you set when positioning the image, or based on the original placement where you have not changed the position.

Desktop behaviour

  • The image frame will fit into 100% width of the area it is placed.
  • The height is set by the height slider or value field.

Mobile behaviour

  • Once the toggle is set to ‘on’, you have the option to set a separate mobile height for the frame.
  • The image frame will fit into 100% width of the area it is placed.
  • It works the same as desktop when ‘Different on mobile’ toggle is ‘off’.
Images often do not display well by default on both mobile and desktop. It is strongly recommended you always check both of these device views to make sure the image displays as it should.
Image height

This controls through a live view of the image height.

You can either use the slider to visually see what works for you or if you know the fixed height, type the value in you want. 
Hover effect This setting is an on/off option. Turning this on gives the image a subtle zooming-in effect on hover. This is separate from the animation below, and both can be used at the same time.
Rounded corners Border radius is for giving rounded corners to the image. If your image is perfectly square, moving the border-radius all the way to the end can perfectly round your image.
Adjust individual corners This feature allows you to adjust all 4 corners individually, allowing for some really interesting and classy-looking image styles.
Animation Animation provides you with the ability to add some nice animations to your images which show on scrolling to that image on the page. The animation only appears once on scroll and does not repeat.
Mobile options

Off - when it is turned off, the mobile version will work exactly as it does on desktop

On - When it is turned on, you have the ability to change the height and reposition/crop the image to suit a mobile device view.
Link Link your image to either an internal page (the first drop-down), or an external page using the next url field.
Alt text This is the text that only appears in the source code and tells screen readers and search engines what the image is about.

Cropping & Repositioning your image

This tool allows you to change the focus of the image, so you only show a part of the image instead of the whole image, and how to reposition your image within the image frame. 

Deleting the image element

  1. Make sure you are on the page you wish to delete the image from.
  2. Hover your mouse on top of the image.
  3. Select the bin icon to delete the image from your page.

You have now deleted the image from your page. It is important to note once deleted and the page saved, this cannot be reversed.

Can't find the answer you are looking for?

Try using searching below: