Images not working

[JanaL]

Hello,

I am using the PG Theme Converter and have the issue that any Image Elements do not work when I want to make them editable with Pinegrow.

For example, when I am adding a ‘Customizer Field’ to my Webflow Image Element, this Customizer Field will show up in the WP Customizer but when I add an image, it does not show on the front end.

Same thing is when I use the ‘Display ACF Field’ Action. Again, the ACF Field is showing up in the WP Editor but when adding an image to it, it does not show up on the front end.

The only way I was able to make Image Elements working is using the ‘Post Featured Image’ action. But that’s not a solution because I have more than one image on the page.

Another workaround is to use div elements and set the image as background image then the two methods described above are working but I need to get the Image Elements working too.

Can anyone let me know why this isn’t working?

[Emmanuel]

Can you please tell us more about the situation:

Are you talking about “static” images from the template? (illustrations not included in posts/pages/custom post types)
Are you talking about images to be included in the content of the post?
Any other different case? (trying to use custom fields outside of the loop?)

[JanaL]

Hi @Emmanuel, thank you for helping again!

I am not quite sure if I understand all of your questions, but I will try to elaborate:

I have a static index.html page, set as the master page. On this page are several images that were created with the ‘Image Element’ in Webflow.

When I export the code from Webflow and set up everything up in Pinegrow, these images are still displaying exactly like they were in Webflow. But at this point they are still static elements, meaning, the user would not be able to replace such images.

To make these images replaceable, (same as I am making text areas etc editable), I installed the ACF Plugin, added a new field group, added in this field group a custom field ‘image’ and chose under ‘Field type’: ‘image’. Then I made sure that this custom field will be displayed in the Gutenberg Editor for my index.html page (where the user would then be able to pick any image from the library to be displayed)

Then in Pinegrow, I selected the Image Element, and chose the ‘Display ACF Field’ (same way as I would do it with text elements) but even after saving and exporting the theme, the image will not be replaced on the front end.

I know there are several parameters I have to select for the ‘Display ACF Field’ action. I guess the important one for my case is what to choose for ‘replace’. And then in the ACF plugin (in the WP Dashboard) I can also choose the return format. I experimented around with both of these values a lot, but didn’t get any to work for me.

The alternative I tried is making the image element editable via the customizer. So in Pinegrow I added a Customizer Section, and then selected the image element and added a Customizer Field and choose for ‘edit’ : ‘Image’

But same thing here, if I go into the WP Customizer and choose an image, it does not actually show up on the front end. The old ‘static’ image is still being displayed instead.

I would rather have the ACF option work, since I use ACF field for various other elements too. But somehow don’t get the Webflow image Element to work.

Here are some screenshots. I can also send you my test page via email if you want to see that

[Emmanuel]

Are these images included in the loop or outside the loop?
Are they illustrative elements, or elements that depend on the content of the post / page concerned?

Note: Have you defined the site content action in your master page(s)/templates?

[JanaL]

@Emmanuel

There is no loop, this static page has literally just 2 images on it, nothing else (it’s just a test site). I just want to make the image elements editable with ACF fields in the Gutenberg editor.

This process works for me with any other elements, like text, urls etc. It’s just the Image Element that is not working.

What do you mean with ‘Have you defined the site content action in your master page(s)/templates’?

[JanaL]

Hi @Emmanuel, if it helps, here is my test site for the image issue:

test4-4659e7.webflow 2.zip

As I said before, it’s really just a static index page, with one Webflow Image Element at the top and then under this a div that also has a Webflow Image Element in it.

I want these images to be editable via the editor in WP. So I installed ACF and added Image Fields. This works fine.

But when I try to ‘connect’ that Image ACF field with the Webflow Image Element in Pinegrow using the ‘Display ACF Field’ action, it does not work. Even though I use the exact same process for text, urls etc.

If you could help me with this last question, I would be super grateful!

[JanaL]

@Emmanuel so sorry for bothering you with this. But is there any update on Webflow image elements not correctly working in Pinegrow? With ‘not working’ I mean that I can’t make them editable with ACF fields even though this is supposedly supported?

[Emmanuel]

A few things:

