How do I add an image?

How do I add an image?

Image

The Images option provides multiple pre-defined layouts to easily add images, text, or a combination of both to your page. Selecting one of these options will place the content into the chosen column. Here’s a breakdown of each available option:
  1. Banner: Adds a full-width image that spans the entire column, perfect for headers, announcements, or visually striking sections.
  2. Image: Inserts a standalone image into the column without any accompanying text, ideal for showcasing visuals.
  3. Centered Image: Places an image at the center of the column, creating a balanced and professional layout.
  4. Image with Flexi Align: Adds an image with flexible alignment options (left, right, or center), allowing for better customisation based on your design needs.
  5. Paragraph on Image: Overlays a paragraph of text directly on the image, useful for creating visually engaging banners or highlights.
  6. Image with Wrap Text: Positions an image with text wrapped around it, providing a dynamic and space-efficient layout for content and visuals.
  7. Image with Wrap Heading and Paragraph: Similar to the previous option, but includes both a heading and a paragraph wrapped around the image for a more detailed presentation.
  8. Image with Caption: Adds an image with a caption below, ideal for providing context, descriptions, or credits for the image.




After selecting an option, an image will be added to your course. You can click on the image to replace it with one of your choice. A pop-up (modal) will appear when you double click on the image or single click on the image then click on the replace option on the left side of your screen. This modal allows you to choose from existing course images, user-uploaded images, Loree’s image library, or an icon, or upload a new image using the "Click to upload a new course image" link. This feature makes it simple to personalize your design with the ideal visual elements.




Adding image

When you're adding an image, it's essential to provide a file name and Alt text. We've made it a requirement to ensure accessibility and proper labeling.

If you try to leave the Alt text box empty or only add spaces, the "Add image" button will be disabled.

You have to either include some text in the Alt text box or select "Decorative Image" to add an image as shown.

It's a small but important step to ensure your content is inclusive and informative!




Image Cropping in Loree


The Loree editor now includes an intuitive image cropping feature, allowing users to crop images into two shapes: a circle or a square. This feature makes it simple to customise images while designing pages.

Here’s how it works:

  • When uploading an image, a "Crop Image" button appears on the image.
  • Clicking the "Crop Image" button lets you choose the desired shape (circle or square) and adjust the crop area.
  • While hovering over and selecting the crop options, the selection will be highlighted in Loree blue, consistent with other elements in Loree.
To ensure that cropped images reflect correctly in Canvas, a set of CSS properties needs to be added to your Canvas themes.


Images can now be cropped with precision, allowing you to select and adjust the crop area exactly as desired. Cropped images will maintain their shape and alignment across different devices and screen sizes, ensuring a polished and professional appearance, as shown.






A Banner Image is a prominent visual element displayed at the top of a page or section. It enhances the design, provides context, and can be customized by selecting an image from the library or uploading a new one.

Image Cropping for Banner:

The image on the left shows the minimum cropping size of 50*50 for any image. 
The image crop option is not available for banner images. Instead, when a banner image that is selected is bigger in size, Icons cannot be used as a Banner Image.


Once the user selects their desired top, center, or bottom part of the banner, clicking on Apply will add the banner in the editor and provide a variety of editing options on the side as well; refer to the image:

NotesNote: The Crop Image option will only be available for images that are available for upload or in the course images. Some of the external images can’t be uploaded, therefore restricting this Crop Image option for users.



Upload New Image


The "Click to upload a new course image" option allows users to upload images in supported formats such as JPG, JPEG, PNG, GIF, and SVG. If the image size exceeds 500KB, the upload time may vary based on the user's internet bandwidth. This feature provides an easy way to add custom images to the course.

The External Link option allows users to add an image to the course by providing a direct URL instead of uploading a file. This feature is useful when using web-hosted images, reducing storage usage and ensuring easy updates.



LMS Image Upload Rules

  1. When we save a page to LMS, it will compare the image file with the name and extension first.

  2. If the name and extension are different in S3 and course files, then the file will be uploaded to the LMS course files.

  3. If the file name and extension are the same in S3 and course files, then the file will be hashed to compare the images.

  4. If the images are different after hashing, then the image file will be uploaded.

  5. If the images are the same after hashing, then the image file will be restricted to upload.

  6. The S3 images on the page while we save to LMS will only be compared with the above steps, and no images will be saved again in the LMS.


NotesNote: While checking the image name for duplication, the spaces are filled with %20, and we will remove %20 while comparing the file name while duplication; therefore, if the file name itself has %20, that will be removed while comparing, and in that case, the file with %20 and without %20 might get duplicated since we will remove %20 while comparing.

    • Related Articles

    • Image Hotspot

      Image Hotspot An image hotspot interactive allows users to click on specific areas (hotspots) within an image to reveal additional information or media. This enhances user engagement by providing an intuitive and visually appealing way to explore ...

    • Image/Video Slider

      Image/Video Slider An image/video slider is a dynamic user interface element commonly found on websites, featuring a carousel or slideshow format to display multiple images or videos in a single area. It allows users to view content sequentially ...

    • How do I add text?

      Text Selecting the Text element will give you five options as detailed in the image below: Header Paragraph Heading with paragraph Quote Block Header The header option allows the user to add a text header to their content, as shown below: This option ...

    • How do I add and edit a table?

      Tables in Loree help you organize content clearly using rows and columns. You can create, edit, style, and manage tables easily using both table-level and cell-level controls. Adding a Table Steps to create a table Open the Loree editor From the left ...

    • How do I add and edit course elements?

      Learn how to effortlessly add and edit course elements in Loree Design Loree Landing Page Once Loree has been successfully configured, you can access it through Canvas Course Navigations. Simply locate "Loree" on the left-hand side navigation bar, ...