Made in Chicago Company Directory

Resolved benoitfouc
(@benoitfouc)

6 months, 2 weeks ago
Hello there, on my homepage i’ve upload a 1920*469px image displayed full width and i’ve add the Width and Height data on the HTML balise.

But, when i activate the jetpack CDN for images (Photon) the image is src loaded with a size of 1024× 250px SO it’s realy blur because she still displayed in full width. (as i want)

I’ve try to exclude this image from CDN using this code :
```
function my_photon_exception( $val, $src, $tag ) {
if ( $src == 'https://boutique.nature-partage.com/wp-content/uploads/2023/11/Banniere-noel-1920-x-469-px-1.jpg' ) {
return true;
}
return $val;
}
add_filter( 'jetpack_photon_skip_image', 'my_photon_exception', 10, 3 );
```
But it’s not working.

Please take a look : https://boutique.nature-partage.com/

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

Viewing 15 replies - 1 through 15 (of 15 total)

Plugin Support Animesh Gaurav (a11n)
(@bizanimesh)

6 months, 1 week ago

Hello there – I see the image CDN for the site is currently enabled, and the image is also appearing with the correct size. Could you please confirm if the issue is resolved now?

Thread Starter benoitfouc
(@benoitfouc)

6 months, 1 week ago

Hello there, the image is displayed as the good size but the SRC is loaded as 1024× 250px so the quality is very bad.

Image loaded (src): https://i0.wp.com/boutique.nature-partage.com/wp-content/uploads/2023/11/Banniere-noel-1920-x-469-px-1.jpg?resize=1024%2C250&ssl=1

You can see the “RESIZE=1024px” at the end of the URL

regards

Plugin Support Animesh Gaurav (a11n)
(@bizanimesh)

6 months, 1 week ago

Hello there – you may try to disable CDN on that page or you can also change the way Jetpack CDN processes images, we have some hooks available here you can try.

If you need a plugin to easily add the codes, you can try Code Snippet: https://wordpress.org/plugins/code-snippets

Plugin Support Joseph B. (a11n)
(@tamirat22)

6 months ago

Hi there!

It’s been one week since this topic was last updated. I’m going to mark this thread as solved. If you have any further questions or need more help, you’re welcome to open another thread here. Cheers!
Thread Starter benoitfouc
(@benoitfouc)

2 months ago
Hello there, sorry for the delay…

I apply this snipet on the functions.php file of my theme but that it’s not working :
```
function my_photon_exception( $val, $src, $tag ) {

        if ( $src == 'https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires-.png' ) {

                return true;

        }

        return $val;

}

add_filter( 'jetpack_photon_skip_image', 'my_photon_exception', 10, 3 );
```
i want to exclude ONLY the first top full image of the homepage of the CDN, not all others images on the page :

This image change every months, so i put a classname = “JetpackCDNDisable” so, if a way exist to EXCLUDE from CDN images whith this classname, i’m realy interested. i try this one but it’s not working too :
```
function my_photon_exception( $val, $src, $tag ) {
    // On vérifie si le mot "Banniere" est présent dans la variable $src
    if ( strpos( $src, 'Banniere' ) !== false ) {
        return true;
    }

    return $val;
}

add_filter( 'jetpack_photon_skip_image', 'my_photon_exception', 10, 3 );
```
Please can you help me ?

regards
- This reply was modified 2 months ago by benoitfouc.
Plugin Author Jeremy Herve
(@jeherve)

Jetpack Mechanic 🚀

1 month, 3 weeks ago
Jetpack indeed doesn’t offer a way to filter via a specific class name yet. Instead, you will need to target the right image using its URL and its ALT tag. Here is how you could go about it:
```
/**
 * Do not use Photon for the image used in the hero section of the home page.
 *
 * @see https://wordpress.org/support/topic/wrong-resizing-with-photon-cdn/
 *
 * @param bool   $skip Should Photon ignore this image. Default to false.
 * @param string $src  Image URL.
 * @param string $tag  Image Tag (Image HTML output).
 */
function boutnatpart_skip_home_hero( $skip, $src, $tag ) {
	if (
		! is_front_page() // Bail early if we're not on the home page.
	) {
		return $skip;
	}

	// Exclude the main image output if it includes a specific alt tag.
	if (
		is_string( $tag )
		&& str_contains( $tag, 'Bannière principale' )
	) {
		return true;
	}

	// Exclude srcset images for that image as well, using part of the file name.
	if ( str_contains( $src, 'nos-complements-alimentaires' ) ) {
		return true;
	}

	// Final fallback.
	return $skip;
}
add_filter( 'jetpack_photon_skip_image', 'boutnatpart_skip_home_hero', 10, 3 );
```
when i activate the jetpack CDN for images (Photon) the image is src loaded with a size of 1024× 250px SO it’s realy blur because she still displayed in full width

