How do I add an image?

How do I add an image?

Images

As a Loree Design user, selecting the images option will now give you multiple pre-defined options, which easily add images, images with text, or both in combination. Selecting one of the options below will add the content to the particular column that has been selected.


 

Once one of the above has been selected, a pop-up (modal) will appear that will prompt you to either choose an image that has been previously uploaded or to upload a new image/link to an image.


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 below:


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

Image crop

The loree editor now provides the option of making the user's own shapes like a circle or square of the image while applying to the page while designing it. It will be the same way by uploading the images, a little step is that before adding to the editor, the image will have a Crop Image button on the image itself. By clicking on the Crop image, the user can update the shape of the image.

For the image crop, a set of CSS properties has to be added in the Canvas themes to get the image crop reflected in Canvas too.


When we click on the Crop image, while hovering and selecting the crop options (like circle or square) it will highlight in Loree blue like other elements in Loree until the selection is removed.


Images can now be cropped with precision, allowing you to select and adjust the crop area exactly as desired. Cropped images will maintain consistent positioning across different devices and screen sizes as shown below:



The above image 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, the following message occurs on the screen:


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 below:


 

Note: 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.

 

Restrict Image Duplication

  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.

Note: 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, in that case, the file with %20 and without %20 might get duplicated since we will remove %20 while comparing.

                                                                       Thank You!


    • 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?

      This element can be used to add text to the page. Text Selecting the Text element will give you five options as detailed in the image below: Header Paragraph Heading with paragraph QuoteBlock Source Format Header The header option allows the user to ...

    • How do I add and edit a table?

      When you're in Loree, and you want to add a table to your content, just click on the "Table" option in the elements section: It will pop up a friendly little window where you can tell it how many rows and columns you want, and even add some headers ...

    • 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, ...