Forum Replies Created
-
Posts
-
Hi, I now had time to do more extensive testing.
I deactivated all plugins – no result.
I removed all Quick CSS – the error disappeared, as did all the custom styling. So I inserted the different CSS snippets one by one.Finally it works when removing the two last snippets. The one from Victora, that replaced the one by Elliot, and finally the one provided by Mike.
Why it now works without any of these CSS Codes is beyond my understanding. But as long as it works! Thank you!
Best, Aljoscha
Dear Mike,
i cleared my cache and reloaded the page in two different browsers. Yet the problem with the hovering pagination buttons persists.
Loading the newsletter page looks fine at first, but when you use the filter the pagination jumps. depending on which page (pagination goes from 1 to 3) you are on, the error occurs in different variants.
Best,
AljoschaDear Mike,
yes, the portfolio sorting comes from here: My client did not want images to fade in.
When I apply your Quick CSS the images get fully shown, but the pagination buttons are still hovering over the images.
I will disable the JS Script and everything to check if I can trace down the conflict.
Best, Aljoscha
Hi Victoria,
sorry to say, but when filtered it is still cut off… Tested in Firefox and IE.
Best regards,
AljoschaDear Victoria,
I did as you suggested. Tried the page with different browsers and cleared cache. Unfortunately, the issue remains.
Best regards,
AljoschaHi Victory,
the link to the other support thread I posted in the second post of this thread explains the code block.
I originally had Quick-CSS to instantly load images, instead of loading them only when scrolling:
.av-masonry-entry { opacity: 1 !important; visibility: visible !important; }When I ran into problems with the sorting, Elliott, a former mod, told me to remove the code from Quick CSS and instead
add it into a codeblock element like so.
<style type = "text/css"> .av-masonry-entry { opacity: 1 !important; visibility: visible !important; } </style>Only on the pages where your using the Masonry element.
I did this and the images loaded instantly, while the sorting worked. Now checking the filter I found, that with the Codeblock the sorting again is broken. If I remove the code, the sorting works fine, but images are not loaded instantaneously any longer.
Best regards,
AljoschaI’ve had issue with the sorting on this page before, see: https://kriesi.at/support/topic/mansonry-sort-broken/
It was then solved moving css from Quick-CSS into a code block on the page.Dear Ismael,
thanks for your reply. I have now built my own work around using an iframe in a code block.
For those interested, here’s the solution:
I’m displaying a html file in an iframe to load a screenshot of the page-plugin with an overlay:
<iframe src="(...)/fb-click-page.html" width="xxx" height="yyy" style="border:none; overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>The html looks like this:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { position: relative; width: 100%; } div a { display: block ; height: 100% ; } .image-script { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #f3e417; } .container:hover .overlay { opacity: 1; } .text-large { color: black; font-size: 20px; font-family: Helvetica,Arial,sans-serif; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; } .text-small { color: black; font-size: 12px; font-family: Helvetica,Arial,sans-serif; position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; } </style> </head> <body> <div style="position: absolute; left: 0px;top: 0px; z-index: -1;" class="container"> <a href="(...)/fb-plugin/"><img src="(...)/fb-click-banner.jpg" width="xxx" height="yyy" class="image-script"> <div class="overlay"> <div class="text-large">Klicken Sie, um das Facebook-plugin zu aktivieren!</div> </a> <div class="text-small"> <b>Datenschutzhinweis:</b> <p>Beim Klick auf das Bild werden Daten an Facebook übertragen. Weitere Informationen erhalten Sie in unserer <a target="_parent" href="/datenschutz">Datenschutzerklärung</a>. </div> </div> </div> </body> </html>On clicking the overlay the fb-plugin page is load via yet another html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Load FB-Page Plugin</title> </head> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"> <div style="position: absolute; left: 0px;top: 0px; z-index: -1;"> <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2F(...)&tabs=timeline&width=xxx&height=yyysmall_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="xxx" height="yyy" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe> </div> </body> </html>There’s a few minor issues with this workaround, as the facebook page-plugin is not responsive. Thus, once the iframe container becomes smaller than the loaded plugin, it is cut off at the sides. As I’m using it in a roughly 500px block it works well, as most devices provide 500px width.
Best regards,
AljoschaDear Yigit,
this works well. Thank you very much.
Yet there is another issue with the blog template. The preview image spills over the excerpt text. I added the link into private to see what I mean. This happens on the blog roll as well as on a single blog entry. As more users will be adding posts, I would prefer them to work without the AVIA Layout builder.
Best regards,
AljoschaHey again. Now it seems to work.
I’ve added another line of code:
.rounded-container { border-radius: 0px !important; overflow: visible; background: none !important; } .rounded-container img { border-radius: 0px !important; }If there’s a way of doing this any better (restricting it to the avatar images) I’d be glad for your support.
Best, Aljoscha
Here’s some more testing: just tested with chrome (instead of Firefox). When I change the settings in chrome print preview to “print background images” it shows and prints the images in the mansonry galery. When I apply the same setting in Firefox print preview before they wouldn’t print, though.
Cheers, A.
Dear all,
I’ve just went through the QUICK CSS in order to check if any of the additions made there could have something to do with it. I came across the addition:
.av-masonry-entry { opacity: 1 !important; visibility: visible !important; }that prevents images from being loaded when scrolling down the page. If I remove the CSS Code the sorting works but the images are not loaded instantaniously any longer…
Is there a possible fix for this?
Best,
AljoschaThanks, I have not included the auto height as it is more important to keep the image ratio and proportions.
Best regards,
AljoschaThank you!
I’ve created a main.js in the child theme folder and it seems to work just fine!Best regards,
AljoschaDear Andy,
thanks for taking on the topic and forwarding it to Kriesi. I’ve just now ran into another bit of this bug and wanted to share it with you guys.
This behaviour seems to appear whenever the gallery is not started with the widest image. So even when using several landscape format images it can still appear and distort other images in the large preview image. We are now working around this issue by giving all images per gallery the same aspect ratio – which is okay in our case but might not suit others.
Best,
AljoschaDear Elliott,
thank you for pointing this out. I have made all the changes and the fade in is now set to 0ms. Still, there is only one issue I’m not yet clear about. As I want to only alter one issue within the avia.js I’m not sure if it is wise to ‘oursource’ the whole avia.js into the child theme as I have done now. Could I also just override this one issue like with using the function.php for adding a js function? The avia.js file might get updated with future theme upgrades and I might miss out on some of the changes or even run into problems if bigger parts of avia.js change.
Especially as I want to have my client running updates on the site himself and not having to look into everthing working all the time.
Thank you for your help, which has been absolutely great so far!
AljoschaHy Andy,
yes I was able to ‘fix’ it – but that is rather a workaround and not a proper fix. As I should be able to start with a portrait picture as well. Maybe you can find a proper solution for one of the next versions so that the problem doesn’t occure when starting with the wrong image.
Best,
AljoschaJust another thought – it seems that the problem occurs, when a portrait image is used as the first image. Changing the order, so the gallery starts with a landscape image solves the issue, as I have seen in multiple cases now.
Dear Andy,
thanks for all your advice. I was very busy and had no time to look into the thing again until just now. I now had a look again and the failure is reproducable while I have deleted the Caching plugin and cleared the browser cache. The problem disapears, when I change the order of the images. When I change the now second image to be the first it works, while when Iit is used as second image it doesn’t work and especially the then second image (which is wider) gets compressed…
I have updated to the latest version 3.2 and WP is updated as well.
Any ideas?
Best,
AljoschaHi Andy,
thanks for your reply. I had WP Super Cache installed but not running as the site is in test mode. My provider doesn’t use any caching. If I change the page it’s updated imediately.
I’ve created a login for you, see next private message.
What’s wierd is, that if I take a working portfolio and create a template out of it and change only the images to the ‘BOY’ images it’s not working anymore. Could it have somethig to do with the image sizes/proportions?
Best,
AljoschaHey Elliott,
sorry for being imprecise with the options I chose. I had chosen the option “No, do not force the same size” as you suggested from the beginning. This is why I was irritated that images were getting distorted. As the galery wasn’t very complex I recreated it with all the same settings. It now works. Maybe there was some kind of database corruption. Still, thanks for your support, which is really fast, given the amount of requests. You guys rock!
Best,
Aljoscha
