Image element

In this article, you will learn about the Image element and how to use it.

What is an Image element?

The imagery can give depth and context to a description, a testimonial, or story and provide a more immersive experience as our brain can interpret them much quicker than text alone.

 

In GemPages, we have developed an element named Image that allows our users to add the images to their pages within few clicks. The Image element can be found in the left sidebar dashboard on the GemPages editor page.

 

 

Let's explore and learn how to customize this element.

Settings Tab's Parameters

  1. Image: There are 3 sources to select an image and upload it to your page:


    • Upload Image: This allows you to select an image from your computer's gallery and upload it directly to GemPages.
    • Browse Gallery: The gallery here actually belong to GemPages' storage, which can store a specific number of images that were uploaded to GemPages recently.
    • Image Src: We are able to put the online image source into the Link box, and GemPages will display this on-site.
    • Image Resolution: You are able to choose the real dimension of your image among the given values in the dropdown menu.
This only supports UCare CDN and Shopify CDN as only 2 listed sources allow us to configure the image resolution via URL link, for example, https://url.com/abc_3000x3000.jpg
If you want to show the title when hovering to the image, please hit More settings at the bottom and type the title into the box.

  1. Dimension


    • Width / Height: This feature allows you to manually adjust the image's width and height by entering the specific values into the box(es).
      We can switch the dimension unit between Pixel and Percentage by hitting the small icon .
    • Circle Image: This brings you another option to customize your image shape to round instead of a normal square or rectangle shape.


      As you can see, this parameter contains the symbol on the top right corner, which means you are able to adjust the setting for one or more specific devices without affecting the rest. Also, pl
    • ease be well-noted that all changes should be made on Desktop first. 
  2. Link


    • Image Link: With this function, you are able to redirect the customers to the specific URL or perform several actions such as scrolling to a certain section of the page, dialing to a phone number, or composing an email, after clicking on the image.

    • Open link in: You can choose to open the selected URL within the same window or in a new tab.

  3. Alt Tag: Each image should have an alt text mostly for SEO purposes. Besides, it is helpful for visually impaired people to know what the image is for.



  4. Alignment: This parameter allows you to determine how the text is positioned within the description box. The three primary types of text alignment include left-aligned, centered, right-aligned.

  5. Extra Class: If you wish to customize the variant's content element in a particular way, kindly use this field to add a class name and then refer to it in the CSS file.

Most Common Inquiries about Image Element

  1. Can I upload GIF to my page?
    Solution:
    • Yes, you can upload GIF to GemPages using the Image element.

    • Here are other image formats that GemPages supports: JPEG / JPG, PNG, GIF. To learn more about the image format, please refer to this article.

  2. How can I upload an image/ GIF that is greater than 3 MB in size with GemPages?
    Solution:
    • Step 1: Go to Shopify Admin > Setting > Files