How to Ensure Uniform Image Display in a Wix Repeater

2 min read

Displaying images in a Wix repeater can be tricky, especially when mixing portrait and landscape images. Wix's built-in image handling doesn't provide direct access to image dimensions, making it challenging to maintain a consistent layout. However, with a simple approach using fitMode, you can ensure all images appear uniform without cropping or stretching.

The Problem: Inconsistent Image Sizing in Repeaters

When adding images to a Wix repeater, portrait images often appear smaller than landscape images or are cropped off. This results in an unbalanced layout where some images dominate the space while others shrink. Since Wix does not allow direct access to width and height properties for images, a workaround is needed to maintain consistency.

The Solution: Using fitMode for Dynamic Resizing

By applying Wix’s fitMode property dynamically, we can ensure that all images, regardless of their aspect ratio, take up the same width inside the repeater. The key is to:

Set fitMode to "fixedWidth" for portrait images to match landscape images in width.
Ensure the image container maintains consistent sizing.

The Code: Implementing Uniform Image Sizing

Copy and paste the following code into your Page Code (Frontend, NOT Backend):

$w.onReady(function () {
    $w("#repeater1").onItemReady(($item, itemData) => {
        let imageElement = $item("#image1"); // Image inside the 	          repeater
        let imageUrl = itemData.image1; // CMS field for the image

        if (!imageUrl) {
            console.error("No image found for this item.");
            return;
        }

        // Set image source
        imageElement.src = imageUrl;

        // Default to "fit" mode
        imageElement.fitMode = "fit";

        // Force portrait images to "fixedWidth"
        imageElement.scaleToFit = true; // Ensures images stay within container width
        imageElement.fitMode = "fixedWidth";
    });
});

Replacing IDs and Field Names for Your Wix Site

The above code snippet includes specific element IDs and CMS field names that must be updated based on your own Wix setup. Before using this code, check your Wix repeater and CMS collection for the correct names.

#repeater1 – This refers to the ID of your repeater element. If your repeater has a different ID, update this in the code accordingly.
#image1 – This is the ID of the image inside the repeater. If your image has a different ID (such as #productImageor #galleryImage), replace #image1 with the correct ID.
itemData.image1 – This refers to the CMS field containing the image. If your CMS field is named something different (e.g., mainImage, productPhoto), update itemData.image1 accordingly.

To find the correct IDs:

Select the repeater or image in Wix Editor.
Click the Properties Panel (in Developer Mode).
Copy the element ID and replace it in the code.

To check the correct CMS field name:

Open Content Manager in Wix.
Look for the field storing your images.
Use its exact name in itemData.yourFieldName.

Why This Works

Prevents portrait images from appearing too small
Maintains consistent width across all images
Works dynamically in a repeater

With this approach, you no longer have to worry about images looking out of place inside a Wix repeater. Whether you're displaying a gallery, a product showcase, or a team section, this solution ensures a polished, professional layout. Try it out and let us know how it works for your Wix site!