• Hi,

    First of all, thanks for the awesome plugin, it works fantastic!

    I have 2 questions:

    1. If i watch the source code, i see the sourceset of the image points properly to imagedelivery.net, but the first image still points to the main server. Example:
    <img width="685" height="445" src="https://mydomain.com/wp-content/uploads/2021/12/Wildways-V7-MC1-4-aspect-ratio-685-445.jpg" class="attachment-slider-item size-slider-item" alt="" decoding="async" loading="lazy" srcset="https://imagedelivery.net/g65XQ1NFDxpPR_G3NFTuoA/86645ba6-31bd-4058-02a6-49150ffbca00/w=9999 2000w, https://imagedelivery.net/g65XQ1NFDxpPR_G3NFTuoA/86645ba6-31bd-4058-02a6-49150ffbca00/w=300,h=195 300w, https://imagedelivery.net/g65XQ1NFDxpPR_G3NFTuoA/86645ba6-31bd-4058-02a6-49150ffbca00/w=1024,h=665 1024w, https://imagedelivery.net/g65XQ1NFDxpPR_G3NFTuoA/86645ba6-31bd-4058-02a6-49150ffbca00/w=768,h=499 768w, https://imagedelivery.net/g65XQ1NFDxpPR_G3NFTuoA/86645ba6-31bd-4058-02a6-49150ffbca00/w=1536,h=998 1536w" sizes="(max-width: 685px) 100vw, 685px" />

    2. If i call the image by wp_get_attachment_image_url(), the image is still loading from the original source:

    <style>
    		@media (min-width: 1441px) {
    			#page-hero-gradient-5421 {
    				background-image: url(https://mydomain.com/wp-content/uploads/2022/10/Sebastian-Lanser-RNT-1080-1-aspect-ratio-1920-960.jpg) !important;
    			}
    		}
    
    		@media (max-width: 1024px) {
    			#page-hero-gradient-5421 {
    				background-image: url(https://mydomain.com/wp-content/uploads/2022/10/Sebastian-Lanser-RNT-1080-1-aspect-ratio-1024-550.jpg) !important;
    			}
    		}
    
    		@media (max-width: 767px) {
    			#page-hero-gradient-5421 {
    				background-image: url(https://mydomain.com/wp-content/uploads/2022/10/Sebastian-Lanser-RNT-1080-1-aspect-ratio-768-690-4.jpg) !important;
    			}
    		}
    
    		@media (max-width: 414px) {
    			#page-hero-gradient-5421 {
    				background-image: url(https://mydomain.com/wp-content/uploads/2022/10/Sebastian-Lanser-RNT-1080-1-aspect-ratio-375-418-5.jpg) !important;
    			}
    		}
    
    </style>
    
    <div id="page-hero-gradient-5421" class="page-hero-gradient dark gradient-on" style="background-image: url(https://mydomain.com/wp-content/uploads/2022/10/Sebastian-Lanser-RNT-1080-1-aspect-ratio-1440-723.jpg)">
    {...}
    </div>

    Is there any way to fix this?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Anton Vanyukov

    (@vanyukov)

    @rienco,

    How is the first image created? Also using the wp_get_attachment_image_url()? The file name does not look like a default WordPress attachment size, so I think the plugin is having problems finding the correct attachment.

    Regarding the second issue. I’ve made some adjustments to how image sizes are processed. Could you please test this version: https://github.com/av3nger/cf-images/releases/tag/1.1.3-beta.3

    Also, it would help if you could provide some examples of wp_get_attachment_image_url(), specifically the second argument in this function.

    Best regards,
    Anton

    Thread Starter rienco

    (@rienco)

    Hi @vanyukov

    The first image is created by wp_get_attachement_image:

    <?php $image = get_sub_field('image'); ?>
    <?= wp_get_attachment_image($image, 'slider-item'); ?>

    I’ve updated it to 1.1.3-beta3 and tested it also with v1.1.4, but both had no differences in the behaviour of the plugin. The code we’re using:

    <?php $is_custom_responsive_background = options::getSub('gradient_custom_responsive_background', $page_id);
    $background_image_large = options::getSub('gradient_background_large', $page_id);
    $background_image_large = wp_get_attachment_image_url($background_image_large, 'hero-gradient') ?: $background_image_large['url'];
    $background_image_tablet_landscape = options::getSub('gradient_background_tablet_landscape', $page_id);
    $background_image_tablet_landscape = wp_get_attachment_image_url($background_image_tablet_landscape, 'hero-gradient') ?: $background_image_tablet_landscape['url'];
    $background_image_tablet_portrait = options::getSub('gradient_background_tablet_portrait', $page_id);
    $background_image_tablet_portrait = wp_get_attachment_image_url($background_image_tablet_portrait, 'hero-gradient') ?: $background_image_tablet_portrait['url'];
    $background_image_phone_portrait = options::getSub('gradient_background_image_phone_portrait', $page_id);
    $background_image_phone_portrait = wp_get_attachment_image_url($background_image_phone_portrait, 'hero-gradient') ?: $background_image_phone_portrait['url']; ?>
    <?php if ($is_custom_responsive_background) : ?>
    	<style>
    		<?php if (!empty($background_image_large)) : ?>@media (min-width: 1441px) {
    			#page-hero-gradient-<?=$div_id;?> {
    				background-image: url(<?php echo $background_image_large; ?>) !important;
    			}
    		}
    
    		<?php endif; ?><?php if (!empty($background_image_tablet_landscape)) : ?>@media (max-width: 1024px) {
    			#page-hero-gradient-<?=$div_id;?> {
    				background-image: url(<?php echo $background_image_tablet_landscape; ?>) !important;
    			}
    		}
    
    		<?php endif; ?><?php if (!empty($background_image_tablet_portrait)) : ?>@media (max-width: 767px) {
    			#page-hero-gradient-<?=$div_id;?> {
    				background-image: url(<?php echo $background_image_tablet_portrait; ?>) !important;
    			}
    		}
    
    		<?php endif; ?><?php if (!empty($background_image_phone_portrait)) : ?>@media (max-width: 414px) {
    			#page-hero-gradient-<?=$div_id;?> {
    				background-image: url(<?php echo $background_image_phone_portrait; ?>) !important;
    			}
    		}
    
    		<?php endif; ?>
    	</style>
    <?php endif; ?>
    Plugin Author Anton Vanyukov

    (@vanyukov)

    Hi @rienco ,

    I’ve tried quite a bit, but, unfortunately, I can’t seem to replicate this. I’ve tried with all possible image sizes, event custom and non-existent ones, Every time I get a proper Cloudflare image link. The only time I was not able to get a link was when the image was not uploaded to Cloudflare.

    If you set up a test environment for me, I can check there, but on my tests I was not able to replicate the issue, sorry.

    Best regards,
    Anton

    Thread Starter rienco

    (@rienco)

    So strange. I uploaded a new version of the image by WordPress. It’s uploaded well to Cloudflare, but the URL still points to:

    https://mydomain.com/wp-content/uploads/2023/02/Sebastian-Lanser-RNT-1080-1-aspect-ratio-1920-960v2.jpg

    instead of:

    https://imagedelivery.net/g65XQ1NFDxpPR_G3NFTuoA/cd1086ca-fce4-4d05-d5df-84f1b8162500/public

    Plugin Author Anton Vanyukov

    (@vanyukov)

    @rienco ,

    Images should not be overwritten. You can remove/upload a new one, or upload a new one. Otherwise, this can lead to cache issues. In any case, you need to “un-offload” the old version first, for this to work

    Best regards,
    Anton

    Thread Starter rienco

    (@rienco)

    I understand, but i rewrite the image in photoshop, removed the old one and uploaded the new one. It’s uploading to Cloudflare, but the linking in the website is not correct.

    Plugin Author Anton Vanyukov

    (@vanyukov)

    Hi @rienco,

    Sorry for the delay in my response. I finally had some time to try and test this out. My test was similar to what you’ve described. I’ve uploaded an image to WordPress, made sure it offloaded to Cloudflare Images, removed the image from WordPress, it got removed from Cloudflare. I then edit the image in Photoshop, upload it under the same name to WordPress again, and it properly creates a new Cloudflare Image entry with a new hash. I did this on a brand new WordPress install, using the Gutenberg image block. And in all cases, the old image was either not displaying, displaying an error or I was able to see the new image.

    Now, having said all the above, I’m not saying there is no case, where it can’t be cached, or saved in some way or something else. But I wasn’t able to replicate this on my end. What I would suggest is to disable the plugin and test that the image is updated without it.

    And, another thing. You’re saying:

    but the linking in the website is not correct

    You are replacing the image in the content, right? If you have the old image added somewhere in the content, and you re-upload the image to the media library, the content will still use the old image. I don’t think WordPress will auto update content this way.

    Best regards,
    Anton

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Fullsize images not beeing served by CloudFlare’ is closed to new replies.