Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 23, 2023 at 11:17 am #1398984
    MotiveAgency

    Hi Support,

    I am trying to achieve the following layout for the masonry gallery component: https://snipboard.io/lSG8x5.jpg

    I saw this layout was achieved with the other masonry component shown on your demo here: https://kriesi.at/themes/enfold-minimal-photography/

    Is there a way I can achieve the same layout with the masonry gallery component, perhaps by using something similar to this function displayed in this thread: https://kriesi.at/support/topic/change-image-size-on-masonry-gallery/ or by including some https://isotope.metafizzy.co/ overrides somehow?

    Your help would be greatly appreciated.

    Thanks
    Sean

    February 24, 2023 at 8:48 am #1399099
    Nikko

    Hi Sean,

    I think you can restructure it to some degree but you’ll need to use Perfect Automatic Masonry for Size Settings in the Masonry Gallery.
    If the image you upload has a width more than 1.78 times (or higher) its height then it should occupy two columns in a single row, if the image uploaded has a height more than 1.78 times (or higher) than the width then it occupies two rows in a single column, otherwise it will just occupy a single row/column.
    I hope this helps.

    Best regards,
    Nikko

    February 28, 2023 at 2:14 pm #1399524
    MotiveAgency

    Hi Nikko,

    Thank you for getting back to me.

    All of my images are 1000 x 1000px, for the first item I created an image 2000 x 2000px (2 times bigger) which didn’t change in height or width. I figured out that creating an image at 16:9 will take up 2 column spaces wide but obviously not in height and 9:16 will take up 2 columns spaces in height but not in width. Still don’t have a solution that takes up 2 column spaces both in height and width.

    I think this approach is too hit-and-miss for what I am trying to achieve, as well as the lightbox image then presenting the image at that cropped size, where it would be better if it displayed the full uncropped image.

    What other options do I have? I don’t want to add a third-party plugin.

    Can I modify the masonry_gallery.php in a way where I can specify my own HTML? that way I can create the layout without modifying the size of the images.

    <div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

    Or modifying that function you shared https://kriesi.at/support/topic/change-image-size-on-masonry-gallery/ here to achieve my layout?

    My only other thought to achieve this is to create a custom element in my shortcodes folder and have the user input images in Advanced Custom Fields.

    Your help would be greatly appreciated.

    Thanks in advance
    Sean

    March 1, 2023 at 9:01 am #1399621
    Nikko

    Hi Sean,

    The function I shared in that link won’t help.
    However, I have found a workaround to imitate the layout in https://kriesi.at/themes/enfold-minimal-photography/

    1. Edit the Masonry Gallery, go to Advanced > Developer Settings > Custom CSS Class and add this value big-first-item then save.
    2. Add this code in functions.php using a child theme or if you don’t have a child theme, you can use WPCode plugin to insert this php snippet:

    function masonry_gallery_first_item(){
?>
	<script>
		(function() {
			const images = document.querySelectorAll('#top .big-first-item .av-masonry-container > a:nth-child(2)');

			images.forEach(image => {
				image.classList.add("av-landscape-img", "av-portrait-img");
			});
		})();
		
	</script>
<?php
}

add_action('wp_footer', 'masonry_gallery_first_item');

    The purpose of the code is just to set the first item to occupy two spaces in both column and row.

    If you need to do this on another page, then just repeat Step #1 (only).

    I have tested this on my end and it worked.
    These are the order and sizes of the images (in px):
    1. 1600 x 1600
    2. 800 x 800
    3. 900 x 1600
    4. 800 x 800
    5. 1600 x 600
    6. 900 x 1600
    7. 800 x 800
    8. 800 x 800
    9. 800 x 800
    10. 800 x 800

    I hope this helps.

    Best regards,
    Nikko

    March 1, 2023 at 12:08 pm #1399659
    MotiveAgency

    Hi Nikko,

    Absolute legend! :) Thank you so much for your help, modified and placed it into my JS file if it is useful for anyone else:

    const firstImage = document.querySelector('#top .gallery .av-masonry-container > a:nth-child(2)');
        const thirdImage = document.querySelector('#top .gallery .av-masonry-container > a:nth-child(4)');
        const fifthImage = document.querySelector('#top .gallery .av-masonry-container > a:nth-child(6)');
        const sixthImage = document.querySelector('#top .gallery .av-masonry-container > a:nth-child(7)');

        firstImage.classList.add("av-landscape-img", "av-portrait-img");
        thirdImage.classList.add("av-portrait-img");
        fifthImage.classList.add("av-landscape-img");
        sixthImage.classList.add("av-portrait-img");

    Thanks again
    Sean

    March 1, 2023 at 7:03 pm #1399715
    Rikard

    Hi,

    Great, I’m glad that Nikko could help you out, and thanks for sharing the solution. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.