[Résolu] Bug affichage images dans Slick

Général
1

Bonjour à tous,

Notre site legrandmenage.fr (SPIP 4.2.3) utilise le plugin Slick (2.0.2) pour afficher un slider d’articles en page d’accueil. Pb: les images ne s’affichent pas (icône d’image cassée).

Lorsqu’on regarde le code de la page, la raison est claire :

<img src="<img data-lazy=&quot;local/cache-vignettes/L280xH190/8917ed5833b692fc2bafc638b0d71e-d7bc4.jpg?1709941202&quot; width=&quot;280&quot; height=&quot;190&quot; alt=&quot;&quot; />">

Pour chaque image, le src= commence par un '<img data-lazy=" qui n’a rien à faire là. D’ailleurs, quand on le supprime dans l’inspecteur, l’image s’affiche.

Je suis allé voir dans le code du plug-in. j’ai trouvé le modèle /plugins/auto/slick/v2.0.2/modeles/article_slick.html qui contient le code

<img src="[(#FICHIER|image_reduire{#GET{largeur},*}|extraire_attribut{src})]" alt="[(#TITRE|textebrut|attribut_html)]">

J’ai modifié ce code en

<img src="[(#FICHIER|extraire_attribut{src})]" alt="[(#TITRE|textebrut|attribut_html)]">

mais rien ne change.
J’ai l’impression que la modif n’est pas prise en compte et le bout de code erroné apparaît toujours dans le code de la page.

Quelqu’un a-t-il une idée de comment régler ce pb ?

Merci d’avance

2

Sachant que ça marche avec la dernière version de SoyezCréateurs : noisettes/sommaire_modeportailcognac_goodies.html · master · spip-contrib-squelettes / soyezcreateurs · GitLab

Il faudrait mettre à jour ce dernier.

Pour cela, il faudrait mettre à jour SPIP (4.2.3 comporte des failles de sécurité).

Et passer en SoyezCréateurs 6.0.2.

3

Bonsoir,

Merci de votre réponse.

J’ai dupliqué le site vers spip3test.legrandmenage.fr pour pouvoir faire des tests hors prod.

Je viens de mettre à jour :

  • tous les plugin qui ne l’étaient pas,
  • SPIP en 4.2.10
  • et SoyezCréateurs en 6.0.2.
    J’ai vidé tous les caches et recalculé la page d’accueil.

Mais le pb persiste.

Comme indiqué précédemment, li y a du code ‹ lazy-load › qui traine dans le src= au début du chemin vers l’image. D’où le chemin erroné et l’image qui ne se charge pas.

Et lorsque je vais dans les fichiers du plugin Slick slideshow, je trouve notamment le modèle article_slick.hml.

Dans la boucle qui permet d’appeler les articles, il y a la balise

    <img src="[(#FICHIER|image_reduire{#GET{largeur},*}|extraire_attribut{src})]"
        [(#ENV{afftitre}|oui)<div class="slick-titre">#TITRE</div>]
        [(#ENV{affdesc}|oui)[<div class="slick-descriptif">(#DESCRIPTIF|ptobr)</div>]]

Donc dans le modèle, src= appelle

#FICHIER|image_reduire{#GET{largeur],*}...

ce qui ne semble pas devoir être des données se trouvant dans src=.

Mais lorsque j’enlève

|image_reduire{#GET{largeur],*}

ça ne change rien.

Je suis perplexe… :grin:

JL

4

Dans cette tentative, le |extraire_attribut{src} est inutile et foireux puisque #FICHIER n’est pas une balise <IMG> et n’a donc pas d’attribut src à extraire. Je suppose que ça renvoie une chaîne vide. Pour tester dans cette direction c’est donc directement #FICHIER qu’il te faut utiliser ici.

5

SoyezCréateurs n’utilise pas ce modèle.

Ce qui peut être vérifié avec http://www.spip3test.legrandmenage.fr/?var_mode=inclure (je n’y ai pas accès : il faut être connecté comme admin pour ça).

6

Effectivement. C’est bien Slick lui-même qui utilise ce modèle.

7

Alors le mystère s’épaissit… Pourquoi Slick utilise-t-il ce modèle alors ? :thinking:

8

Pourtant, quand moi je teste sur un de mes sites, il n’y a pas d’appel à ce modèle sur la page d’accueil :
C’est seulement plugins/soyezcreateurs/noisettes/sommaire_modeportailcognac_goodies.html et rien de plus dans ce bloc.

9

De quelle manière est intégrée le module slick ?
Je viens de faire un test dans le texte d’un article avec un appel du modèle <articleXX|slick>.
Je ne constate pas de soucis.
Il faut remonter le problème en ajoutant dans votre barre d’adresse la variable var_mode=inclure comme le suggère @RealET :
http://www.spip3test.legrandmenage.fr/?var_mode=inclure

10

Je suis dev web, j’ai vu le pb d’affichage, j’ai repéré le pb dans le code de la page et j’ai proposé mon aide pour le résoudre. Mais je découvre SPIP…

Et pour commencer, je ne trouve pas la page d’accueil dans l’arborescence du site. Est-ce normal ?

Sinon, à partir de vos réflexions, je me pose une question. Si SoyezCréateurs intègre le script Slick, peut-être que le plugin Slick entre en conflit avec…

11

La page d’accueil, c’est le squelette sommaire.html
Avec SoyezCréateurs activé, c’est dans le plugin SoyezCréateurs que se trouve ce squelette.

Je suis le développeur de SoyezCréateurs : je sais que je n’utilise pas les modèles de Slick dedans.
Et que Ça marche chez moi™

12

Coupable trouvé : c’est le plugin Adaptive Images - SPIP-Contrib qui se vautre quand il n’y a pas de src à une image, mais seulement data-lazy= à la place

13

J’ai compris que SoyezCréateurs n’utilise pas les modèles de Slick. Mais est-ce que le plug-in Slick est néanmoins nécessaire ?

···

Le 11/03/2024 à 11:54, RealET via Discuter de SPIP a écrit :

RealET
Mars 11

La page d’accueil, c’est le squelette sommaire.html
Avec SoyezCréateurs activé, c’est dans le plugin SoyezCréateurs que se trouve ce squelette.

Je suis le développeur de SoyezCréateurs : je sais que je n’utilise pas les modèles de Slick dedans.
Et que Ça marche chez moi™

Voir le sujet ou répondre à ce courriel pour répondre.

Pour vous désabonner de ces courriels, cliquez ici.

14

Il ne reste plus qu’à fermer le ticket de bug sur Slick.
Et à en ouvrir un sur Adaptive Images.

15

Oui, Slick est nécessaire à SoyezCréateurs pour que les carrousels de la page d’accueil fonctionnent.

Et il faut distinguer 2 choses dans le plugin Slick :

  1. il fournit la lib JS Slick (c’est ce qu’utilise SoyezCréateurs)
  2. il fournit aussi des modèles
16

ok. Merci. Je vais faire ça.

17

Le src de l’image est son path. Où devrait-il être indiqué ?
(j’ai reactivé Adaptative Images sur le site de test pour voir s’il y a un champs particulier mais je ne trouve pas).

18

On va la refaire : noisettes/sommaire_modeportailcognac_goodies.html · master · spip-contrib-squelettes / soyezcreateurs · GitLab

C’est la ligne 16 : <div class="img-hover-zoom"><img data-lazy="[(#GET{picto}|extraire_attribut{src})]" width="[(#GET{picto}|largeur)]" height="[(#GET{picto}|hauteur)]" alt="" /></div>

Et c’est le résultat de cette ligne qui est détruit par le plugin Adaptive Images.

19

ok. Compris. Merci. Ça sera utile pour le ticket.

(Je voudrais indiquer le pb comme résolu mais je ne peux pas éditer le premier post. Quelle est la manip svp ?)

20

C’est fait :wink:

1 « J'aime »