ACF (and custom) fields are related to a publication (not a template) and have to be included inside a loop to work fine.

Note: There are solutions to display the content of custom fields outside of the loop but coding is required > you will find many tutorials on the web.

Using any editor, can you please try to create a very simple theme template from scratch (like I did with my first answer), then from Theme Converter, assign a loop and include the ACF fields inside the loop and try to manipulate? (It can be done in less than 12 minutes, you can follow our instructions here)

Note: Also, I don’t fully understand why you define each template as a master page as they all share the same header/footer?

For particular cases, even with our best will, it is always very difficult for us to provide help when many of the parameters are related to configurations independent of the theme (ACF field settings, WordPress settings etc …), hence our dedicated WordPress support procedure that allows us to have not only the project, but also the WordPress site that we can fully test.

[JanaL]

Hi @Emmanuel,

I actually don’t think it is correct that the ACF fields only work within a loop. If you use the ‘Post Field’ smart action from PG to display an ACF field on the front End, then you are right, it has to be in a loop.

However, in PG, there is also the ‘Display ACF’ action and that one works without a loop. I am doing this all the time to create ACF fields like text, text areas, url, color picker etc. and connect them with Display ACF to my Webflow html in PG, to make these elements editable in the WP Dashboard. And again, when I have a Div with a Background Image, I can use that field (‘Display ACF’) perfectly fine to make it editable with ACF as well. It’s really only the actual Webflow Image Element that does not work.

And as previously mentioned too, even when I don’t use ACF but instead try to make the Webflow Image Element editable via the WP Customizer, using the ‘Customizer Field’ in PG, it doesn’t work either. The Customizer Field will be displayed in the WP customizer but when I try to replace an image, the static image from Webflow just stays the same and does not get replaced. Even when I follow exactly the steps in the YouTube Tutorials.

And the reason why every page is defined as a master page is that Webflow has unique page ids for each page in the html file. I had the problem previously, that my JS / Animation only worked on the index.html (which is usually the only master page) but then the JS/Animation did not work for the other pages. Since Webflow uses these unique page ids, each page needs to be assigned as a master page with its own header and footer to pull in the information for the JS to work. I wish there would be a different solution but I couldn’t find one.

[Emmanuel]

Can you please send us a test site according to our support guidelines so I can audit the situation in depth?

[Emmanuel]

Note: The code export when using Display ACF field and Post Field - Smart (when selecting Use ACF get_field() is the exact same.

Post Field - Smart bonus is to offer the possibility to select the use of standard custom fields or ACF fields from the same action.

See the following screenshots.

When using Display ACF field

When using Post Field - Smart

[JanaL]

@Emmanuel Here you go:

• I created a simple theme following the instructions from the link you provided

• There is one div with a heading that is outside the loop, and yet, the ACF field ‘text’ still works perfectly fine with the ‘Display ACF’ action in PG

• Under that, is another div with two Webflow Images. On this div, I assigned the Loop and then tried two different options within this loop:

1. I assigned the ‘Display ACF’ action in PG to one image --> again, it does NOT work
2. I assigned the Customizer Field action in PG to the other image --> Also does not work

To clarify: for Option 1) the ACF field is showing up in the editor but I can’t replace the image and for Option 2) the Customizer Field is also showing up in the WP Customizer but again, I can’t edit the image from here

Again, weird for me that is works perfectly fine with any other html element than the Webflow Image Element.

Here is the PG Folder:

test-wp-theme.webflow 2.zip

[JanaL]

And just to clarify more: this is not a blog. It’s a simple static page where I just want the text and images to be editable for the user in WP. So no posts needed here. I just want the user to be able to replace the image by themselves

[JanaL]

@Emmanuel

The example you are showing in the screenshot is just text, as already said, that works fine for me too - even outside a loop. It’s only the Webflow Image Element that does not work.

Again, I am not sure how to explain that differently but I am not building a blog with posts. This is a static single page. All I want is that the user can edit the text and images from the WordPress Gutenberg Editor via various ACF Fields. And this works perfectly fine for me (without a loop) for ACF fields such as text, text area, url etc. It’s only the Webflow Image Element that will not work.

