#78 – Beaver Builder with weeblrAMP without multiple image sizes / scrset

 I have tested Beaver Builder with weeblrAMP and it works, except this issue:
If there are multiple sizes of the same image, the image uses an attribute scrset, with a list of all those image urls.
This works for desktop pages and with weeblrAMP also on AMP pages in other configurations.
However with the pagebuilder plugin Beaver Builder + WeeblrAmp scrset is not used, in my tests.

1. Is this the intention of the WeeblrAmp plugin? If so why?
2. Is there a configuration option to use scrset on AMP?
3. Am I doing something wrong?
4. Could the option to use scrset (multiple image sizes) for Beaver Builder pages be included in future versions of WeeblrAmp?

Hi

I have tested Beaver Builder with weeblrAMP

Glad to hear that, we unfortunately cannot test with all the page builders out there!

If there are multiple sizes of the same image, the image uses an attribute scrset, with a list of all those image urls.

This works for desktop pages and with weeblrAMP also on AMP pages in other configurations.

However with the pagebuilder plugin Beaver Builder + WeeblrAmp scrset is not used, in my tests.

1 - That is not something weeblrAMP should have an impact on. We do not add a srcset, and of course do not remove it if present.

2 & 3 - See #1

4 - We first need to understand why this is happening. Only reasons I can think of is if BeaverBuilder does not add the srcset in the post source code, but instead at a later stage, when the page is being rendered by WP. As the rendering process is not the same on AMP pages, it might be that this addition of srcset does not happen. I'll try setup a test site with BeaverBuilder and see if I can reproduce. We can then see if that's fixable.

Best regards

OK, glad to hear you can setup a testsite. Hope you can fix it.

Best regards

Hi

So this is not really generic but I found a way to cause BeaverBuilder to process also AMP pages (currently, BeaverBuilder does not process the content at all when on an AMP page).

It works fine in our testing, so I can give you access to the dev version with BVB support. Please get this version from this private online folder. After downloading,

- manually install instead of your current version
- go to the "Integrations" tab of weeblrAMP settings and make sure "Beaver Builder" is checked as enabled.

Then check how the srcset is now handled.

Let me know, if possible with direct link to faulty pages.

Best regards

Hi

That's great, the scrset works now also on AMP pages. However it is not always stable, sometimes I had to activate and deactivate plugins, I don't know which change does the trick really.

There is another issue with Beaver Builder: Weeblr shortcodes to show and hide work on AMP pages, but on No-Amp they show literally


Best regards

Hi

sometimes I had to activate and deactivate plugins

De-activate which plugins?

However it is not always stable

What happens? the srcset goes away?

There is another issue with Beaver Builder: Weeblr shortcodes to show and hide work on AMP pages, but on No-Amp they show literally

I look into that.

Best regards

Yes scrset goes away sometimes on AMP, always stays on No-Amp

Sorry I don't know when it happens. I tried to toggle Beaver Builder on the Integration settings. I tried to deactivate - activate Weeblr, also Beaver
It worked after deactivating/activating all plugins. Sorry I don't have a exact report on that.


Best regards

What I told you about instability with scrset is on a production site, where I did different things with a lot of plugins. I will clean that up, and if the problem persist afterwards I wil let you know

Hi

I have reworked the entire process of integrating BeaverBuidler and Elementor, to solve the wbamp-show/hide issue (and probably all other weeblrAMP tags that were likely not working). It should give better results now. No idea where the "stability" issue can come from, however you should try again that also, as the reworked integration process is quite different.

You can download the updated version from the development versions download area.

[EDIT] I went ahead and installed on your test site, results are ok. I did notice that the embedded Tweet was not turned into a Tweet as it should so I will investigate that now.

Best regards

Hi again,

I did notice that the embedded Tweet was not turned into a Tweet as it should so I will investigate that now.

My bad, it works as expected actually! Only links to Tweet are turned into tweets, not raw text links such as the one on your test page.

So all looks good for now, please be kind enough to test and report any issue.

Best regards

On existing pages, published with Beaver Builder before installing Weeblr, I have several issues, like scrset going away, and not showing all images on AMP. I can solve that with these steps:

Clone the page with the Duplicate Post plugin.
Toggle the copy between Published and Draft in the normal WP editor.
Edit something in Beaver Builder.
Publish from Beaver Builder.

I don't know if all those steps are required, but this is how I can obtain a copy which works with Weeblr AMP

However AMP page with #development=1 on the url does not display all images, and is different from the same Amp pages without #development=1

Hi

Pretty weird, I do not have any such behavior on my tests machines.

However AMP page with #development=1 on the url does not display all images, and is different from the same Amp pages without #development=1

This specifically is more than weird because weeblrAMP cannot have any influence on that. The #development=1 thing is an AMP-runtime thing, it's done in javascript by Google AMP, inside your browser.

What is a single link that shows this behavior?

Best regards

Here is an example.
It´s a clone of an old page. I tried a lot of plugins and themes, so that may cause some trouble.
It's not a problem for me, if an old page does not work, I make a new one.

But yes, it is weird that the same page displays in a different way. Must be some difference in JS.
Did you think Google can´t fail? Apparently they can.

Best regards
Hugo

Hi Hugo,

Unless I'm missing something, these 2 pages looks exactly the same for me:



That sounds more like local differences. I loaded them in a private window, in Chrome on Windows 10. Do you have any errors/messages in the browser console?

Best regards

Hi

Caching might be an issue as well, at whichever level it may happen. Have you tried incognito windows?

Best regards

I see the page on your computer is twice the same.
On mine the #development=1 version is same as yours, the amp has a gallery before the heading consúltenos.
This gallery is present on the No-Amp version of the page, also on Amp, but not on development.

I have tried incognito windows, Chrome on windows 10, Firefox, different Windows-users, the difference stays the same.

I just changed in Weeblr settings-main from development to normal, and difference between pages persists. However that may be due to delay in Google AMP servers, I guess. I go back to development-mode, because the site is not ready yet.

OK, lets close this ticket, we can't solve all mysteries.

Thank you, best regards

Hi

I guess so! But the pages is not "on my computer". It's on your server and your/my computer is only loading it in a browser. And the content returned by your server should not depend on the computer being used to request that content.

For your information, here is the URL of that page in the Google cache:

https://suite-quito-viajes.cdn.ampproject.org/c/suite.quito.viajes/inicio-n1/amp/

It displays normally for me, without a gallery at the top.

Best regards