Update to v3.0.2: Images don’t show

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

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, 1 month ago by jondcruz.

If you select/paste an offload URL into a post’s content or ACF fields, it will be rewritten back to the local URL before being saved into the database for maximum compatibility with WP.

When the post is displayed to a site visitor (or editor), then any local URLs recognized as matching an offloaded item will be rewritten to the offload URL so that they display properly.

From what you’re saying, the rewrite back to local seems to be working ok, but the display on the frontend is not working.

Taking the hero image as an example, how is the following bit of inline CSS being generated?

.customContainerStyle {
    background: url("https://www.computer.org/wp-content/uploads/2018/08/Certification-HeroBG-1920x550.jpg") 50% no-repeat;  padding: 30px 0 30px 0 !important;
}

-IJ

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

Hey @jondcruz,

Excellent information, thank you!

What’s weird is that WP Offload Media Lite 2.6.2 does not have support for ACF, the URL rewriting must be working via a more generic content filter.

Which begs the question, if that’s how things are working in OME 2.6.2, why is the fallback content filtering being bypassed in OME Lite 3.0? And why is the new support for ACF there not doing the expected text field URL rewriting on a cloned field anyway? (checked with the ACF devs, being a clone shouldn’t matter for our filters)

Please can you give us an example of how the cloned fields are being rendered?

Just a snippet that shows how the clone field values are grabbed, and where the grabbed data is being output?

Any information about the context of that code snippet might be useful too. E.g. is happening on the back of any particular hook? In a theme template file?

-IJ

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

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

Hey @jondcruz,

Straight after …

$context[‘customContainerStyle’] = get_field(‘customContainerStyle’, $post_id);

Could you temporarily add something like …

error_log( print_r( $context['customContainerStyle'], true ) );

Refresh the page, and then show us what is logged to debug.log?

-IJ

Hello IJ

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

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