[Resolved] CSS Background Image in Service Theme from Site Library Wrong URL

[Justin]

Hello,

I am using WP Offload Media to store/serve media from AWS S3. After a file is offloaded, the local copy is deleted.

When I change the GenerateBlocks background image to a file that is on S3 instead of the local server, the resulting URL in the CSS has the correct file name, but the wrong URL. It should be pointing to the AWS URL.

Is there an easy way to fix this so GenerateBlocks points to the correct URL?

Funny thing is, when editing the page, the offloaded images show up just fine in the container.

This is the CSS I pulled from the page using Firefox Dev Tools. That’s how I know either the Theme or GenerateBlocks is outputting the wrong URL.

.gb-container.gb-container-367ef865 {
 background-image:linear-gradient(135deg,rgba(24,106,178,.9) 20%,rgba(0,175,229,.8) 80%),url(//exmple.com/wp-content/uploads/2020/06/my_image.jpg);
 background-repeat:no-repeat;
 background-position:center top;
 background-size:cover
}

Thanks!

[David]

Hi there,

ill pass this onto Tom – its something we’re looking into for CDNs etc. – their may be a filter that can be applied.

[Tom]

Hi there,

I suppose it depends on how the plugin is changing URLs.

For example, if you add an image block, does the URL change on the frontend?

When adding a background image, it simply adds the image URL as the value for the background image URL option, which is stored in the comment delimiter for the block. It may be that these plugins need to start scanning blocks for URLs in order to change the URLs.

[Justin]

Hello Tom,

Thank you for looking into this. That is a very interesting question. I suppose WP Offload Media could be changing the URL to point to AWS each time an image is inserted into a block.

When I use a common image block, the full AWS URL is inserted into the HTML and appears on the front end.

<img src="https://s3-us-west-2.amazonaws.com/twelvenet-wordpress-media/wp-content/uploads/2020/06/23102201/lucian-novosel-Qg-r7OxZN7A-unsplash.jpg" alt="" class="wp-image-18788" srcset="https://s3-us-west-2.amazonaws.com/twelvenet-wordpress-media/wp-content/uploads/2020/06/23102201/lucian-novosel-Qg-r7OxZN7A-unsplash.jpg 1000w, https://s3-us-west-2.amazonaws.com/twelvenet-wordpress-media/wp-content/uploads/2020/06/23102201/lucian-novosel-Qg-r7OxZN7A-unsplash-300x200.jpg 300w, https://s3-us-west-2.amazonaws.com/twelvenet-wordpress-media/wp-content/uploads/2020/06/23102201/lucian-novosel-Qg-r7OxZN7A-unsplash-768x513.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" data-pagespeed-url-hash="2114606798" onload="pagespeed.CriticalImages.checkImageForCriticality(this);">

When using a GenerateBlocks container, the URL inserted into the CSS is for the site’s domain when it should be AWS.

I’m wondering now if it will work if I use a subdomain of the site with a URL redirect. Or, I could use an actual CDN (probably CloudFront) with a CNAME, which would be more proper.

I will experiment with both a report back.

[Justin]

Hi Tom,

I switched over to a proper subdomain with a CNAME pointer, but still no dice.

What I am noticing is the subdomain is truncated off in the CSS, and a portion of the subdirectory is missing.

.gb-container.gb-container-367ef865 {
 background-image:linear-gradient(135deg,rgba(24,106,178,.9) 20%,rgba(0,175,229,.8) 80%),url(//twelvenet.com/wp-content/uploads/2020/06/fikret-tozak-Zk-Ydz2IAs-unsplash.jpg);
 background-repeat:no-repeat;
 background-position:center top;
 background-size:cover
}

It should be:
https://media.twelvenet.com/wp-content/uploads/2020/06/24230938/fikret-tozak-Zk-Ydz2IAs-unsplash.jpg

This leads me to believe that either WP Offload Media or GenerateBlocks is generating the URL by combining strings. Maybe something like “WP_SITEURL + UPLOADS + FILE_NAME”.

*note that this is just an example, I am not adding a custom upload folder to wp-config.php

I am thinking it is something with how GenerateBlocks gets the URL simply because the fully qualified URL shows up everywhere on the site except the CSS from GenerateBlocks.

Thanks again!

[Tom]

GenerateBlocks is actually using a core WordPress component for the image upload option:
https://github.com/tomusborne/generateblocks/blob/1.0.2/src/blocks/container/edit.js#L42
https://github.com/tomusborne/generateblocks/blob/1.0.2/src/blocks/container/edit.js#L1180
https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/media-upload

I assume that it’s grabbing the File URL from the Media Library, which would be built with your URL setting in “Settings > General”.

[Justin]

Hi Tom,

Thanks again. It is clear this is not a GP/Site Library problem, which I suspected from the beginning. It seems WP Offload Media and GenerateBlocks are just incompatible at this time.

The simple solution is just to keep the images used in the theme on the local server.

I’m going to dig into GenerateBlocks and see if I can come up with a solution. I’ll send a pull request if it works!

[Tom]

Thank you! Appreciate that 🙂

[Author]

Posts