Problème d'affichage d'images sur site (carousel et publi)

Bonjour à toutes et tous !
Je développe actuellement un nouveau site web sous spip en adaptant les squelettes d’un autres sites pour garder globalement les mêmes fonctions et mises en pages (mais changer un peu le contenu).
Le site initial était sous spip 3.2.8 avec un plugin 'image_responsive" v 7.8.4
Le nouveau site est sous spip 4.1.5 avec un plugin 'image_responsive" v 9.7.3

Je rencontre un problème pour les logos, qui ne s’affichent plus malgré une programmation html similaire (adaptée aux nouveaux contenus bien sur)

Les balises type (#LOGO_ARTICLE|background_responsive{250/400/600}) ou [(#LOGO_ARTICLE_NORMAL|image_responsive{200/300/400}|inserer_attribut ne semblent pas répondre.

J’utilise par exemple cette balise dans un carousel :

<div data-ride="carousel" class="carousel slide hidden-xs colle" id="myCarousel"> 
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
        <li data-slide-to="1" data-target="#myCarousel" class=""></li>
        <li data-slide-to="2" data-target="#myCarousel" class=""></li>
      </ol>
      <div role="listbox" class="carousel-inner">
        <B_carouselle-un> <BOUCLE_carouselle-un(ARTICLES) {id_mot=4} {!par date} {0,1} >
          <div class="item active caroussel">  [<a href="#URL_ARTICLE"> <div (#LOGO_ARTICLE|background_responsive{800/1000/1600}) class="first-slide image"></div></a>]
            <div class="container">
              <a href="#URL_ARTICLE"> <div class="carousel-caption"> [
                <h2 class="titreArt">(#TITRE)</h2>
                ]  
                
                [
                <p>(#INTRODUCTION|couper{280})</p>
                ]
                             </div></a>
            </div>
          </div>
          </BOUCLE_carouselle-un>
        </B_carouselle-un>
        <B_carouselle-de> <BOUCLE_carouselle-de(ARTICLES) {id_mot=4} {!par date} {1,1} >
			<div class="item caroussel"> [<a href="#URL_ARTICLE"><div (#LOGO_ARTICLE|background_responsive{800/1000/1600}) class="second-slide image"></div></a>]
            <div class="container">
              <a href="#URL_ARTICLE"> <div class="carousel-caption"> [
                <h2 class="titreArt">(#TITRE)</h2>
                ]  
                
                [
                <p>(#INTRODUCTION|couper{280})</p>
                ]
               </div></a>
            </div>
          </div>
          </BOUCLE_carouselle-de>
        </B_carouselle-de>
        <B_carouselle-tr> <BOUCLE_carouselle-tr(ARTICLES) {id_mot=4} {!par date} {2,1} >
			<div class="item caroussel"> [<a href="#URL_ARTICLE"><div (#LOGO_ARTICLE|background_responsive{800/1000/1600}) class="third-slide image"></div></a>]
            <div class="container">
              <a href="#URL_ARTICLE"> <div class="carousel-caption"> [
                <h2 class="titreArt">(#TITRE)</h2>
                ]  
                
                [
                <p>(#INTRODUCTION|couper{280})</p>
                ]
                
              </div></a>
            </div>
          </div>
          </BOUCLE_carouselle-tr>
        </B_carouselle-tr>
      </div>
      <a data-slide="prev" role="button" href="#myCarousel" class="left carousel-control"> <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"><i class="fa fa-chevron-left fa-lg" aria-hidden="true"></i>
</span> <span class="sr-only">Previous</span> </a> <a data-slide="next" role="button" href="#myCarousel" class="right carousel-control"> <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"><i class="fa fa-chevron-right fa-lg" aria-hidden="true"></i></span> <span class="sr-only">Next</span> </a> 

</div>

Voici la programmation du site initial, qui, elle, fonctionne toujours : 
<div data-ride="carousel" class="carousel slide hidden-xs colle" id="myCarousel"> 
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
    <li data-slide-to="1" data-target="#myCarousel" class=""></li>
    <li data-slide-to="2" data-target="#myCarousel" class=""></li>
  </ol>
  <div role="listbox" class="carousel-inner">
    <B_carouselle-un> <BOUCLE_carouselle-un(ARTICLES) {id_mot=1} {!par date} {0,1} >
      <div class="item active caroussel">  [<a href="#URL_ARTICLE"> <div (#LOGO_ARTICLE|background_responsive{800/1000/1600}) class="first-slide image"></div></a>]
        <div class="container">
          <a href="#URL_ARTICLE"> <div class="carousel-caption"> [
            <h2 class="titreArt">(#TITRE)</h2>
            ]  
            
            [
            <p>(#INTRODUCTION|couper{280})</p>
            ]
                         </div></a>
        </div>
      </div>
      </BOUCLE_carouselle-un>
    </B_carouselle-un>
    <B_carouselle-de> <BOUCLE_carouselle-de(ARTICLES) {id_mot=1} {!par date} {1,1} >
		<div class="item caroussel"> [<a href="#URL_ARTICLE"><div (#LOGO_ARTICLE|background_responsive{800/1000/1600}) class="second-slide image"></div></a>]
        <div class="container">
          <a href="#URL_ARTICLE"> <div class="carousel-caption"> [
            <h2 class="titreArt">(#TITRE)</h2>
            ]  
            
            [
            <p>(#INTRODUCTION|couper{280})</p>
            ]
           </div></a>
        </div>
      </div>
      </BOUCLE_carouselle-de>
    </B_carouselle-de>
    <B_carouselle-tr> <BOUCLE_carouselle-tr(ARTICLES) {id_mot=1} {!par date} {2,1} >
		<div class="item caroussel"> [<a href="#URL_ARTICLE"><div (#LOGO_ARTICLE|background_responsive{800/1000/1600}) class="third-slide image"></div></a>]
        <div class="container">
          <a href="#URL_ARTICLE"> <div class="carousel-caption"> [
            <h2 class="titreArt">(#TITRE)</h2>
            ]  
            
            [
            <p>(#INTRODUCTION|couper{280})</p>
            ]
            
          </div></a>
        </div>
      </div>
      </BOUCLE_carouselle-tr>
    </B_carouselle-tr>
  </div>
  <a data-slide="prev" role="button" href="#myCarousel" class="left carousel-control"> <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"><i class="fa fa-chevron-left fa-lg" aria-hidden="true"></i>

Previous Next

```

Auriez vous une idée de l’origine du pb et des moyens de le régler ?
Je précise que je débute en terme de programmation, soyez indulgents et indulgentes svp !

Salut, as-tu testé un simple affichage d’une balise #LOGO_ARTICLE dans un squelette de test ?

Peut-être que la migration des logos lors de la mise à jour vers SPIP 4 s’est mal passée, tu peux le vérifier dans le dossier IMG à a racine, il doit normalement contenir tes logs dans un sous répertoires logo. Si certains logos n’ont pas été migrés proprement, ils sont dans IMG/logo_erreurs, en tout cas, tes logos ne devraient plus être directement à la racine de IMG.

Oui j’ai testé. Il semble que le problème d’affichage vienne du plugin « image responsive ». J’arrive à les afficher en supprimant le filtre, mais le problème c’est du coup que les images ne sont pas « responsive » et ne se réadaptent pas automatiquement… un peu rageant.
Y a t’il une autre méthode pour paramétrer les images de manière à ce qu’elles s’adaptent, en background notamment ?

Le bug est-il visible quelque part en ligne ? Sans ça, on risque d’avoir du mal à t’aider plus…

Deso erreur a envoi : educpop.ferc-cgt.org

Le lun. 7 nov. 2022 à 09:33, Sam <samuel.delor@gmail.com> a écrit :

Hello oui voici le site :
éduc pop.ferc-cgt.org

Le lun. 7 nov. 2022 à 09:29, b_b via Discuter de SPIP <noreply@discuter.spip.net> a écrit :

b_b
Novembre 7

Le bug est-il visible quelque part en ligne ? Sans ça, on risque d’avoir du mal à t’aider plus…


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

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

Le site est visible ici : educpop.ferc-cgt.org

L’ancien site avec squelettes identiques qui fonctionne (sous spip 3.2.8 et plugin 7.8.4) est ici : cgteduc69.fr

J’ai une hypothèse sur l’origine de l’erreur… Mais je ne sais pas comment la rectifier.
SPIP 4 ne positionne plus les logos dans le même dossier que SPIP 3.
Les logos étaient indistinctement positionnés dans le fichier ./IMG et ils sont avec SPIP 4 dans un sous dossier en ./IMG/logos
Du coup peut être que le programme de mon squelette ne renvoit pas à la bonne source d’image. Est-ce que vous avez une idée de comment je peux règler le problème ?

Si tu regardes dans la console des outils de dev de ton navigateur, tu verras pas mal d’erreurs dont celles qui signalent une erreur 500 sur les urls du type http://educpop.ferc-cgt.org/IMG/logo/tract_ceevf-1-resp200.jpg?1667570554.

Ça sent le problème de htaccess pas à jour…

Est-ce que tu peux être plus spécifique ? Le fichier htaccess est celui de SPIP 4.1 il y a qqchose à ajouter ?

Oui :slight_smile:

Si vous utilisez les URL « propres » dans SPIP, il faut modifier votre fichier .htaccess pour y ajouter le contenu du fichier ajouter_a_htaccess.txt livré avec le plugin.

source Plugin SPIP : « Image responsive » - 23FORWARD & image_responsive/ajouter_a_htaccess.txt at master - image_responsive - SPIP on GIT

Alors j’ai bien ajouté le contenu de ce fichier à ht access, à savoir

<IfModule xmod_sendfile.c>
XSendFile on
RewriteRule (.*)\-resp([0-9]+v?)(\-([0-9\.]+))?\.(jpg|png|gif) index.php?action=image_responsive&img=$1.$5&taille=$2&dpr=$4&xsendfile=1
</IfModule>
RewriteRule (.*)\-resp([0-9]+v?)(\-([0-9\.]+))?\.(jpg|png|gif) index.php?action=image_responsive&img=$1.$5&taille=$2&dpr=$4

Mais aucune modification du comportement du site :sob: :sob:

Les erreurs 500 apparaissent toujours…

Hello,
En testant le plugin « adaptative image » en alternative, cela affiche les images.
Mais par contre, cela me « casse » mon ‹ entête › (vous pouvez le voir sur le lien déjà donné, qui fonctionne avec le filtre adaptative) : Une idée de comment corriger ce problème ?

Hello

Avec un truc du genre

picture.adapt-img-wrapper {
  max-width: 100px;
  z-index: 100;
}

Tu le places dans le fichier css ?

Oui il faut mettre ça dans un fichier css

Je l’ai mis dans le fichier spip, mais pas de modif de comportement du site (malgré cache vidé et page rechargée). Peux être que je l’ai pas mis au bon endroit ? Je l’ai mis dans la partie header du ficher CSS spip.

hmm j’ai l’impression que tu te mélanges un peu.
Quel jeu de squelettes utilises-tu ? Un fait maison ou un plugin ?
Comment s’appelle exactement le fichier dans lequel tu as rajouté le code css? Et dans quel dossier se trouve-t-il ?

C’est possible :blush: je débute…

Le jeu de squelette est un fait maison à partir d’un squelette préexistant, dont je n’ai pas le nom.
Le fichier dans le quel j’ai rajouté le code CSS est dans le dossier squelette situé à la racine du site, et le fichier se nomme spip.css2

Ah, il faudrait enlever le « 2 » pour qu’il soit pris en compte.
Mais attention, toutes les règles css de ce fichier le seront et ça va peut-être avoir des effets de bords.
Il serait plus prudent

  • de rajouter cette ligne dans la partie head
    [<link href="(#CHEMIN{perso.css}|direction_css|timestamp)" rel="stylesheet" type="text/css" />]

  • de créer un fichier perso.css dans le dossier /squelettes

  • de mettre la règle css dans ce fichier perso.css que tu pourras compléter ensuite si besoin

Merci beaucoup, ça a fonctionné ;).
Il reste quelques ajustement à faire sur les rubriques, parce que pour une raison que j’ignore (erreur de paramètrage du filtre je pense) Certaines images sont affichées de manière assez différentes de ce qui est attendu… Notamment les images inclues dans les articles qui sont très fortement réduites…