Update to v3.0.2: Images don’t show

I’ve just created a test page that has 5 instances of the same image URL.

In all 5 instances, I’m rendering the same image URL in a different ACF control.

In the WP Post ACF controls, all images point to the AWS CDN of:

https://ieeecs-media.computer.org/wp-media/2022/10/07181149/membership-referral-bg_1920x870.jpg

The ACF controls and their setups:
————————————-

ACF WYSIWYG Control
– The image Renders
– It shows the correct AWS CDN URL in the source.

ACF Text Area – In an ACF Clone
– Image is broken.
– URL has been converted to local – https://test.computer.org/wp-content/uploads/2022/10/membership-referral-bg_1920x870.jpg

ACF WYSIWYG – In an ACF Clone
– Image is broken.
– URL has been converted to local – https://test.computer.org/wp-content/uploads/2022/10/membership-referral-bg_1920x870.jpg

Added via the WP “Media Library” in the ACF Image control
– The image Renders
– It shows the correct AWS CDN URL in the source.

ACF Text Area (Not in Clone)
– The image Renders
– It shows the correct AWS CDN URL in the source.

Question: What mechanism changes the URL from what’s in the Post to what is rendered in the browser page?

I’ve deactivated the “WP Offload Media Lite” plugin and all URLs that are initially in the Post are then rendered in the browser page. So there’s some “conversion” code that is not converting the correct URL for the ACF cloned fields.

• This reply was modified 1 year, 6 months ago by jondcruz.

That is coming from an ACF field.

That WP Post has an ACF Field Group that uses the ACF “Clone” type.

Example ACF Group in use:
—————————————–

field1 type = text
field2 type = textarea
field3 type = select
field4 type = Clone

Clone:
field1 type = text
field2 type = select

The URL for the image is being placed in the “field1” of the Clone.

In all of my tests, I’m noticing that an ACF on the “root” level, (non-Clone), will render fine. ACF Text, TextArea, and Images render as expected.

Anything that is persisted in an ACF Clone field will not render.

Rolling back to the v2.6.2 has fixed the issue, with the same code now rendering the image that is broken in v3.0.2

Thanks

Jon

Hello IJ

Sure, here’s how we render our content:

Environment (FYI)
——————————
WordPress 6.0.2
PHP 8.0
AWS EC2 (Amazon Linux 2)
Apache 2.4

WordPress Setup
——————————
* We use the Timber plugin v1.20.0 and Twig for our templating language
– https://upstatement.com/timber/
* We use home grown WordPress templates that are your typical, standard PHP page templates, but they will use Twig to render the page.

Example, in the PHP file:
——————————
$context = Timber::get_context();
…
…
– All PHP code to populate variables that are needed in the Twig template.
– Some variables come from the Page $post object, and some from that $post ACF fields.
– Ex.
– Variables then go into the “$context”.
– $context[‘customContainerStyle’] = get_field(‘customContainerStyle’, $post_id);
…
…
Timber::render( “v2/templateNameHere.twig”, $context );

Twig Use of $context, and ACF variables
—————————————————
<style>
.customContainerStyle {
{{ customContainerStyle }}
}
</style>

ACF Group Setup
——————————
Pretty much the same setup as mentioned earlier in this ticket.

That’s pretty much it. Nothing special, just Twig rendering some ACF values.

Let me know if you need any other details/info.

Thanks

Jon

Hello

I apologize for the delayed response, but I’m able to get back to this issue, and have dug further into the root cause.

I’ve created PHP, Twig, and ACF Group files that will allow you to reproduce the issue.

I don’t see any area in this ticket UI to attach files, so I’ve placed all files in our Test CDN.

PHP and Twig template files that can be used to reproduce what we’re seeing:
https://ieeecs-media-test.computer.org/temp/imageTest.php
https://ieeecs-media-test.computer.org/temp/imageTest.twig

ACF Group Export file, with 2 ACF Groups (Parent and Clone)
https://ieeecs-media-test.computer.org/temp/acf-export-2023-04-11.json

Screenshot of Final Result with Broken Images
https://ieeecs-media-test.computer.org/temp/ImageTestOutput.jpg

Screenshot of the WordPress Post data
https://ieeecs-media-test.computer.org/temp/EditorEntries.jpg

We are using the following plugin versions:
* Advanced Custom Fields PRO plugin 6.1.3
* Timber plugin 1.22.1
* WP Offload Media Lite 3.2.1

The PHP will setup two objects:
* Timber\Post Object
* WordPress Object (which then gives an array of ACFs)

From the output (also in the PHP, as comments) you’ll see that the Timber Object values contain the local URL for the images, (local.computer.org/wp-content/uploads).

The WordPress Object contains the CDN URLs for the images, (ieeecs-media.computer.org).

I’m still looking further into this, and will share what I find, but I wanted to at least restart this effort by sending the reproduce-files.

Question: Is there a front-end JS script that will convert the Local URLs to their CDN equivalents?

Another note to keep in mind, the Timber Object method has been used for almost 5 years now, so we’re thinking something changed in 3.x to change the conversion from Local to CDN URLs.

Let me know if you have any questions or ideas.

Thanks

Jon

UPDATE:

I’ve installed the same PHP, Twig, and ACF Groups on our Test environment, which currently has WP Offload Media Lite 2.6.2.

We are using the following plugin versions:
* Advanced Custom Fields PRO plugin 6.1.3
* Timber plugin 1.22.1
* WP Offload Media Lite 2.6.2

https://test.computer.org/acf-image-test/

For comparison and if you wanted to View Source or inspect the page output.

Thanks again.

Jon

• This reply was modified 1 year ago by jondcruz.
• This reply was modified 1 year ago by jondcruz.
• This reply was modified 1 year ago by jondcruz.
• This reply was modified 1 year ago by jondcruz.