Masonry custom size

[JackParticipant]

See a screenshot: it creates a weird stacking result: https://gyazo.com/1f5f6ae5dea792f3b8c6dda20c8228ea

The good news is that the masonry WORKED!

[JackParticipant]

Hey! – So I disabled the animation https://gyazo.com/21b017fc098d881985dc1a3637e12cf4

And this seems to work for a longer duration but then eventually does bug out if you scroll quite far.

Search doesn’t work, they just stack.

https://posterspy.com/ajax-pro-demo/ –

Hopefully this is something we can fix!

My only other question now would be the overall visualisation:

Currently, we have a non-hover state
https://gyazo.com/102f950b01c41ecb46771aba3c28f5e6

and a hover state:
https://gyazo.com/7f63c5ed94b27409d8992c68e9287c96

The only difference is the title, a small user avatar and a URL that links to the user’s profile.

Please try it here: https://posterspy.com/posters/

I understand this is probably not within your usual support so if this costs any money for development let me know.

[Ernest MarcinkoKeymaster]

The stacking I think can be resolved by triggering a window resize event with a delay, something like this:

add_action('wp_footer', 'asp_add_footer_script', 99999);
function asp_add_footer_script() {
	?>
<script>
document.querySelectorAll(".asp_main_container").forEach(function(el){
  el.addEventListener("asp_search_start", function(event) { 
    setTimeout(function(){window.dispatchEvent(new Event("resize"));}, 500);
  });
});
</script>
	<?php
}

The hover state is a bit more problematic, that will have to be custom coded within the template fie that I sent you earlier. Unfortunately I am not available for custom jobs, I have years and years of work stacked, I am sorry. It should not be too difficult though, the plugin automatically adds a “hovered” subclass to each item whenever they are hovered, so a simple custom positioned DIV with the details should do the trick.

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

[JackParticipant]

hi. where do i add this code and ill give it a try. Totally understandable re the coding thank you

[Ernest MarcinkoKeymaster]

Try adding this code to the functions.php file in your theme/child theme directory – make sure to have a full server back-up first for safety. For more details you can check the safe coding guidelines.

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

[JackParticipant]

Ah I tried that but it didn’t seem to make a difference. I’ll add it to the functions.php and then you can take a look. Can probably add it back within the next hour – 1hr 30

[JackParticipant]

Ok so yes added, but as you can see no fix https://posterspy.com/ajax-pro-demo/

Maybe this plugin, unfortunately, isn’t going to work for this purpose – don’t worry I won’t request a refund as it’s still a great plugin for our search 🫡

[Ernest MarcinkoKeymaster]

Maybe the timeout trigger is not the best, can you try maybe this:

add_action('wp_footer', 'asp_add_footer_script', 99999);
function asp_add_footer_script() {
	?>
<script>
document.querySelectorAll(".asp_main_container").forEach(function(el){
  el.addEventListener("asp_search_end", function(event) { 
    window.dispatchEvent(new Event("resize"));
    setTimeout(function(){window.dispatchEvent(new Event("resize"));}, 100);
    setTimeout(function(){window.dispatchEvent(new Event("resize"));}, 500);
  });
});
</script>
	<?php
}

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

[Author]

Posts