How to Change the Display Size of Photos/Videos When Using the Masonry Layout
Displaying your Instagram photos and videos engagingly can significantly enhance your online store's visual appeal and attract more customers. While the Grid view and Carousel slider offer uniform photo sizes, the Masonry layout takes it a step further by arranging your Instagram content in a dynamic, staggered grid. This unique layout allows for a visually interesting mix of photo and video sizes, making your content more captivating.
With the Masonry layout, you have the power to customize the width of each photo and video, enabling you to create a tailor-made display that suits your aesthetic preferences. This guide will walk you through the steps to change the display size of your Instagram photos and videos when using the Masonry layout in the INS Shopping Slider module for PrestaShop.
Step-by-step guide to changing photo/video size in Masonry layout
Step 1: Access the configuration page of the INS Shopping Slider module in your PrestaShop back office.
Step 2: In the module's main menu, click on the "PHOTOS & VIDEOS" tab.
Step 3: Select the "All" sub-tab to see a list of all your Instagram photos and videos.
Step 4: Adjust the width of photos/videos:
- Hover your mouse over the square icon next to the Instagram icon in the bottom right corner of each photo/video.
- Choose the desired width for that photo/video by clicking on the preferred width icon.
- Once the change is successful, a notification saying "Column size has been updated" will appear in the top right corner of the screen, and the selected width icon will turn blue.
Example of settings in the Back office:
Let’s take a look at how it is displayed in the Front office:
Suggested widths for different types of photos/videos
To achieve the best visual effect with the Masonry layout, consider the following recommended widths for different types of photos and videos:
Square photos/videos:
Any column size: Square photos and videos are versatile and can fit well with any column size. You can choose column sizes 1, 2, or 3 depending on your overall layout preference.
Horizontal rectangular photos/videos:
Recommended column size 2 or 3: Horizontal photos and videos look best when they span across 2 or 3 columns. This allows them to stand out and be more visible within the staggered grid.
Vertical rectangular photos/videos:
Recommended column size 1: Vertical photos and videos are usually taller and should be assigned a column size of 1. This keeps them narrow and prevents them from dominating the layout.
Customizing the display size of your Instagram photos and videos in the Masonry layout allows you to create a visually appealing and unique presentation on your PrestaShop store. By following the guidelines provided in this article, you can easily adjust the width of each photo and video to suit your aesthetic preferences and enhance the overall look of your online store. Start experimenting with different column sizes and arrangements to find the best layout that captivates your visitors and turns them into customers.