jondcruz

Nice! Thanks for sharing, @jasonbahl

I’ll have a look and peek into their source for a bit.

Thanks for that input, @jasonbahl.

I’ll head over to the Slack / Discord for my questions and feedback.

It sounds like someone de-activated the plugin?

Unfortunately, that’s not the case. We spent quite a bit of time trying to figure out what was deactivating the plugin. All 3 of us are WP Admins so permissions isn’t the issue. I’d log into the site and be able to view the GraphQL IDE and test the endpoints in our codebase. No problem. As soon as one of the other 2 Admins tried to use the IDE, it would deactivate. Same said for when one of the other Admins reactivated the plugin and started to use it. As soon as I tried to use the IDE, it would deactivate. Same with the 3rd Admin, etc.

We’re still in the process of troubleshooting, determining if it’s another plugin that’s causing the issue. We’ll figure it out.

Thanks again, @jasonbahl. Have a good one.

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, 11 months ago by jondcruz.
• This reply was modified 1 year, 11 months ago by jondcruz.
• This reply was modified 1 year, 11 months ago by jondcruz.
• This reply was modified 1 year, 11 months ago by jondcruz.

Thanks @nlpro.

I’ll have a look at that location and code.

Hello IJ

Sure. Let me try that tomorrow, (Wed).

Actually, re-reading my response right now and here’s some other details that might help:

In the WP PHP template file, again just your standard WP PHP custom page template:
———————————————————————————-

$context = Timber::get_context();
if ( !$post_id ) {
  $post = new TimberPost();
} else {
  $post = Timber::query_post();
}
$context['post'] = $post;

You can see that I’m passing the WP $post object in the Timber/Twig $context.

Then, in the same PHP file, that $context is passed to the Timber “render” function and therefore the Twig template:

Timber::render( "v2/pageTemplateNameHere.twig", $context );

This lets me do something like this in the Twig template:

<style>
...
...
    .anchorJumpPointMobile {
      display: block;
      position: relative;
      top: -40px;
      visibility: hidden;
    }
    .navItemActiveLink {
    {{ post.navItems_styleSelectedLink }}
    }
    .navItemRegular {
    {{ post.navItems_styleRegular }}
    }
    .navItemSelected {
    {{ post.navItems_styleSelected }}
    }
    .customContainerStyle {
    {{ post.customContainerStyle }}
    }
    .standardContainerStyle {
    {{ post.standardContainerStyle }}
    }
    .floatingNav::-webkit-scrollbar {
      display: none;
    }
...
...
</style>

Those $post variables are either the native Post fields, or Post ACFs.

Hope that helps.

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

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

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 2 years, 5 months ago by jondcruz.

Diagnostic Info:

site_url(): https://www.computer.org
home_url(): https://www.computer.org
WordPress: 6.0.2
Web Server: Apache/2.4.54 ()
PHP: 8.0.20
MySQL: 10.6.8
ext/mysqli: yes
PHP Memory Limit: 512M
WP Memory Limit: 512M
Memory Usage: 32 MB
Blocked External HTTP Requests: None
WP Locale: en_US
Organize offloads by month/year: Enabled
WP_DEBUG: Yes
WP_DEBUG_LOG: Yes
WP_DEBUG_DISPLAY: No
SCRIPT_DEBUG: No
WP Max Upload Size: 100 MB
PHP Time Limit: 60
PHP Error Log: /var/log/php-fpm/www-error.log
WP Cron: Disabled
fsockopen: Enabled
allow_url_fopen: Enabled
OpenSSL: OpenSSL 1.0.2k 26 Jan 2017
cURL: 7.79.1
Zlib Compression: Enabled
PHP GD: bundled (2.1.0 compatible)
Imagick: Disabled
Basic Auth: Disabled
Proxy: Disabled

Media Files: 8,276
Offloaded Media Files: 8,258
Not Offloaded Media Files: 18

Number of Image Sizes: 9

Names and Dimensions of Image Sizes:
thumbnail (150×150)
medium (300×300)
large (1024×1024)
1536×1536 (1536×1536)
2048×2048 (2048×2048)
woocommerce_thumbnail (300×300)
woocommerce_single (600×0)
woocommerce_gallery_thumbnail (100×100)

