Masonry custom size

This topic contains 22 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 11 months, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #41757
    Jack
    Jack
    Participant

    https://posterspy.com/posters/ – this is our current poster page, not using Ajax Pro Search.

    I am trying to create a poster page like this with custom height/width for the image thumbnails.

    If I try % or pixels nothing works. I would like to load the images at 100% size. Instead, it loads images full page height and ignores my column rules. Is there any way to fix this?

    I tried Masonry, Columns, etc. nothing works for this.

    #41763
    Jack
    Jack
    Participant

    Sorry to explain – if there are images in results that are 200×200 but then another than is 300×600 is there no way to display these at proper aspect ratio? Rather than all rectangles for example.

    #41768
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    Sure – on the image settings, choose the image display mode to “contain the image”: https://i.imgur.com/iMFAhu6.png
    That will keep the aspect ratio as well as display the whole image to the maximum specified width.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #41776
    Jack
    Jack
    Participant

    Unfortunately this doesn’t seem to fix it, as the results are dependant on the width and height set. So even with contain the image set my results are still showing rectangular:

    I’ve installed a tester here that you can experiment with https://posterspy.com/ajax-pro-demo/

    #41782
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Oh you mean you want to have the images in the original widths and then make a masonry layout. I’m afraid that is not possible.
    The images are backgrounds for the items, therefore the space is not filled (and is not fillable), so there is no way to determine the image width/height to use it in a ratio calculation.
    That is only one part of the issue, the other is, that the items widths are calculated based on the given width/height ratio by the masonry script, so they always follow that ratio.

    You could force the images to fit into the predefined containers with this custom CSS:

    .asp_item_overlay, .asp_image {
        background-size: contain !important;
    }

    However I don’t think that will look very nice.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #41784
    Jack
    Jack
    Participant

    Okay so this is how it works: https://posterspy.com/ajax-pro-demo/ – so there’s no way to make it “fit” together as a grid, like this page?

    https://posterspy.com/posters/

    Unfortunately that might mean I can’t use this plugin 🙁

    #41785
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Instead of trying to struggle with that, if you already have the layout, why don’t you rather try the post type archive page filtering feature instead?
    That looks like a post type archive page to me, so you could simply use that to filter.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #41787
    Jack
    Jack
    Participant

    Ok let me try this and report back to you.

    #41789
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Make sure to use the right jQuery DOM selector, in your case it’s either:

    #container

    or

    #content-wide

    or

    #ip-boxes

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #41790
    Jack
    Jack
    Participant

    Unfortunately that doesn’t seem to work – unless I need to set a custom value instead of #Main – also there is a pagination and not continuous load on this page – try it here:

    https://posterspy.com/posters/

    #41791
    Jack
    Jack
    Participant

    Just saw the above – let me try

    #41793
    Jack
    Jack
    Participant

    OK so it worked. but it took about 5 minutes. https://gyazo.com/b859f250a3bfad5c481113f1bedf4a93 – way too long unfortunately.

    What could be slowing this down? Possibly not plugin related. I’m happy for you to log in and take a look at my configuration. The search bar I’m using is “Poster Masonry Grid” – it worked with #ip-boxes

    #41810
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    I see some redirects on the network tools, maybe there is already a filter applied for the page and they just loop endlessly with each other.

    This might be a dead end.

    What if we tried a different approach via the results templating feature. I think I have an idea to change the featured image container to an image container, and then adding some custom styles. It could actually work.

    – Please copy this file into your theme directory to wp-content/your-active-theme/asp/isotopic.php
    You will have to create that directory.

    This will override the default isotopic result output.

    Then also add this custom CSS anywhere:

    .isotopic .results .item {
        height: auto !important;
        padding: 0 !important;
    }

    If all goes well, then the isotopic search results will display in various heights depending on the image dimensions.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #41920
    Jack
    Jack
    Participant

    Hello!

    I wasn’t notified about this reply! So sorry for the delayed response, OK let me try this.

    #41923
    Jack
    Jack
    Participant

    Hey so this actually works BUT the images break on the auto loading – take a look: https://posterspy.com/ajax-pro-demo/

Viewing 15 posts - 1 through 15 (of 23 total)

You must be logged in to reply to this topic.