This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

The Page Builder is wrapping the Shortcode with its own container

Open 5 replies bug-report plugin plugin-page-builder

maverickdisrupt

9 years ago · Last reply by Andrew Misplon 9 years ago

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;
}

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

maverickdisrupt 9 years, 3 months ago
Any help with this issue would be greatly appreciated!
Andrew Misplon Staff 9 years, 3 months ago
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.
maverickdisrupt Private 9 years, 3 months ago
This is a private message.

Andrew Misplon Staff 9 years, 3 months ago

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>

Andrew Misplon Staff 9 years, 3 months ago
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?

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread