Inclusion de filtres_images_lib_mini pour pouvoir appeler image_graver #4850

Open
MathieuAlphamosa wants to merge 1 commits from MathieuAlphamosa/spip:mathieualphamosa-appliquer-filtre-images into master

Lorsque l'on utiliser appliquer_filtre sur une image on a l'erreur suivante :
Erreur d’exécution plugins/alphamosa/modeles/picture.html | File […]/ecrire/public/fonctions.php Line 533 : Call to undefined function image_graver()

Je pense qu'il faut inclure inc/filtres_images_lib_mini pour pouvoir utiliser image_graver().

Lorsque l'on utiliser `appliquer_filtre` sur une image on a l'erreur suivante : `Erreur d’exécution plugins/alphamosa/modeles/picture.html | File […]/ecrire/public/fonctions.php Line 533 : Call to undefined function image_graver()` Je pense qu'il faut inclure inc/filtres_images_lib_mini pour pouvoir utiliser image_graver().
MathieuAlphamosa added 1 commit 2 weeks ago
29020e610e inclusion de filtres_images_lib_mini pour pouvoir appeler image_graver
MathieuAlphamosa changed title from inclusion de filtres_images_lib_mini pour pouvoir appeler image_graver to Inclusion de filtres_images_lib_mini pour pouvoir appeler image_graver 2 weeks ago
b_b commented 2 weeks ago
Owner

Étonnnat que ça n'ait pas éé signalé plus tôt, tu peux partager le squelette plugins/alphamosa/modeles/picture.html qui génère l'erreur ?

Étonnnat que ça n'ait pas éé signalé plus tôt, tu peux partager le squelette `plugins/alphamosa/modeles/picture.html` qui génère l'erreur ?

Voilà mon squelette picture.html mais dans l'état il va être difficilement ré-utilisable, il faudrait que je prenne le temps de reproduire le problème sur un cas minimal.