This is most likely happening because of your theme’s $content_width value. Jetpack’s image CDN tries to respect that maximum content width value defined by your theme, but it obviously doesn’t apply to images that you want to display over the full width of the browser.

This is something we’re discussing in this GitHub issue. Unfortunately there is no simple work-around for that problem. You could try to define a custom content width like so, but I am not familiar with your theme so I am not sure that would work. You would also need to check whether other images and galleries are impacted by such a change:
```
add_filter(
	'jetpack_content_width',
	function () {
		return 1870;
	}
);
```
Thread Starter benoitfouc
(@benoitfouc)

1 month, 3 weeks ago

Bonjour Jeremy, merci pour votre retour !

Alors le premier code fonctionne, il exclut bien l’image du CDN, la faisant ainsi charger directement sur le serveur de mon site. CEPENDANT il applique quand même une réduction des dimensions de l’image, faisant charger cette image là : https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires–1536×384.png (plus de CDN MAIS mauvaises dimensions). Donc l’image reste floue / pas nette.
Si je désactive la fonctionnalité CDN de Jetpack, alors l’image sera correctement chargée aux bonnes dimensions. Pour info, j’utilise le thème Salient.

J’en viens donc à votre second code, qui à lui seul, permet à la fois de charger l’image aux dimensions souhaitées mais aussi de continuer d’appliquer le CDN (pour des meilleures performances). Cependant, je crains que ce code ait des répercussions sur les autres images.
Est-il possible de conditionner ce code à s’exécuter que pour cette image ?
Et quel est le fonctionnement global de ce crochet ?

Bonne journée
Plugin Author Jeremy Herve
(@jeherve)

Jetpack Mechanic 🚀

1 month, 3 weeks ago
CEPENDANT il applique quand même une réduction des dimensions de l’image

Could you try adding this extra code as well?
```
/**
 * Ensure Photon is short-circuited for that specific image.
 *
 * @see https://wordpress.org/support/topic/wrong-resizing-with-photon-cdn/
 *
 * @param bool true Is the image URL valid and can it be used by Photon. Default to true.
 * @param string $url Image URL.
 * @param array $parsed_url Array of information about the image.
 */
add_filter( 'photon_validate_image_url', function ( $valid, $url, $parsed_url ) {
	if ( str_contains( $url, 'nos-complements-alimentaires' ) ) {
		return false;
	}
	return $valid;
}, 10, 3 );
```
Cependant, je crains que ce code ait des répercussions sur les autres images.
Est-il possible de conditionner ce code à s’exécuter que pour cette image ?

No, that’s not an option I’m afraid. It applies to all galleries added by Jetpack (such as Tiled Galleries), the Carousel modal added by Jetpack if you use it on your site, as well as some of the embeds added by Jetpack (such as VideoPress videos, stories).

If you use any of those features on your site, you can check a few posts and see if everything is still displayed properly.
Thread Starter benoitfouc
(@benoitfouc)

1 month, 3 weeks ago
Could you try adding this extra code as well?

Hello again, thank you very much for responding. Unfortunately this extract don’t changes anything: : https://boutique.nature-partage.com/

The image is correctly exclude of the CDN, thank to the first snippet, but still loaded in the wrong size as long as the Jetpack CDN feature is enabled.

regards
- This reply was modified 1 month, 3 weeks ago by benoitfouc.
Plugin Author Jeremy Herve
(@jeherve)

Jetpack Mechanic 🚀

1 month, 3 weeks ago

Could you copy the exact markup of that image from the code editor view in the post editor, and paste it here? I’d like to run some tests on my hand to try to understand what is happening on your site.

Thank you!
Thread Starter benoitfouc
(@benoitfouc)

1 month, 3 weeks ago
Hi Jeremy, sure ! I’m using WPBackery (edited by Salient) and the element is Single image :

