Okay
  Public Ticket #2191933
gallery
Closed

Comments

  • en-Ko started the conversation

    Hi guys,

    On the bottom  I would like to add a masonry photo gallery without the title of the image and without a button. Just when you hover over an image it gets covered with a semi transparent color and when you click it you get the same layout as the portfolio-items gallery. Now, when I click it there is no navigation. Can you please help me out?

    Thanks in advance,

    Regards, Koen

  •  1,558
    Laborator replied

    Hi Koen,

    This is how you can do that, by creating a new template and then use it in the media grid: https://d.pr/v/Ivg70H

    I tried to do this but your login credentials are not working.

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group

  •   en-Ko replied privately
  •  1,558
    Laborator replied

    Hi there,

    This CSS in the first line of Custom CSS was not allowing the masonry mode to be visible:

    .vc_gitem-row-position-top {
        display: none  !important;
    }

    Which I removed, and then added this CSS which will style the image on hover:

    /* Custom Masonry Grid */
    .custom-masonry-grid.vc_gitem-zone .vc-zone-link {
        transition: 0.2s background;    
    }
    .custom-masonry-grid.vc_gitem-zone .vc-zone-link:hover {
        background: rgba(0,0,0,0.2);    
    }
    

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group

  • en-Ko replied

    HI Art,


    Thanks for the effort, but that was not the issue. I don't want the text and title visible so I have put this css code back:

    .vc_gitem-row-position-top {    display: none  !important;
    }

    But you partly solved the issue by adding the custom Masonry grid to the templates. Thanks for that. I couldn't add a template, it didn't clone the existing.. 

    Can you help me to put the same behavior on the Post Masonry Grid on the page : https://www.zoenbyenzo.nl/collectie/? I mean the behavior when you hover over the images. When I click it I would like it to go to the linked page. 

    And can you also help me with the following issue? In the menu, when you hover over 'salontafel', the submenu opens (see attachment). I would like 'salontafel BALK' on the same height as 'salontafel'.

    Thanks again.

    Regards, Koen

  • en-Ko replied

    Sorry, I forgot the attachment.

  •  1,558
    Laborator replied

    Hi Koen,

    Add this CSS to Custom CSS for the submenu:

    .standard-menu-container.menu-skin-light div.menu>ul ul, .standard-menu-container.menu-skin-light ul.menu ul {
        padding: 0px;
    }

    If you're looking for professional help in this matter, there's always someone available for such tasks on the WP Kraken or Codeable. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group

  • en-Ko replied

    Awesome thanks

  • en-Ko replied

    Can you please help me with the other issue as well?

    We would like hover behavior on the Post Masonry gallery on the page https://www.zoenbyenzo.nl/collectie/ exactly like the image gallery on the page https://www.zoenbyenzo.nl/salontafel-balk/.

    The Custom Masonry Grid you have added only works for image galleries, not for post masonry grid. Because when I select Custom Masonry Grid it doesn't redirect to the pages anymore.

    Thanks in advance!

    Regards, Koen

  •  1,558
    Laborator replied

    Hi Koen,

    This is the style you need to add to Custom CSS

    /* Post Masonry Grid */
    .vc_masonry_grid .vc_gitem-zone .vc-zone-link {
        transition: 0.2s background;    
    }
    .vc_masonry_grid .vc_gitem-zone .vc-zone-link:hover {
        background: rgba(0,0,0,0.2);    
    }
    

    Regarding the rest of your question, I don't really understand what you mean with this:

    The Custom Masonry Grid you have added only works for image galleries, not for post masonry grid. Because when I select Custom Masonry Grid it doesn't redirect to the pages anymore.


    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group

  • en-Ko replied

    Thanks you so much!!! Great work. You have understood it perfectly, this was what I meant.

    Just one thing. The photos in the gallery on this page https://www.zoenbyenzo.nl/salontafel-balk/  are now all square, while we would like them 'masonry', a mixture of landscape and portrait.. Can you fix this?

    Thanks again! Koen

  •  1,558
    Laborator replied

    Hi Koen,

    I have edited the Custom Masonry Grid and set it to Original:

    medium
    (view large version)

    If you have further questions please create a new ticket instead.

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group

  • en-Ko replied

    hi Art,

    Thanks, but now the hover effect on the https://www.zoenbyenzo.nl/collectie/  page is gone again. It is 'fade in' instead over 'overlay with transparency' again. Can you help me with this?

    Regards, Koen

  •  1,558
    Laborator replied

    Hi again,

    Because you have to add a custom-masonry-grid class to the Post Masonry Grid element to get the style.

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group

  • en-Ko replied

    Thanks! Your are a champion!

    Is it possible to show the title of the page on hover as well?

    Regards, Koen

  •  1,558
    Laborator replied

    If you're looking for professional help in this matter, there's always someone available for such tasks on the WP Kraken or Codeable. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.

    Best regards,
    Laborator Team


      Documentation         Join Kalium Users Group