Maybe to see it yourself, open the folder I provided in my previous reply and try to make the 2 images editable through an ACF image field. If you can achieve that, that’s all I needed to know

[Emmanuel]

After spending my morning on the case, I have a few more details for you

If I’m not wrong, the origin of the “issue” with the feature seems to be the responsive image data (generated by WF) and which is included in the image tag code.

Here is a sample of the code from Webflow:
<img src="images/pexels-marta-dzedyshko-2067638min.jpg" loading="lazy" srcset="images/pexels-marta-dzedyshko-2067638min.jpg 500w, images/pexels-marta-dzedyshko-2067638min.jpg 640w" sizes="40vw" alt="" class="image">

And when you assign the Custom Field action, here is the result:
<img src="<?php echo PG_Image::getUrl( get_field( 'image1' ), 'post-thumbnail' ) ?>" loading="lazy" srcset="<?php echo esc_url( get_template_directory_uri() ); ?>/images/pexels-marta-dzedyshko-2067638min.jpg 500w, <?php echo esc_url( get_template_directory_uri() ); ?>/images/pexels-marta-dzedyshko-2067638min.jpg 640w" sizes="40vw" alt="" class="image">

Which obviously is not the expected result.

When you remove the srcset data, like this:
<img src="images/pexels-marta-dzedyshko-2067638min.jpg" loading="lazy" sizes="40vw" class="image">

This will generate the right result:
<img src="<?php echo PG_Image::getUrl( get_post_meta( get_the_ID(), 'image1', true ), 'post-thumbnail' ) ?>" loading="lazy" sizes="40vw" class="image">

Everything “seems” fine.

Info: By default, neither the WordPress Customizer nor the ACF fields will allow the responsive code to be generated automagically when you select an image from the media library (as is the case when an image is embedded in a post/page). However, you can set specific sizes (default ones or the one you have set in the theme settings).

I’m waiting to discuss this topic with the team and I’m not sure we will come back with an universal solution but amongst many other possibilities, in the mean time, my current basic advice is:

• Stick to static content for everything that you don’t need to change or that is not meant to be dynamic.
• Create custom sizes for your resources from the theme settings (CUSTOMIZE BUILT-IN IMAGE SIZES) according to your template needs.
• Strip the responsive data from your image tags in the templates from WF
• Set your fields as per your needs.

This should do the trick.

[JanaL]

@Emmanuel THANK YOU SO MUCH! This indeed does the trick. Absolutely fine with removing that responsive data from my images in the html doc to make it work.

Thanks again, really appreciate the time you spend on this helping me!!!

[Emmanuel]

Great, I have a few other tricks to bring back responsive data from WP but I’m waiting for Matjaz point of view about the situation

[JanaL]

@Emmanuel sounds good, thanks again! And not to impose another issue but it would be great if you could bring up the unique Webflow Page ID issue to your team as well. I know that this has been an issue for quite a few Webflow Users who tried to use the PG Theme Converter. The workaround is to set up each page as a Master page so that each page has its own header & footer but I don’t think that this is a good solution.

I am ok using that workaround but I know many Webflow users who then got confused and decided against Pinegrow. In case you want to bring this up with your team, here is the more detailed explanation of the issue:

All Webflow pages have a unique page id, this is presented on each Webflow html file like this:

<html data-wf-page="5eb266f71471ff7a36bb2084" data-wf-site="5ea1e0ec9c38e73c61dbc9ad" lang="en">

So the data-wf-page number is unique to each Webflow page and the data-wf-site is the number for the entire website, so this number is the same on each page. When you convert a Webflow page now to WordPress with PG Theme Converter, it only pulls in the unique page number from the index.php into the header, but not the other page numbers from the other pages (like contact, about, etc). And that’s the reason why the javascript (animations) will only work on the index.php page but not on any other pages. Again, the workaround is to make each page that has animations a master page with its own header and footer. But I am sure the Pinegrow Team could come up with a better solution

[Emmanuel]

Yes, this is indeed the solution documented on our doc site here https://pinegrow.com/docs/wordpress/troubleshooting/#how-to-fix-webflow-animations