(i try to change many times the “image size” option, but that change nothing)
```
[vc_row type="full_width_content" full_screen_row_position="middle" column_margin="none" column_direction="default" column_direction_tablet="default" column_direction_phone="default" scene_position="center" top_padding="25" top_padding_tablet="25" top_padding_phone="25" text_color="dark" text_align="left" row_border_radius="none" row_border_radius_applies="bg" overflow="visible" overlay_strength="0.3" gradient_direction="left_to_right" shape_divider_position="bottom" bg_image_animation="none" gradient_type="default" shape_type=""][vc_column column_padding="no-extra-padding" column_padding_tablet="inherit" column_padding_phone="inherit" column_padding_position="all" column_element_direction_desktop="default" column_element_spacing="default" desktop_text_alignment="default" tablet_text_alignment="default" phone_text_alignment="default" background_color_opacity="1" background_hover_color_opacity="1" column_backdrop_filter="none" column_shadow="none" column_border_radius="none" column_link_target="_self" column_position="default" gradient_direction="left_to_right" overlay_strength="0.3" width="1/1" tablet_width_inherit="default" animation_type="default" bg_image_animation="none" border_type="simple" column_border_width="none" column_border_style="solid"][image_with_animation image_url="125083" image_size="large_featured" animation_type="entrance" animation="None" animation_movement_type="transform_y" hover_animation="none" alignment="center" border_radius="none" box_shadow="none" image_loading="skip-lazy-load" max_width="none" max_width_mobile="125%" img_link="https://boutique.nature-partage.com/categorie-produit/complements-alimentaires/" el_class="JetpackCDNDisable"][/vc_column][/vc_row]
```
regards
- This reply was modified 1 month, 3 weeks ago by benoitfouc.
Plugin Author Jeremy Herve
(@jeherve)

Jetpack Mechanic 🚀

1 month, 3 weeks ago

Thank you. Could you now post the image markup as you see it when viewing the page’s source code, when Photon is active and then when Photon is inactive?

Thank you.
Thread Starter benoitfouc
(@benoitfouc)

1 month, 3 weeks ago
Sure ! There is the markup when Photon is activated :
```
<img fetchpriority="high" decoding="async" class="img-with-animation JetpackCDNDisable skip-lazy" data-delay="0" height="468" width="1870" data-animation="none" src="https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires-.png" alt="Bannière principal pour découvrir nos compléments alimentaires" srcset="https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires-.png 1870w, https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires--300x75.png 300w, https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires--1024x256.png 1024w, https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires--768x192.png 768w, https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires--1536x384.png 1536w, https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires--600x150.png 600w, https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires--80x20.png 80w" sizes="(max-width: 1080px) 100vw, 1080px">
```
And now where he is disable :
```
<img fetchpriority="high" decoding="async" class="img-with-animation JetpackCDNDisable skip-lazy" data-delay="0" height="468" width="1870" data-animation="none" src="https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires-.png" alt="Bannière principal pour découvrir nos compléments alimentaires" srcset="https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires-.png 1870w, https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires--300x75.png 300w, https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires--1024x256.png 1024w, https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires--768x192.png 768w, https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires--1536x384.png 1536w, https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires--600x150.png 600w, https://boutique.nature-partage.com/wp-content/uploads/2024/03/Banniere-principal-pour-decouvrir-nos-complements-alimentaires--80x20.png 80w" sizes="(max-width: 1870px) 100vw, 1870px">
```
If needed, i can give you an access to my stagging website.

regards
- This reply was modified 1 month, 3 weeks ago by benoitfouc.
- This reply was modified 1 month, 3 weeks ago by benoitfouc.
Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

1 month, 3 weeks ago

@benoitfouc

“If needed, i can give you an access to my stagging website.”

Please don’t offer to send or post logon credentials on these forums: https://wordpress.org/support/guidelines#the-bad-stuff

It is not OK to offer, enter, or send site credentials on these forums. Thanks for your cooperation.
Plugin Author Jeremy Herve
(@jeherve)

Jetpack Mechanic 🚀

1 month, 3 weeks ago
Thank you!

This seems to be related to your theme’s $content_width value once again. The snippet I gave you earlier should help with this:
```
add_filter(
	'jetpack_content_width',
	function () {
		return 1870;
	}
);
```

Viewing 15 replies - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.