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

Home Forums Support CSS Background Image in Service Theme from Site Library Wrong URL

  • This topic has 7 replies, 3 voices, and was last updated 3 months ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1339972
    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!

    #1339997
    David
    Staff
    Customer Support

    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.

    #1340529
    Tom
    Lead Developer
    Lead Developer

    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.

    #1340776
    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.

    #1340801
    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!

    #1341744
    Tom
    Lead Developer
    Lead Developer

    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”.

    #1342011
    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!

    #1342869
    Tom
    Lead Developer
    Lead Developer

    Thank you! Appreciate that 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.