Hi Devin! Thank your for this: “Edit: Just make sure the link on the images is pointing to the full size image and not the smaller size.”

Well, I have figured out, I must place the links into custom link field for all images in fullwidth masonry gallery in order to provide my visitors the possibility to see the pictures as fullsized. But it is not necessary for another gallery (after https://kriesi.at/support/topic/pop-up-image-resizing/#post-188242 )!

The question is: is it possible to “ask” the Enfold opens the images placed into this element (av_masonry_gallery) as the same with the av_gallery? Because it isn’t necessary to place link for each image in this kind of gallery. It looks rather friendly for users, right? It is so boring to place 40 pcs of links for all pictures in av_masonry_gallery..

Please, help me with this problem.

Bingo! Thank you so much. The background behind the layer slider is now black while it loads.

Here’s link to the screenshot.

The issue is not when the slider transitions. It’s when the page is loaded or refreshed. The main body background image displays behind where the slider is loading. See screenshot. Thanks.

Thank you for this code, but it didn’t seem to have any effect on the issue but it did disrupt the drop down menus…strange. I also tried changing the value from “1” to “5” to match the layer slider ID number for the home page. The fire background images is still visible before the slider image is displayed.

Yigit,

Thanks for the response.

The issue I am having is not being able to specify a class for the image using the Advanced Layout Editor. When I go over to the default editor to do so, it is blank (99% of the time). Sometimes I see the shortcode in the default editor (for whatever reason) but cannot figure out where to add a class to the image.

Thanks

Ok after even further research I found a work around: feel free to inform me if this is the best way or not.

my conclusion is that this is definitely a retina screen issue. I found this source very helpful:
http://designmodo.com/design-retina-displays/

for the main theme logo:
I found that the containers in place in the theme already constrain the width/height of this so the part about defining the width and height in css wasn’t needed (at least for me) I actually found if I did this the theme would actually shrink the logo more than the size I defined anyway, without some sort of important code. So I removed it and just let the theme naturally constrain the size. But what I did was upload a new logo that was twice the size of what I intended it to be. I previously had a logo that was uploaded at 205×64 pixels and it was being stretched to about 400 some pixels and looking like crap. So by simply uploading an image that was 410×128 pixels and letting the theme auto constrain it to I think max height 80px the logo looks perfect on normal screens and has the pixel dimensions to actually look good when it is enlarged on retina devices. super easy.

Then for my custom background logo replacement trick:
I basically did the same thing, I uploaded an image that was 132×120, twice that of the intended display size of 66×60. Then in my css I just constrained the background image with the desired display size of width 66 and height 60 pixels so it looks right on normal screens and then has the right amount of pixels to look good on retina screens.

As a side note I first used the media query method at the bottom of the source reference to only send the enlarged file actually to retina devices, but I figured for the main logo of my site I would just use it all the time as it is a single file and the file byte size is about the same, and I think that is maybe more future proof. But if I was doing this all over the site with many images I would probably look more at the media query way of targeting only retina devices.

seams to be working now just fine. If you would do anything differently let me know please.