SP Simple Portfolio Images Overlap
Dennis Vercauteren
Joomla 4.0.4 Helix Ultimate 2.0.5 SP Page Builder Pro 3.8.0 SP Simple Portfolio 2.0.5
problem can be seen through following link: https://www.best-site.be/portfolio
On the initial load if you click portfolio or scroll down to that section you will see that the portfolio images are stacked on top of each other and are overlapping into the next section; from what I can tell its just the image stacking which is causing the overlapping issue and once corrected it should all be ok; however i cannot find the solution to the image stacking.
I've tried different settings (more or less columns, less number of items, thumbnail size, ...) but none of them help.
I currently have the following settings: https://pasteboard.co/ly6lfK3bHkOq.png
When I click on a category, and then back on all, the images no longer overlap. Sometimes the overlap also disappears when I resize my window. The overlap happens on different browsers (chrome, firefox, edge, ...)
How can I ensure that the images are always nicely next to or below each other?
Thank you very much for your help
Pavel
Accepted AnswerHi. Maybe you need to clean the cache? Now I can't reproduce the problem on your page. Everything is loaded quickly and efficiently.
Also, you can try this code, add it to the custom.js file (read Helix documentation about this file)
jQuery(function ($) {
$('.com-spsimpleportfolio.view-items .sp-simpleportfolio-img').attr({
"width": "300",
"height": "180"
});
});Pavel
Accepted AnswerHi. Turn off JCH Optimize, сlean its cache, joomla/ browser cache and check. I think the problem is in its settings.
Any site editing, asking questions in support and debugging must be carried out with the JCH Optimize off.
Dennis Vercauteren
Accepted Answerthanks for your reply.
JCH is now disabled. Cleared cache of website and browser. Unfortunately this has no effect (I had this before, without JCH installed.)
Any other thoughts or possible solutions? Thanks in advance.
Pavel
Accepted AnswerHi. Start with image optimization. They are very large and their upload takes a lot of time, which interrupts the upload of the DOM elements in general and creates caching overload in the browser.
I checked one of your images and this is 834 Kb (almost 1 MB !!!). This is a lot. You can сompressed them at least 5-6 times.
https://www.iloveimg.com/compress-image
Separately, be sure to create thumbnails for the list, with a real size which is necessary for them.
I do not know whether it will certainly solve your problem. But in general it will well affect the speed of the page. And this is at least one of the factors that may be the cause.
Dennis Vercauteren
Accepted AnswerThank you for your answer. I have resized and compressed the images. Unfortunately this has no result on my page.
It seems that by default the page occupies a predetermined height and displays the images in it. It doesn't adapt to the number of images or items...
Pavel
Accepted AnswerUPD.
Do not take into account my message above. I can reproduce the problem. In the browser console there is a warning that the layout is applied before uploading the entire DOM. This means that the script that builds the layout is start working too early.
In the context of other problems reported on this forum, I can assume that in Helix Ultimate 2 there is a problem with the correct work of jQuery. It may be due to the native JS from Bootstrap 5, in which jQuery has ceased to be used and the amount of queries to the server has grown.
I think the team needs to pay close attention to the problems with jQuery. Since it also causes problems with some SP Page Builder addons. It looks like all the links of one chain.
Dennis Vercauteren
Accepted AnswerPavel, thank you for your answers!
Adding the extra javascript does the trick.
Nice work!