WP_CONTENT_DIR: /var/www/html/wp-content
WP_CONTENT_URL: https://www.computer.org/wp-content
UPLOADS: Not defined
WP_PLUGIN_DIR: /var/www/html/wp-content/plugins
WP_PLUGIN_URL: https://www.computer.org/wp-content/plugins

AS3CF_PROVIDER: Not defined
AS3CF_BUCKET: Not defined
AS3CF_REGION: Not defined
AS3CF_SETTINGS: Defined
AS3CF_SETTINGS Keys: access-key-id, secret-access-key

Local URL:
https://www.computer.org/wp-content/uploads/2022/10/example.jpg
Offload URL:
https://ieeecs-media.computer.org/wp-media/2022/10/07164957/example.jpg

OME Metadata Version: 12

Custom tables:
wp_as3cf_items: Ok

Storage Provider: Amazon S3
Use Server Roles: Off
Key File Path: N/A
Access Keys Set: Yes
Access Key ID Define: DBI_AWS_ACCESS_KEY_ID
Secret Access Key Define: DBI_AWS_SECRET_ACCESS_KEY

Bucket: wp.www.computer.org
Region: us-west-2
Block All Public Access: Disabled
Object Ownership Enforced: No

Copy Files to Bucket: On
Enable Path: Off
Custom Path: wp-media/
Use Year/Month: On
Object Versioning: On

Delivery Provider: Other
Rewrite Media URLs: On
Enable Custom Domain (CNAME): On
Custom Domain (CNAME): ieeecs-media.computer.org

Force HTTPS: On

Remove Files From Server: On

Active Theme Name:
Active Theme Version:
Active Theme Folder: ieeecs-dx-theme

Active Plugins:
ACF to REST API (v3.3.3) by Aires Gon?alves
Advanced Custom Fields PRO (v6.0.2) by WP Engine
All in One SEO Pro (v4.2.6) by All in One SEO Team
Category to Pages WUD (v2.4.7) by Danny WUD
Custom Permalinks (v2.4.0) by Sami Ahmed Siddiqui
Gravity Forms (v2.6.7) by Gravity Forms
Gravity Forms + Custom Post Types (v3.1.27) by Gravity Wiz
JWT Authentication for WP-API (v1.3.0) by Enrique Chavez
Maintenance (v4.06) by WebFactory Ltd
Max Mega Menu (v2.9.8) by megamenu.com
Max Mega Menu – Pro Addon (v2.2.7) by megamenu.com
OpenID Connect Generic (v3.9.1) by daggerhart
Popup Maker (v1.16.9) by Popup Maker
PublishPress Capabilities (v2.5.2) by PublishPress
Query Monitor (v3.10.1) by John Blackbourn
Smart Slider 3 Pro (v3.5.1.11) by Nextend
Timber (v1.20.0) by Jared Novack + Upstatement
WP Crontrol (v1.14.0) by John Blackbourn & crontributors
WP Gravity Forms Salesforce Pro (v1.3.6) by CRM Perks.
WP Mail SMTP Pro (v3.6.1) by WPForms
WP Offload Media Lite (v3.0.2) by Delicious Brains
WooCommerce (v6.9.4) by Automattic
WooCommerce PDF Invoices & Packing Slips (v3.2.0) by WP Overnight
WordPress Importer (v0.8) by wordpressdotorg
Yoast Duplicate Post (v4.5) by Enrico Battocchi & Team Yoast

Must-use Plugins:
General Must-Use Functionality – IEEE Computer Society (v) by IEEE Computer Society

Thank you, Marko.

I’ve made sure the Minify is enabled in General settings, and have gone through all Performance > Minify settings one by one, (clearing cache after each new settings).

I’ve narrowed it down to the:

Performance > Minify > JS > Minify engine settings > Operations in areas > After <body>

section. If I set this to:

Non-blocking using “async”
or
Non-blocking using “defer”

then that error shows up. If I set that value to:

Default (blocking)

then the error does not show.

I’ll leave the setting “Non-blocking using ‘async'” over night, so that you can have a look when you have some time.

The site is a “test” site that I’ll leave open for your viewing, then it goes back behind the firewall.

https://test.computer.org

I am going to attempt the General Settings > Minify > Minify mode > Manual next.

I believe this issue (as the settings tell me) is a JS file that is occurring after the <body> tag. Trial and error will let me narrow it down until I find the culprit.

Thanks

Jon

Thanks, IJ, for the detailed info and that function.

It’s saved me quite a bit of time coding.

Have a good one.

Jon