Image Element

On this page:

  1. Image resizing mode
  2. Adding an image element
  3. Adding or replacing an image
  4. Image properties
  5. Cropping & Repositioning your image
  6. Image style examples
  7. Deleting the image element

Use the image element to add images to pages or blog posts. The image element is used for single images.

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 file size - Limecube automatically optimises the image to a webp next gen image format which is considered best practice these days.
  3. Adding animation individual to the image
  4. Being able to style the corners of the image simply and easily to create interesting shapes for your images without needing separate photo editing software.

Image resizing mode

There are 3 image sizing modes you can choose from, depending on what best suits your needs:

1. Default

The default image setting keeps your images in its original proportions, and is set to fit the maximum width of the section column it is placed within.

2. Shrinking with dynamic height

The image is responsive to the screen width, and the image frame will shrink proportionally by the frame’s proportion. The image frame is the section column 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’.

3. Cropping with fixed height

  • The image is responsive to the section 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’.
By default, images do not always display well 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.

Adding an image element

  1. Select the page that you’d like to add the image to.
  2. Click on the ‘+Add Element’ Icon on the Page's Header Bar
  3. Drag and Drop the Image element to the area of the page required.
  4. Use different settings to get your image perfect (these are covered in more detail in the section below)
  5. Adjusting your image according to the device (Desktop/Mobile) view.
  6. Click 'Apply'

This help video walks you through these steps.

Adding or replacing an image

If your image element is already on the page, and you want to add or replace an image, follow these steps:

  1. Hover over the image
  2. Hover over the function icon on the left
    image element editing
  3. Choose from one of the options to add an image.

Each option:

  1. Edit image: Opens an image editor to modify your image
  2. Upload: Allows you to upload an image directly from your computer
  3. Your images: Opens the file manager and 'your images' tab to select from an existing image in your library.
  4. Free stock images: Opens the file manager and 'Free images' tab to find a free stock image for you to use.

Image properties

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.
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.
Link Link your image to either an internal page (the first drop-down), or an external page using the next URL field.
Paddings This function allows you to add spacing around your image, for times when you may need some extra adjustment for your page design. This setting is available for desktop and mobile.

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. 

Image style examples

By using the 'Adjust individual corners' setting on images, this allows you to add some pop to your images, and improve the design of your page. Here are 6 examples where we have used this feature.

image example 1

Setting: Adjust individual corners

Corner settings:

Top left 20px
Top right 20px
Bottom left 200px
Bottom right 20px

image example 2

Setting: 'Rounded corners' only

800px

image example 3

Setting: Adjust individual corners

Corner settings:

Top left 300px
Top right 300px
Bottom left 0px
Bottom right 0px

image example 1

Setting: Adjust individual corners

Corner settings:

Top left 0px
Top right 300px
Bottom left 300px
Bottom right 0px

image example 2

Setting: 'Rounded corners' only

800px

This image needs to be in square proportions to make it a perfect circle.

image example 3

Setting: Adjust individual corners

Corner settings:

Top left 800px
Top right 800px
Bottom left 0px
Bottom right 800px

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: