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
This help video walks you through how to:
Image Resizing 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
Mobile behaviour
Cropping with fixed height - How it works:
Desktop behaviour
Mobile behaviour
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 to the animation below, and both can be used at the same time. |
Border radius | 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. |
Animation | Animation provides you with the ability to add some nice animations on 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 text that only appears in the source code and tells screen readers and search engines what the image is about. |
You have now deleted the image from your page. It is important to note once deleted and the page saved, this cannot be reversed.
Try using searching below: