Hi,
I am using this plugin: https://codecanyon.net/item/loupe-image-magnifying-glass-for-visual-composer/8152322 and the images are not displaying correctly.
Support said the problem was on site origin’s side, and here was there response. Any help on how to fix it would be much appreciated.
As it turns out, the problem is originating in the Page Builder by SiteOrigin.
The Page Builder is wrapping the Shortcode with their own container which prevented the plugin to render the dynamic sizes from the Loupe Glass.
The PageBuilder pretty much converted the Loupe shortcode into this one:
#gambit-loupe1 .gambit-loupe-glass {
height: 200px;
width: 200px;
background-color: #ffffff;
box-shadow: 0 0 15px 0px rgba(0, 0, 0, .3),inset 0 3px 6px rgba(0, 0, 0, .2);
}
#gambit-loupe1 .gambit-loupe-glass > div {
background-color: #ffffff;
}
#gambit-loupe1 .gambit-loupe-glass {
height: 200px;
width: 200px;
background-color: #ffffff;
box-shadow: 0 0 15px 0px rgba(0, 0, 0, .3),inset 0 3px 6px rgba(0, 0, 0, .2);
}
#gambit-loupe1 .gambit-loupe-glass > div {
background-color: #ffffff;
}
Any help with this issue would be greatly appreciated!
Hi maverickdisrupt
Can you perhaps, test to see if this shortcode works in a normal theme widget sidebar? Does it function as expected when using it in AppearanceWidgetsSidebar or Footer? That would be a good first test to see if it’s near to compatible with Page Builder.
This is a private message.
Thanks for your feedback and for going over the above basic tests. I’m not really following the original point of Page Builder adding a container.
Here is Page Builder’s output:
<div class="textwidget"><style> #gambit-loupe2 .gambit-loupe-glass { height: 200px; width: 200px; background-color: #ffffff; box-shadow: 0 0 15px 0px rgba(0, 0, 0, .3),inset 0 3px 6px rgba(0, 0, 0, .2); } #gambit-loupe2 .gambit-loupe-glass > div { background-color: #ffffff; } </style><div id="gambit-loupe2" class="gambit-loupe-container wpb_content_element "><img class="gambit-loupe-bg" src="http://lillianruff.com/wp-content/uploads/2016/10/oatmeal-conditioner-front-resized.png" data-orig-data-orig-=""><div class="gambit-loupe-glass circle shine show" data-movement="draggable" data-loupe-id="2" data-x="25%" data-y="25%" style="cursor: move; left: -46.75px; z-index: 2; top: 453px;" data-orig-left="-46.75" data-orig-top="NaN"><div class="gambit-loupe-magnified-image" data-scaling="100" style="background-image: url(http://lillianruff.com/wp-content/uploads/2016/10/oatmeal-conditioner-front-resized.png)"></div></div></div></div>Here is the sidebar output:
<div class="textwidget"><style> #gambit-loupe1 .gambit-loupe-glass { height: 200px; width: 200px; background-color: #ffffff; box-shadow: 0 0 15px 0px rgba(0, 0, 0, .3),inset 0 3px 6px rgba(0, 0, 0, .2); } #gambit-loupe1 .gambit-loupe-glass > div { background-color: #ffffff; } </style><div id="gambit-loupe1" class="gambit-loupe-container wpb_content_element "><img class="gambit-loupe-bg" src="http://lillianruff.com/wp-content/uploads/2016/10/oatmeal-conditioner-front-resized.png" data-orig-width="501" data-orig-height="910" style="height: 463.174px;"><div class="gambit-loupe-glass circle shine show" data-movement="draggable" data-loupe-id="1" data-x="25%" data-y="25%" style="cursor: move; left: -36.25px; top: 15.7934px; z-index: 1000;" data-orig-left="-36.25" data-orig-top="15.793413173652695"><div class="gambit-loupe-magnified-image" data-scaling="100" style="background-image: url("http://lillianruff.com/wp-content/uploads/2016/10/oatmeal-conditioner-front-resized.png"); background-position: -25.25px -127.5px; background-size: 501px 910px;"></div></div></div></div>It’s a bit challenging assisting with a closed source premium plugin because we can’t just hop on GitHub or similar and take a look at how the shortcode is being created.
With regards to:
The Page Builder is wrapping the Shortcode with their own container which prevented the plugin to render the dynamic sizes from the Loupe Glass.
Unfortunately, unless there is a consistent issue negatively impacting all shortcodes in Page Builder, we wouldn’t be easily able to make a change without impacting other shortcodes. Ideally, the loupe plugin would add Page Builder support which would take Page Builder into account. I can see the issue with the background image missing. I can’t see an issue with Page Builder adding its own container. Are you perhaps talking about Page Builder’s grid that is wrapping the shortcode?