[(#REM)

	Modèle pour insertion (moderne) d'images

	On produit 2 variantes d'une images :
	- 1 normale (desktop)
	- 1 dont la direction artistique pourra être modifiée (pour mobile souvent)
	Pour ces deux variantes on propose des images dans 2 niveaux de densité et dans 2 formats différents (le format d'origine + WebP)

	Ex :
		#MODELE{picture}
			{fichier=#LOGO_ARTICLE|extraire_attribut{src}}
			{traitement=focus}
			{largeur=300}
			{hauteur=300}
			{retina=1.5}
			{mobile_breakpoint=575}
			{mobile_largeur=545}
			{mobile_hauteur=300}
			{mobile_retina=2}
			{alt=''}
			{class='img-fluid'}
			{important=oui}
			{couleur_bg=fcfcfc}
			{retina_qualite=0.8}
			{debug=non}

	Options :

		#MODELE{picture}
			{fichier=CHEMINVERSFICHIERIMAGE}	chemin vers le fichier image, utiliser |extraire_attribut{src} si nécessaire
			{traitement=focus|centre|zoomout|reduire}	traitement à utiliser
			{largeur=INT}						largeur de l'image (tablet + desktop)
			{hauteur=INT}						hauteur de l'image (tablet + desktop)
			{retina=FLOAT}						facteur retina (tablet + desktop), si 0 pas de version retina
			{mobile_breakpoint=INT}				breakpoint entre la variante mobile et desktop, si 0 pas de version mobile
			{mobile_largeur=INT}				largeur de l'image (mobile)
			{mobile_hauteur=INT}				hauteur de l'image (mobile)
			{mobile_retina=FLOAT}				facteur retina (mobile), si 0 pas de version retina pour mobile
			{alt='texte alternatif'}
			{class='classes a ajouter'}
			{important=oui|non}					si 'non' loading=lazy+importance=low si 'oui' loading=eager+importance=high
			{couleur_bg=fcfcfc}					couleur utilisée en bg si besoin, peut être 'transparent'
			{style=''}							attribut style éventuel
			{reduire_artefacts=false|true}		permet de corriger des problèmes de bleeding (surtout dans les rouges/bleu)
			{retina_qualite=FLOAT}				ratio a utiliser pour la qualité des images retina
			{debug=non|oui}						affiche un placard avec les différentes options utilisées

	Notes :
	1/ Une meilleure façon de faire serait de produire des images dans différentes tailles pour le srcset et d'indiquer les dimensions à utiliser via sizes. Mais cette façon de faire compliquerait énormément ce modèle et la syntaxe pour l'utiliser (voir plugin Image Responsive qui fait cela).
	2/ Format d'origine + WebP est un bon compromis : on supporte les anciens navigateurs et WebP donne de bons résultats sur les navigateurs modernes (AVIF n'est pas suffisament supporté, JPEG XL non plus).

	Sources :
	- https://www.smashingmagazine.com/printed-books/image-optimization/
	- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
	- https://developers.google.com/web/fundamentals/design-and-ux/responsive/images
	
]
[(#ENV{fichier}|oui)

	#SET{image_balise,#ENV{fichier}|balise_img}
	#SET{image_format,#ENV{fichier}|supprimer_timestamp|pathinfo|table_valeur{extension}}

	[(#ENV{largeur}|oui)

		[(#REM) parametres desktop ]
		[(#SET{largeur, #ENV{largeur}})]
		[(#SET{hauteur, #ENV{hauteur}})]
		[(#SET{retina, #ENV{retina, 1.5}})]
		[(#SET{retina_largeur, #GET{largeur}|mult{#GET{retina}}|round})]
		[(#SET{retina_hauteur, #GET{hauteur}|mult{#GET{retina}}|round})]

		[(#REM) parametres mobile ]
		[(#SET{mobile_breakpoint, #ENV{mobile_breakpoint, 575}})]
		[(#SET{mobile_largeur, #ENV{mobile_largeur, 545}})]
		[(#ENV{mobile_hauteur}|oui)
			[(#SET{mobile_hauteur, #ENV{mobile_hauteur}})]
		]
		[(#ENV{mobile_hauteur}|non)
			[(#GET{traitement}|!={reduire}|oui)
				[(#SET{mobile_hauteur, #GET{mobile_largeur}|div{#GET{largeur}}|mult{#GET{hauteur}}|round})]
			]
		]
		[(#SET{mobile_retina, #ENV{mobile_retina, 1.6}})]
		[(#SET{mobile_retina_largeur, #GET{mobile_largeur}|mult{#GET{mobile_retina}}|round})]
		[(#SET{mobile_retina_hauteur, #GET{mobile_hauteur}|mult{#GET{mobile_retina}}|round})]

		[(#REM) parametres complementaires ]
		[(#SET{couleur_bg, #ENV{couleur_bg, 'transparent'}})]
		[(#SET{reduire_artefacts, #ENV{reduire_artefacts, false}})]
		[(#SET{retina_qualite, #ENV{retina_qualite, 1}})]
		[(#ENV{important}|=={oui}|oui)
			[(#SET{importance,high})]
			[(#SET{loading,eager})]
		]
		[(#ENV{important}|=={non}|oui)
			[(#SET{importance,low})]
			[(#SET{loading,lazy})]
		]

		[(#REM) 3 traitements possibles :
			- focus : image_recadre_focus
			- centre : image_passe_partout + image_recadre
			- total : image_reduire + image_recadre
			- reduire|aucun : image_reduire
		]
		[(#SET{traitement, #ENV{traitement, reduire}})]
		[(#GET{traitement}|=={focus}|oui)
			[(#SET{traitement1_fonction, image_recadre_focus})]
			[(#SET{traitement1_arg3, 'focus-center'})]
			[(#SET{traitement1_arg4, #GET{couleur_bg}})]
			[(#SET{traitement2_fonction, CECINESTPASUNEVRAIEFONCTION})]
			[(#SET{traitement2_arg3, ''})]
			[(#SET{traitement2_arg4, ''})]
		]
		[(#GET{traitement}|=={centre}|oui)
			[(#SET{traitement1_fonction, image_passe_partout})]
			[(#SET{traitement1_arg3, ''})]
			[(#SET{traitement1_arg4, ''})]
			[(#SET{traitement2_fonction, image_recadre})]
			[(#SET{traitement2_arg3, 'center'})]
			[(#SET{traitement2_arg4, #GET{couleur_bg}})]
		]
		[(#GET{traitement}|=={zoomout}|oui)
			[(#SET{traitement1_fonction, image_reduire})]
			[(#SET{traitement1_arg3, ''})]
			[(#SET{traitement1_arg4, ''})]
			[(#SET{traitement2_fonction, image_recadre})]
			[(#SET{traitement2_arg3, 'center'})]
			[(#SET{traitement2_arg4, #GET{couleur_bg}})]
		]
		[(#GET{traitement}|=={reduire}|oui)
			[(#SET{traitement1_fonction, image_reduire})]
			[(#SET{traitement1_arg3, ''})]
			[(#SET{traitement1_arg4, ''})]
			[(#SET{traitement2_fonction, CECINESTPASUNEVRAIEFONCTION})]
			[(#SET{traitement2_arg3, ''})]
			[(#SET{traitement2_arg4, ''})]
		]

		<picture>
			[(#GET{image_format}|=={jpg}|oui) #SET{image_format,jpeg}]

			[(#REM) SVG : un seul format nécessaire ]
			[(#GET{image_format}|=={svg}|oui)
				[(#GET{image_balise}
				|appliquer_filtre{
					#GET{traitement1_fonction},
					#GET{largeur},
					#GET{hauteur},
					#GET{traitement1_arg3},
					#GET{traitement1_arg4}
				}
				|appliquer_si_filtre{
					#GET{traitement2_fonction},
					#GET{largeur},
					#GET{hauteur},
					#GET{traitement2_arg3},
					#GET{traitement2_arg4}
				}
				|image_optimise
				|inserer_attribut{class,#ENV{class, ''}}
				|inserer_attribut{alt,#ENV{alt, ''}}
				|inserer_attribut{importance,#GET{importance}}
				|inserer_attribut{loading,#GET{loading}})]
			]

			[(#REM) Autres formats (JPG, PNG, WebP...) ]
			[(#GET{image_format}|=={svg}|non)

				[(#REM) on prépare les images intermédiaires dont on va avoir besoin ]
				[(#SET{img_mobile,
					#GET{image_balise}
					|appliquer_filtre{
						#GET{traitement1_fonction},
						#GET{mobile_largeur},
						#GET{mobile_hauteur},
						#GET{traitement1_arg3},
						#GET{traitement1_arg4}
					}
					|appliquer_si_filtre{
						#GET{traitement2_fonction},
						#GET{mobile_largeur},
						#GET{mobile_hauteur},
						#GET{traitement2_arg3},
						#GET{traitement2_arg4}
					}
				})]
				[(#GET{mobile_retina}|>{0}|oui)
					[(#SET{img_mobile_retina,
						#GET{image_balise}
						|appliquer_filtre{#GET{traitement1_fonction},
							#GET{mobile_retina_largeur},
							#GET{mobile_retina_hauteur},
							#GET{traitement1_arg3},
							#GET{traitement1_arg4}
						}
						|appliquer_si_filtre{
							#GET{traitement2_fonction},
							#GET{mobile_retina_largeur},
							#GET{mobile_retina_hauteur},
							#GET{traitement2_arg3},
							#GET{traitement2_arg4}
						}
					})]
				]
				[(#SET{img_desktop,
					#GET{image_balise}
					|appliquer_filtre{
						#GET{traitement1_fonction},
						#GET{largeur},
						#GET{hauteur},
						#GET{traitement1_arg3},
						#GET{traitement1_arg4}
					}
					|appliquer_si_filtre{
						#GET{traitement2_fonction},
						#GET{largeur},
						#GET{hauteur},
						#GET{traitement2_arg3},
						#GET{traitement2_arg4}
					}
				})]
				[(#GET{retina}|>{0}|oui)
					[(#SET{img_desktop_retina,
						#GET{image_balise}
						|appliquer_filtre{
							#GET{traitement1_fonction},
							#GET{retina_largeur},
							#GET{retina_hauteur},
							#GET{traitement1_arg3},
							#GET{traitement1_arg4}
						}
						|appliquer_si_filtre{
							#GET{traitement2_fonction},
							#GET{retina_largeur},
							#GET{retina_hauteur},
							#GET{traitement2_arg3},
							#GET{traitement2_arg4}
						}
					})]
				]

				[(#REM) WebP ]
				[(#SET{srcset_mobile_webp,
					#GET{img_mobile}
					|image_webp{1,#GET{reduire_artefacts}}
					|extraire_attribut{src}
				})]
				[(#GET{mobile_retina}|>{0}|oui)
					[(#GET{image_balise}|largeur|>={#GET{mobile_retina_largeur}}|oui)
						[(#SET{srcset_mobile_retina_webp,
							#GET{img_mobile_retina}
							|image_webp{#GET{retina_qualite},#GET{reduire_artefacts}}
							|extraire_attribut{src}
						})]
					]
				]
				[(#SET{srcset_desktop_webp,
					#GET{img_desktop}
					|image_webp{1,#GET{reduire_artefacts}}
					|extraire_attribut{src}
				})]

				[(#GET{retina}|>{0}|oui)
					[(#GET{image_balise}|largeur|>={#GET{retina_largeur}}|oui)
						[(#SET{srcset_desktop_retina_webp,
							#GET{img_desktop_retina}
							|image_webp{#GET{retina_qualite},#GET{reduire_artefacts}}
							|extraire_attribut{src}
						})]
					]
				]
				[(#GET{mobile_breakpoint}|>{0}|oui)
					[<source media="(max-width: #GET{mobile_breakpoint}px)" srcset="(#GET{srcset_mobile_webp})[, (#GET{srcset_mobile_retina_webp}) #GET{mobile_retina}x]" type="image/webp">]
				]
				[<source srcset="(#GET{srcset_desktop_webp})[, (#GET{srcset_desktop_retina_webp}) #GET{retina}x]" type="image/webp">]

				[(#REM) Format original ]
				[(#GET{image_format}|=={webp}|non)

					[(#SET{srcset_mobile_original,
						#GET{img_mobile}
						|image_optimise{1,#GET{reduire_artefacts}}
						|extraire_attribut{src}
					})]
					[(#GET{image_balise}|largeur|>={#GET{mobile_retina_largeur}}|oui)
						[(#SET{srcset_mobile_retina_original,
							#GET{img_mobile_retina}
							|image_optimise{#GET{retina_qualite},#GET{reduire_artefacts}}
							|extraire_attribut{src}
						})]
					]
					[(#SET{srcset_desktop_original,
						#GET{img_desktop}
						|image_optimise{1,#GET{reduire_artefacts}}
						|extraire_attribut{src}
					})]
					[(#GET{image_balise}|largeur|>={#GET{retina_largeur}}|oui)
						[(#SET{srcset_desktop_retina_original,
							#GET{img_desktop_retina}
							|image_optimise{#GET{retina_qualite},#GET{reduire_artefacts}}
							|extraire_attribut{src}
						})]
					]
					[(#GET{mobile_breakpoint}|>{0}|oui)
						[<source media="(max-width: #GET{mobile_breakpoint}px)" srcset="(#GET{srcset_mobile_original})[, (#GET{srcset_mobile_retina_original}) #GET{mobile_retina}x]" type="image/#GET{image_format}">]
					]
					[<source srcset="(#GET{srcset_desktop_original})[, (#GET{srcset_desktop_retina_original}) #GET{retina}x]" type="image/#GET{image_format}">]
					[(#GET{img_desktop}
					|image_optimise{1,#GET{reduire_artefacts}}
					|inserer_attribut{class,#ENV{class, ''}}
					|inserer_attribut{alt,#ENV{alt, ''}}
					|inserer_attribut{importance,#GET{importance}}
					|inserer_attribut{style,#ENV{style}}
					|inserer_attribut{loading,#GET{loading}})]
				]

				[(#REM) JPG si le format original était WebP (pour les anciens navigateurs) ]
				[(#GET{image_format}|=={webp}|oui)

					[(#SET{srcset_mobile_jpeg,
						#GET{img_mobile}
						|image_aplatir{jpg,#GET{couleur_bg}}
						|image_optimise{1,#GET{reduire_artefacts}}
						|extraire_attribut{src}
					})]
					[(#GET{image_balise}|largeur|>={#GET{mobile_retina_largeur}}|oui)
						[(#SET{srcset_mobile_retina_jpeg,
							#GET{img_mobile_retina}
							|image_aplatir{jpg,#GET{couleur_bg}}
							|image_optimise{#GET{retina_qualite},#GET{reduire_artefacts}}
							|extraire_attribut{src}
						})]
					]
					[(#SET{srcset_desktop_jpeg,
						#GET{img_desktop}
						|image_aplatir{jpg,#GET{couleur_bg}}
						|image_optimise{1,#GET{reduire_artefacts}}
						|extraire_attribut{src}
					})]
					[(#GET{image_balise}|largeur|>={#GET{retina_largeur}}|oui)
						[(#SET{srcset_desktop_retina_jpeg,
							#GET{img_desktop_retina}
							|image_aplatir{jpg,#GET{couleur_bg}}
							|image_optimise{#GET{retina_qualite},#GET{reduire_artefacts}}
							|extraire_attribut{src}
						})]
					]
					[(#GET{mobile_breakpoint}|>{0}|oui)
						[<source media="(max-width: #GET{mobile_breakpoint}px)" srcset="(#GET{srcset_mobile_jpeg})[, (#GET{srcset_mobile_retina_jpeg}) #GET{mobile_retina}x]" type="image/jpeg">]
					]
					[<source srcset="(#GET{srcset_desktop_jpeg})[, (#GET{srcset_desktop_retina_jpeg}) #GET{retina}x]" type="image/jpeg">]
					[(#GET{img_desktop}
					|image_aplatir{jpg,#GET{couleur_bg}}
					|image_optimise{1,#GET{reduire_artefacts}}
					|inserer_attribut{class,#ENV{class, ''}}
					|inserer_attribut{alt,#ENV{alt, ''}}
					|inserer_attribut{importance,#GET{importance}}
					|inserer_attribut{style,#ENV{style}}
					|inserer_attribut{loading,#GET{loading}})]
				]
			]
		</picture>


		[(#REM) debug si besoin ]
		[(#ENV{debug}|=={oui}|oui)
			<pre style="padding: 6px 10px;background-color: #ddd;font-size: 11px;text-align:left;">
				<strong>fichier</strong> : [<a href="/#ENV{fichier}">(#ENV{fichier})</a>]
				<strong>infos</strong> : [(#GET{image_format})] - [(#ENV{fichier}|largeur)]x[(#ENV{fichier}|hauteur)] - [(#VAL{'Y-m-d H:i:s'}|date{#ENV{fichier}|timestamp|match{\d+$}})]
				<strong>traitement</strong> : [(#ENV{traitement})] -> [(#GET{traitement1_fonction})] + [(#GET{traitement2_fonction})]
				<strong>largeur</strong> : [(#ENV{largeur})] -> [(#GET{largeur})]
				<strong>hauteur</strong> : [(#ENV{hauteur})] -> [(#GET{hauteur})]
				<strong>retina</strong> : [(#ENV{retina})] -> [(#GET{retina})] ([(#GET{retina_largeur})]x[(#GET{retina_hauteur})])
				<strong>mobile_largeur</strong> : [(#ENV{mobile_largeur})] -> [(#GET{mobile_largeur})]
				<strong>mobile_hauteur</strong> : [(#ENV{mobile_hauteur})] -> [(#GET{mobile_hauteur})]
				<strong>mobile_retina</strong> : [(#ENV{mobile_retina})] -> [(#GET{mobile_retina})] ([(#GET{mobile_retina_largeur})]x[(#GET{mobile_retina_hauteur})])
				<strong>alt</strong> : [(#ENV{alt})]
				<strong>class</strong> : [(#ENV{class})]
				<strong>important</strong> : [(#ENV{important})] -> [importance=(#GET{importance})] + [loading=(#GET{loading})]
				<strong>couleur_bg</strong> : [(#ENV{couleur_bg})] -> [(#GET{couleur_bg})]
				<strong>style</strong> : [(#ENV{style})]
				<strong>reduire_artefacts</strong> : [(#ENV{reduire_artefacts})] -> [(#GET{reduire_artefacts})]
				<strong>retina_qualite</strong> : [(#ENV{retina_qualite})] -> [(#GET{retina_qualite})]

				[(#GET{image_format}|=={svg}|non)
					<table style="width:100%" cellpadding="6">
						<tr style="border: 1px solid #222;">
							<td>
								<strong>WebP</strong>
							</td>
							<td>
								mob [(#GET{srcset_mobile_webp}|largeur)]x[(#GET{srcset_mobile_webp}|hauteur)]
								[<a href="/#GET{srcset_mobile_webp}"><img src="(#GET{srcset_mobile_webp})" style="max-width:100px;height:auto;"></a>]
							</td>
							<td>
								mob #GET{mobile_retina}x [(#GET{srcset_mobile_retina_webp}|largeur)]x[(#GET{srcset_mobile_retina_webp}|hauteur)]
								[<a href="/#GET{srcset_mobile_retina_webp}"><img src="(#GET{srcset_mobile_retina_webp})" style="max-width:100px;height:auto;"></a>]
								[(#GET{image_balise}|largeur|<{#GET{mobile_retina_largeur}}|oui) trop petit]
							</td>
							<td>
								desk [(#GET{srcset_desktop_webp}|largeur)]x[(#GET{srcset_desktop_webp}|hauteur)]
								[<a href="/#GET{srcset_desktop_webp}"><img src="(#GET{srcset_desktop_webp})" style="max-width:100px;height:auto;"></a>]
							</td>
							<td>
								desk #GET{retina}x [(#GET{srcset_desktop_retina_webp}|largeur)]x[(#GET{srcset_desktop_retina_webp}|hauteur)]
								[<a href="/#GET{srcset_desktop_retina_webp}"><img src="(#GET{srcset_desktop_retina_webp})" style="max-width:100px;height:auto;"></a>]
								[(#GET{image_balise}|largeur|<{#GET{retina_largeur}}|oui) trop petit]
							</td>
							<td>
								
							</td>
						</tr>
						[(#GET{image_format}|=={webp}|non)
							<tr style="border: 1px solid #222;">
								<td>
									<strong>Original</strong>
									#GET{image_format}
								</td>
								<td>
									mob [(#GET{srcset_mobile_original}|largeur)]x[(#GET{srcset_mobile_original}|hauteur)]
									[<a href="/#GET{srcset_mobile_original}"><img src="(#GET{srcset_mobile_original})" style="max-width:100px;height:auto;"></a>]
								</td>
								<td>
									mob #GET{mobile_retina}x [(#GET{srcset_mobile_retina_original}|largeur)]x[(#GET{srcset_mobile_retina_original}|hauteur)]
									[<a href="/#GET{srcset_mobile_retina_original}"><img src="(#GET{srcset_mobile_retina_original})" style="max-width:100px;height:auto;"></a>]
									[(#GET{image_balise}|largeur|<{#GET{mobile_retina_largeur}}|oui) trop petit]
								</td>
								<td>
									desk [(#GET{srcset_desktop_original}|largeur)]x[(#GET{srcset_desktop_original}|hauteur)]
									[<a href="/#GET{srcset_desktop_original}"><img src="(#GET{srcset_desktop_original})" style="max-width:100px;height:auto;"></a>]
								</td>
								<td>
									desk #GET{retina}x [(#GET{srcset_desktop_retina_original}|largeur)]x[(#GET{srcset_desktop_retina_original}|hauteur)]
									[<a href="/#GET{srcset_desktop_retina_original}"><img src="(#GET{srcset_desktop_retina_original})" style="max-width:100px;height:auto;"></a>]
									[(#GET{image_balise}|largeur|<{#GET{retina_largeur}}|oui) trop petit]
								</td>
								<td>
									<strong>img [(#GET{img_desktop}|largeur)]x[(#GET{img_desktop}|hauteur)]</strong>
									[<a href="/[(#GET{img_desktop}|image_optimise{1,#GET{reduire_artefacts}}|extraire_attribut{src})]">(#GET{img_desktop}|image_optimise{1,#GET{reduire_artefacts}}|inserer_attribut{style,'max-width:100px;height:auto;'})</a>]
								</td>
							</tr>
						]
						[(#GET{image_format}|=={webp}|oui)
							<tr style="border: 1px solid #222;">
								<td>
									<strong>JPG</strong>
									forcé
								</td>
								<td>
									mob [(#GET{srcset_mobile_jpeg}|largeur)]x[(#GET{srcset_mobile_jpeg}|hauteur)]
									[<a href="/#GET{srcset_mobile_jpeg}"><img src="(#GET{srcset_mobile_jpeg})" style="max-width:100px;height:auto;"></a>]
								</td>
								<td>
									mob #GET{mobile_retina}x [(#GET{srcset_mobile_retina_jpeg}|largeur)]x[(#GET{srcset_mobile_retina_jpeg}|hauteur)]
									[<a href="/#GET{srcset_mobile_retina_jpeg}"><img src="(#GET{srcset_mobile_retina_jpeg})" style="max-width:100px;height:auto;"></a>]
									[(#GET{image_balise}|largeur|<{#GET{mobile_retina_largeur}}|oui) trop petit]
								</td>
								<td>
									desk [(#GET{srcset_desktop_jpeg}|largeur)]x[(#GET{srcset_desktop_jpeg}|hauteur)]
									[<a href="/#GET{srcset_desktop_jpeg}"><img src="(#GET{srcset_desktop_jpeg})" style="max-width:100px;height:auto;"></a>]
								</td>
								<td>
									desk #GET{retina}x [(#GET{srcset_desktop_retina_jpeg}|largeur)]x[(#GET{srcset_desktop_retina_jpeg}|hauteur)]
									[<a href="/#GET{srcset_desktop_retina_jpeg}"><img src="(#GET{srcset_desktop_retina_jpeg})" style="max-width:100px;height:auto;"></a>]
									[(#GET{image_balise}|largeur|<{#GET{retina_largeur}}|oui) trop petit]
								</td>
								<td>
									<strong>img [(#GET{img_desktop}|largeur)]x[(#GET{img_desktop}|hauteur)]</strong>
									[<a href="/[(#GET{img_desktop}|image_aplatir{jpg,#GET{couleur_bg}}|image_optimise{1,#GET{reduire_artefacts}}|extraire_attribut{src})]">(#GET{img_desktop}|image_aplatir{jpg,#GET{couleur_bg}}|image_optimise{1,#GET{reduire_artefacts}}|inserer_attribut{style,'max-width:100px;height:auto;'})</a>]
								</td>
							</tr>
						]
					</table>
				]

			</pre>
		]
	]

]
#FILTRE{nettoyer_html}
Voilà mon squelette `picture.html` mais dans l'état il va être difficilement ré-utilisable, il faudrait que je prenne le temps de reproduire le problème sur un cas minimal. ``` [(#REM) Modèle pour insertion (moderne) d'images On produit 2 variantes d'une images : - 1 normale (desktop) - 1 dont la direction artistique pourra être modifiée (pour mobile souvent) Pour ces deux variantes on propose des images dans 2 niveaux de densité et dans 2 formats différents (le format d'origine + WebP) Ex : #MODELE{picture} {fichier=#LOGO_ARTICLE|extraire_attribut{src}} {traitement=focus} {largeur=300} {hauteur=300} {retina=1.5} {mobile_breakpoint=575} {mobile_largeur=545} {mobile_hauteur=300} {mobile_retina=2} {alt=''} {class='img-fluid'} {important=oui} {couleur_bg=fcfcfc} {retina_qualite=0.8} {debug=non} Options : #MODELE{picture} {fichier=CHEMINVERSFICHIERIMAGE} chemin vers le fichier image, utiliser |extraire_attribut{src} si nécessaire {traitement=focus|centre|zoomout|reduire} traitement à utiliser {largeur=INT} largeur de l'image (tablet + desktop) {hauteur=INT} hauteur de l'image (tablet + desktop) {retina=FLOAT} facteur retina (tablet + desktop), si 0 pas de version retina {mobile_breakpoint=INT} breakpoint entre la variante mobile et desktop, si 0 pas de version mobile {mobile_largeur=INT} largeur de l'image (mobile) {mobile_hauteur=INT} hauteur de l'image (mobile) {mobile_retina=FLOAT} facteur retina (mobile), si 0 pas de version retina pour mobile {alt='texte alternatif'} {class='classes a ajouter'} {important=oui|non} si 'non' loading=lazy+importance=low si 'oui' loading=eager+importance=high {couleur_bg=fcfcfc} couleur utilisée en bg si besoin, peut être 'transparent' {style=''} attribut style éventuel {reduire_artefacts=false|true} permet de corriger des problèmes de bleeding (surtout dans les rouges/bleu) {retina_qualite=FLOAT} ratio a utiliser pour la qualité des images retina {debug=non|oui} affiche un placard avec les différentes options utilisées Notes : 1/ Une meilleure façon de faire serait de produire des images dans différentes tailles pour le srcset et d'indiquer les dimensions à utiliser via sizes. Mais cette façon de faire compliquerait énormément ce modèle et la syntaxe pour l'utiliser (voir plugin Image Responsive qui fait cela). 2/ Format d'origine + WebP est un bon compromis : on supporte les anciens navigateurs et WebP donne de bons résultats sur les navigateurs modernes (AVIF n'est pas suffisament supporté, JPEG XL non plus). Sources : - https://www.smashingmagazine.com/printed-books/image-optimization/ - https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images - https://developers.google.com/web/fundamentals/design-and-ux/responsive/images ] [(#ENV{fichier}|oui) #SET{image_balise,#ENV{fichier}|balise_img} #SET{image_format,#ENV{fichier}|supprimer_timestamp|pathinfo|table_valeur{extension}} [(#ENV{largeur}|oui) [(#REM) parametres desktop ] [(#SET{largeur, #ENV{largeur}})] [(#SET{hauteur, #ENV{hauteur}})] [(#SET{retina, #ENV{retina, 1.5}})] [(#SET{retina_largeur, #GET{largeur}|mult{#GET{retina}}|round})] [(#SET{retina_hauteur, #GET{hauteur}|mult{#GET{retina}}|round})] [(#REM) parametres mobile ] [(#SET{mobile_breakpoint, #ENV{mobile_breakpoint, 575}})] [(#SET{mobile_largeur, #ENV{mobile_largeur, 545}})] [(#ENV{mobile_hauteur}|oui) [(#SET{mobile_hauteur, #ENV{mobile_hauteur}})] ] [(#ENV{mobile_hauteur}|non) [(#GET{traitement}|!={reduire}|oui) [(#SET{mobile_hauteur, #GET{mobile_largeur}|div{#GET{largeur}}|mult{#GET{hauteur}}|round})] ] ] [(#SET{mobile_retina, #ENV{mobile_retina, 1.6}})] [(#SET{mobile_retina_largeur, #GET{mobile_largeur}|mult{#GET{mobile_retina}}|round})] [(#SET{mobile_retina_hauteur, #GET{mobile_hauteur}|mult{#GET{mobile_retina}}|round})] [(#REM) parametres complementaires ] [(#SET{couleur_bg, #ENV{couleur_bg, 'transparent'}})] [(#SET{reduire_artefacts, #ENV{reduire_artefacts, false}})] [(#SET{retina_qualite, #ENV{retina_qualite, 1}})] [(#ENV{important}|=={oui}|oui) [(#SET{importance,high})] [(#SET{loading,eager})] ] [(#ENV{important}|=={non}|oui) [(#SET{importance,low})] [(#SET{loading,lazy})] ] [(#REM) 3 traitements possibles : - focus : image_recadre_focus - centre : image_passe_partout + image_recadre - total : image_reduire + image_recadre - reduire|aucun : image_reduire ] [(#SET{traitement, #ENV{traitement, reduire}})] [(#GET{traitement}|=={focus}|oui) [(#SET{traitement1_fonction, image_recadre_focus})] [(#SET{traitement1_arg3, 'focus-center'})] [(#SET{traitement1_arg4, #GET{couleur_bg}})] [(#SET{traitement2_fonction, CECINESTPASUNEVRAIEFONCTION})] [(#SET{traitement2_arg3, ''})] [(#SET{traitement2_arg4, ''})] ] [(#GET{traitement}|=={centre}|oui) [(#SET{traitement1_fonction, image_passe_partout})] [(#SET{traitement1_arg3, ''})] [(#SET{traitement1_arg4, ''})] [(#SET{traitement2_fonction, image_recadre})] [(#SET{traitement2_arg3, 'center'})] [(#SET{traitement2_arg4, #GET{couleur_bg}})] ] [(#GET{traitement}|=={zoomout}|oui) [(#SET{traitement1_fonction, image_reduire})] [(#SET{traitement1_arg3, ''})] [(#SET{traitement1_arg4, ''})] [(#SET{traitement2_fonction, image_recadre})] [(#SET{traitement2_arg3, 'center'})] [(#SET{traitement2_arg4, #GET{couleur_bg}})] ] [(#GET{traitement}|=={reduire}|oui) [(#SET{traitement1_fonction, image_reduire})] [(#SET{traitement1_arg3, ''})] [(#SET{traitement1_arg4, ''})] [(#SET{traitement2_fonction, CECINESTPASUNEVRAIEFONCTION})] [(#SET{traitement2_arg3, ''})] [(#SET{traitement2_arg4, ''})] ] <picture> [(#GET{image_format}|=={jpg}|oui) #SET{image_format,jpeg}] [(#REM) SVG : un seul format nécessaire ] [(#GET{image_format}|=={svg}|oui) [(#GET{image_balise} |appliquer_filtre{ #GET{traitement1_fonction}, #GET{largeur}, #GET{hauteur}, #GET{traitement1_arg3}, #GET{traitement1_arg4} } |appliquer_si_filtre{ #GET{traitement2_fonction}, #GET{largeur}, #GET{hauteur}, #GET{traitement2_arg3}, #GET{traitement2_arg4} } |image_optimise |inserer_attribut{class,#ENV{class, ''}} |inserer_attribut{alt,#ENV{alt, ''}} |inserer_attribut{importance,#GET{importance}} |inserer_attribut{loading,#GET{loading}})] ] [(#REM) Autres formats (JPG, PNG, WebP...) ] [(#GET{image_format}|=={svg}|non) [(#REM) on prépare les images intermédiaires dont on va avoir besoin ] [(#SET{img_mobile, #GET{image_balise} |appliquer_filtre{ #GET{traitement1_fonction}, #GET{mobile_largeur}, #GET{mobile_hauteur}, #GET{traitement1_arg3}, #GET{traitement1_arg4} } |appliquer_si_filtre{ #GET{traitement2_fonction}, #GET{mobile_largeur}, #GET{mobile_hauteur}, #GET{traitement2_arg3}, #GET{traitement2_arg4} } })] [(#GET{mobile_retina}|>{0}|oui) [(#SET{img_mobile_retina, #GET{image_balise} |appliquer_filtre{#GET{traitement1_fonction}, #GET{mobile_retina_largeur}, #GET{mobile_retina_hauteur}, #GET{traitement1_arg3}, #GET{traitement1_arg4} } |appliquer_si_filtre{ #GET{traitement2_fonction}, #GET{mobile_retina_largeur}, #GET{mobile_retina_hauteur}, #GET{traitement2_arg3}, #GET{traitement2_arg4} } })] ] [(#SET{img_desktop, #GET{image_balise} |appliquer_filtre{ #GET{traitement1_fonction}, #GET{largeur}, #GET{hauteur}, #GET{traitement1_arg3}, #GET{traitement1_arg4} } |appliquer_si_filtre{ #GET{traitement2_fonction}, #GET{largeur}, #GET{hauteur}, #GET{traitement2_arg3}, #GET{traitement2_arg4} } })] [(#GET{retina}|>{0}|oui) [(#SET{img_desktop_retina, #GET{image_balise} |appliquer_filtre{ #GET{traitement1_fonction}, #GET{retina_largeur}, #GET{retina_hauteur}, #GET{traitement1_arg3}, #GET{traitement1_arg4} } |appliquer_si_filtre{ #GET{traitement2_fonction}, #GET{retina_largeur}, #GET{retina_hauteur}, #GET{traitement2_arg3}, #GET{traitement2_arg4} } })] ] [(#REM) WebP ] [(#SET{srcset_mobile_webp, #GET{img_mobile} |image_webp{1,#GET{reduire_artefacts}} |extraire_attribut{src} })] [(#GET{mobile_retina}|>{0}|oui) [(#GET{image_balise}|largeur|>={#GET{mobile_retina_largeur}}|oui) [(#SET{srcset_mobile_retina_webp, #GET{img_mobile_retina} |image_webp{#GET{retina_qualite},#GET{reduire_artefacts}} |extraire_attribut{src} })] ] ] [(#SET{srcset_desktop_webp, #GET{img_desktop} |image_webp{1,#GET{reduire_artefacts}} |extraire_attribut{src} })] [(#GET{retina}|>{0}|oui) [(#GET{image_balise}|largeur|>={#GET{retina_largeur}}|oui) [(#SET{srcset_desktop_retina_webp, #GET{img_desktop_retina} |image_webp{#GET{retina_qualite},#GET{reduire_artefacts}} |extraire_attribut{src} })] ] ] [(#GET{mobile_breakpoint}|>{0}|oui) [<source media="(max-width: #GET{mobile_breakpoint}px)" srcset="(#GET{srcset_mobile_webp})[, (#GET{srcset_mobile_retina_webp}) #GET{mobile_retina}x]" type="image/webp">] ] [<source srcset="(#GET{srcset_desktop_webp})[, (#GET{srcset_desktop_retina_webp}) #GET{retina}x]" type="image/webp">] [(#REM) Format original ] [(#GET{image_format}|=={webp}|non) [(#SET{srcset_mobile_original, #GET{img_mobile} |image_optimise{1,#GET{reduire_artefacts}} |extraire_attribut{src} })] [(#GET{image_balise}|largeur|>={#GET{mobile_retina_largeur}}|oui) [(#SET{srcset_mobile_retina_original, #GET{img_mobile_retina} |image_optimise{#GET{retina_qualite},#GET{reduire_artefacts}} |extraire_attribut{src} })] ] [(#SET{srcset_desktop_original, #GET{img_desktop} |image_optimise{1,#GET{reduire_artefacts}} |extraire_attribut{src} })] [(#GET{image_balise}|largeur|>={#GET{retina_largeur}}|oui) [(#SET{srcset_desktop_retina_original, #GET{img_desktop_retina} |image_optimise{#GET{retina_qualite},#GET{reduire_artefacts}} |extraire_attribut{src} })] ] [(#GET{mobile_breakpoint}|>{0}|oui) [<source media="(max-width: #GET{mobile_breakpoint}px)" srcset="(#GET{srcset_mobile_original})[, (#GET{srcset_mobile_retina_original}) #GET{mobile_retina}x]" type="image/#GET{image_format}">] ] [<source srcset="(#GET{srcset_desktop_original})[, (#GET{srcset_desktop_retina_original}) #GET{retina}x]" type="image/#GET{image_format}">] [(#GET{img_desktop} |image_optimise{1,#GET{reduire_artefacts}} |inserer_attribut{class,#ENV{class, ''}} |inserer_attribut{alt,#ENV{alt, ''}} |inserer_attribut{importance,#GET{importance}} |inserer_attribut{style,#ENV{style}} |inserer_attribut{loading,#GET{loading}})] ] [(#REM) JPG si le format original était WebP (pour les anciens navigateurs) ] [(#GET{image_format}|=={webp}|oui) [(#SET{srcset_mobile_jpeg, #GET{img_mobile} |image_aplatir{jpg,#GET{couleur_bg}} |image_optimise{1,#GET{reduire_artefacts}} |extraire_attribut{src} })] [(#GET{image_balise}|largeur|>={#GET{mobile_retina_largeur}}|oui) [(#SET{srcset_mobile_retina_jpeg, #GET{img_mobile_retina} |image_aplatir{jpg,#GET{couleur_bg}} |image_optimise{#GET{retina_qualite},#GET{reduire_artefacts}} |extraire_attribut{src} })] ] [(#SET{srcset_desktop_jpeg, #GET{img_desktop} |image_aplatir{jpg,#GET{couleur_bg}} |image_optimise{1,#GET{reduire_artefacts}} |extraire_attribut{src} })] [(#GET{image_balise}|largeur|>={#GET{retina_largeur}}|oui) [(#SET{srcset_desktop_retina_jpeg, #GET{img_desktop_retina} |image_aplatir{jpg,#GET{couleur_bg}} |image_optimise{#GET{retina_qualite},#GET{reduire_artefacts}} |extraire_attribut{src} })] ] [(#GET{mobile_breakpoint}|>{0}|oui) [<source media="(max-width: #GET{mobile_breakpoint}px)" srcset="(#GET{srcset_mobile_jpeg})[, (#GET{srcset_mobile_retina_jpeg}) #GET{mobile_retina}x]" type="image/jpeg">] ] [<source srcset="(#GET{srcset_desktop_jpeg})[, (#GET{srcset_desktop_retina_jpeg}) #GET{retina}x]" type="image/jpeg">] [(#GET{img_desktop} |image_aplatir{jpg,#GET{couleur_bg}} |image_optimise{1,#GET{reduire_artefacts}} |inserer_attribut{class,#ENV{class, ''}} |inserer_attribut{alt,#ENV{alt, ''}} |inserer_attribut{importance,#GET{importance}} |inserer_attribut{style,#ENV{style}} |inserer_attribut{loading,#GET{loading}})] ] ] </picture> [(#REM) debug si besoin ] [(#ENV{debug}|=={oui}|oui) <pre style="padding: 6px 10px;background-color: #ddd;font-size: 11px;text-align:left;"> <strong>fichier</strong> : [<a href="/#ENV{fichier}">(#ENV{fichier})</a>] <strong>infos</strong> : [(#GET{image_format})] - [(#ENV{fichier}|largeur)]x[(#ENV{fichier}|hauteur)] - [(#VAL{'Y-m-d H:i:s'}|date{#ENV{fichier}|timestamp|match{\d+$}})] <strong>traitement</strong> : [(#ENV{traitement})] -> [(#GET{traitement1_fonction})] + [(#GET{traitement2_fonction})] <strong>largeur</strong> : [(#ENV{largeur})] -> [(#GET{largeur})] <strong>hauteur</strong> : [(#ENV{hauteur})] -> [(#GET{hauteur})] <strong>retina</strong> : [(#ENV{retina})] -> [(#GET{retina})] ([(#GET{retina_largeur})]x[(#GET{retina_hauteur})]) <strong>mobile_largeur</strong> : [(#ENV{mobile_largeur})] -> [(#GET{mobile_largeur})] <strong>mobile_hauteur</strong> : [(#ENV{mobile_hauteur})] -> [(#GET{mobile_hauteur})] <strong>mobile_retina</strong> : [(#ENV{mobile_retina})] -> [(#GET{mobile_retina})] ([(#GET{mobile_retina_largeur})]x[(#GET{mobile_retina_hauteur})]) <strong>alt</strong> : [(#ENV{alt})] <strong>class</strong> : [(#ENV{class})] <strong>important</strong> : [(#ENV{important})] -> [importance=(#GET{importance})] + [loading=(#GET{loading})] <strong>couleur_bg</strong> : [(#ENV{couleur_bg})] -> [(#GET{couleur_bg})] <strong>style</strong> : [(#ENV{style})] <strong>reduire_artefacts</strong> : [(#ENV{reduire_artefacts})] -> [(#GET{reduire_artefacts})] <strong>retina_qualite</strong> : [(#ENV{retina_qualite})] -> [(#GET{retina_qualite})] [(#GET{image_format}|=={svg}|non) <table style="width:100%" cellpadding="6"> <tr style="border: 1px solid #222;"> <td> <strong>WebP</strong> </td> <td> mob [(#GET{srcset_mobile_webp}|largeur)]x[(#GET{srcset_mobile_webp}|hauteur)] [<a href="/#GET{srcset_mobile_webp}"><img src="(#GET{srcset_mobile_webp})" style="max-width:100px;height:auto;"></a>] </td> <td> mob #GET{mobile_retina}x [(#GET{srcset_mobile_retina_webp}|largeur)]x[(#GET{srcset_mobile_retina_webp}|hauteur)] [<a href="/#GET{srcset_mobile_retina_webp}"><img src="(#GET{srcset_mobile_retina_webp})" style="max-width:100px;height:auto;"></a>] [(#GET{image_balise}|largeur|<{#GET{mobile_retina_largeur}}|oui) trop petit] </td> <td> desk [(#GET{srcset_desktop_webp}|largeur)]x[(#GET{srcset_desktop_webp}|hauteur)] [<a href="/#GET{srcset_desktop_webp}"><img src="(#GET{srcset_desktop_webp})" style="max-width:100px;height:auto;"></a>] </td> <td> desk #GET{retina}x [(#GET{srcset_desktop_retina_webp}|largeur)]x[(#GET{srcset_desktop_retina_webp}|hauteur)] [<a href="/#GET{srcset_desktop_retina_webp}"><img src="(#GET{srcset_desktop_retina_webp})" style="max-width:100px;height:auto;"></a>] [(#GET{image_balise}|largeur|<{#GET{retina_largeur}}|oui) trop petit] </td> <td> </td> </tr> [(#GET{image_format}|=={webp}|non) <tr style="border: 1px solid #222;"> <td> <strong>Original</strong> #GET{image_format} </td> <td> mob [(#GET{srcset_mobile_original}|largeur)]x[(#GET{srcset_mobile_original}|hauteur)] [<a href="/#GET{srcset_mobile_original}"><img src="(#GET{srcset_mobile_original})" style="max-width:100px;height:auto;"></a>] </td> <td> mob #GET{mobile_retina}x [(#GET{srcset_mobile_retina_original}|largeur)]x[(#GET{srcset_mobile_retina_original}|hauteur)] [<a href="/#GET{srcset_mobile_retina_original}"><img src="(#GET{srcset_mobile_retina_original})" style="max-width:100px;height:auto;"></a>] [(#GET{image_balise}|largeur|<{#GET{mobile_retina_largeur}}|oui) trop petit] </td> <td> desk [(#GET{srcset_desktop_original}|largeur)]x[(#GET{srcset_desktop_original}|hauteur)] [<a href="/#GET{srcset_desktop_original}"><img src="(#GET{srcset_desktop_original})" style="max-width:100px;height:auto;"></a>] </td> <td> desk #GET{retina}x [(#GET{srcset_desktop_retina_original}|largeur)]x[(#GET{srcset_desktop_retina_original}|hauteur)] [<a href="/#GET{srcset_desktop_retina_original}"><img src="(#GET{srcset_desktop_retina_original})" style="max-width:100px;height:auto;"></a>] [(#GET{image_balise}|largeur|<{#GET{retina_largeur}}|oui) trop petit] </td> <td> <strong>img [(#GET{img_desktop}|largeur)]x[(#GET{img_desktop}|hauteur)]</strong> [<a href="/[(#GET{img_desktop}|image_optimise{1,#GET{reduire_artefacts}}|extraire_attribut{src})]">(#GET{img_desktop}|image_optimise{1,#GET{reduire_artefacts}}|inserer_attribut{style,'max-width:100px;height:auto;'})</a>] </td> </tr> ] [(#GET{image_format}|=={webp}|oui) <tr style="border: 1px solid #222;"> <td> <strong>JPG</strong> forcé </td> <td> mob [(#GET{srcset_mobile_jpeg}|largeur)]x[(#GET{srcset_mobile_jpeg}|hauteur)] [<a href="/#GET{srcset_mobile_jpeg}"><img src="(#GET{srcset_mobile_jpeg})" style="max-width:100px;height:auto;"></a>] </td> <td> mob #GET{mobile_retina}x [(#GET{srcset_mobile_retina_jpeg}|largeur)]x[(#GET{srcset_mobile_retina_jpeg}|hauteur)] [<a href="/#GET{srcset_mobile_retina_jpeg}"><img src="(#GET{srcset_mobile_retina_jpeg})" style="max-width:100px;height:auto;"></a>] [(#GET{image_balise}|largeur|<{#GET{mobile_retina_largeur}}|oui) trop petit] </td> <td> desk [(#GET{srcset_desktop_jpeg}|largeur)]x[(#GET{srcset_desktop_jpeg}|hauteur)] [<a href="/#GET{srcset_desktop_jpeg}"><img src="(#GET{srcset_desktop_jpeg})" style="max-width:100px;height:auto;"></a>] </td> <td> desk #GET{retina}x [(#GET{srcset_desktop_retina_jpeg}|largeur)]x[(#GET{srcset_desktop_retina_jpeg}|hauteur)] [<a href="/#GET{srcset_desktop_retina_jpeg}"><img src="(#GET{srcset_desktop_retina_jpeg})" style="max-width:100px;height:auto;"></a>] [(#GET{image_balise}|largeur|<{#GET{retina_largeur}}|oui) trop petit] </td> <td> <strong>img [(#GET{img_desktop}|largeur)]x[(#GET{img_desktop}|hauteur)]</strong> [<a href="/[(#GET{img_desktop}|image_aplatir{jpg,#GET{couleur_bg}}|image_optimise{1,#GET{reduire_artefacts}}|extraire_attribut{src})]">(#GET{img_desktop}|image_aplatir{jpg,#GET{couleur_bg}}|image_optimise{1,#GET{reduire_artefacts}}|inserer_attribut{style,'max-width:100px;height:auto;'})</a>] </td> </tr> ] </table> ] </pre> ] ] ] #FILTRE{nettoyer_html} ```

@b_b Je pense avoir réussi à reproduire le problème avec un cas minimal.

Si j'applique un filtre d'image avec le filtre |appliquer_filtre et si il s'agit du tout premier traitment d'image demandé sur la page alors j'ai l'erreur :

[(#LOGO_SITE_SPIP|appliquer_filtre{image_reduire,200,0})]

Avec le code qui suit, plus de problème car on a déjà un traitement qui a du charger 'inc/filtres_images_lib_mini' (enfin j'imagine)...

[(#LOGO_SITE_SPIP|image_reduire{200,0})]
[(#LOGO_SITE_SPIP|appliquer_filtre{image_reduire,200,0})]
@b_b Je pense avoir réussi à reproduire le problème avec un cas minimal. Si j'applique un filtre d'image avec le filtre `|appliquer_filtre` et si il s'agit du tout premier traitment d'image demandé sur la page alors j'ai l'erreur : ``` [(#LOGO_SITE_SPIP|appliquer_filtre{image_reduire,200,0})] ``` Avec le code qui suit, plus de problème car on a déjà un traitement qui a du charger 'inc/filtres_images_lib_mini' (enfin j'imagine)... ``` [(#LOGO_SITE_SPIP|image_reduire{200,0})] [(#LOGO_SITE_SPIP|appliquer_filtre{image_reduire,200,0})] ```
This pull request can be merged automatically.
This branch is out-of-date with the base branch
You are not authorized to merge this pull request.
Sign in to join this conversation.
No reviewers
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

This pull request currently doesn't have any dependencies.

Loading…
There is no content yet.