Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Masonry custom size
This topic contains 22 replies, has 2 voices, and was last updated by Ernest Marcinko 1 year, 5 months ago.
- AuthorPosts
- March 14, 2023 at 7:04 pm #41757
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.
March 15, 2023 at 12:02 am #41763Sorry 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.
March 15, 2023 at 12:46 pm #41768Hi!
Sure – on the image settings, choose the image display mode to “contain the image”: https://i.imgur.com/iMFAhu6.png
Best,
That will keep the aspect ratio as well as display the whole image to the maximum specified width.
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
March 15, 2023 at 1:04 pm #41776Unfortunately 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/
March 15, 2023 at 1:53 pm #41782Oh 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 :)
March 15, 2023 at 2:09 pm #41784Okay 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 🙁
March 15, 2023 at 2:13 pm #41785Instead 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?
Best,
That looks like a post type archive page to me, so you could simply use that to filter.
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
March 15, 2023 at 2:16 pm #41787Ok let me try this and report back to you.
March 15, 2023 at 2:20 pm #41789Make sure to use the right jQuery DOM selector, in your case it’s either:
#container
or
#content-wide
or
Best,#ip-boxes
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
March 15, 2023 at 2:20 pm #41790Unfortunately 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:
March 15, 2023 at 2:21 pm #41791Just saw the above – let me try
March 15, 2023 at 2:32 pm #41793OK 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
March 16, 2023 at 4:25 pm #41810I 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 :)
March 22, 2023 at 11:37 am #41920Hello!
I wasn’t notified about this reply! So sorry for the delayed response, OK let me try this.
March 22, 2023 at 11:42 am #41923Hey so this actually works BUT the images break on the auto loading – take a look: https://posterspy.com/ajax-pro-demo/
- AuthorPosts
You must be logged in to reply to this topic.