Masonry custom size

[JackParticipant]

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.

[JackParticipant]

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.

[Ernest MarcinkoKeymaster]

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 :)

[JackParticipant]

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/

[Ernest MarcinkoKeymaster]

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 :)

[JackParticipant]

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 🙁

[Ernest MarcinkoKeymaster]

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 :)

[JackParticipant]

Ok let me try this and report back to you.

[Ernest MarcinkoKeymaster]

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 :)

[JackParticipant]

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/

[JackParticipant]

Just saw the above – let me try

[JackParticipant]

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

[Ernest MarcinkoKeymaster]

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 :)

[JackParticipant]

Hello!

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

[JackParticipant]

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

[Author]

Posts