[Résolu] Petite croix de centre_image dans le public

Dev
1

Le plugin centre_image permet de définir le focus d’une image dans le privé sur les images associées à un article. Au vu du source, le lien qui les inclue doit avoir la classe « hasbox », mais il faut aussi que la librairie soit chargée, ou peut être les librairies… alors qu’elles semblent chargées dans un pipeline du privé seulement. Et puis apparemment le source teste en plusieurs endroits si on est dans le privé… alors ça semble compliqué de l’obtenir dans le public.

Est-ce que quelqu’un a déjà installé la petite croix de centre_image dans le public ?

2

On l’utilise dans le public, il me semble que ce morceau de code suffit :

<script type="text/javascript">
	var croix = "[(#CHEMIN{img/croix_20.png})]";
</script>
<script type='text/javascript' src="[(#CHEMIN{centre_image_gestion.js})]"></script>

en spip 32 cela fonctionnait, a vérifier en spip 40

1 « J'aime »
3

Ah merci, c’est encourageant.
J’ai adapté car var croix = "[(#CHEMIN{imgs/croix-centre-image.svg})]"; car c’est là qu’est la petite croix dans le plugin dans les versions nouvelles cf spip-contrib-extensions/centre_image - centre_image - SPIP on GIT

Par contre je vois dans le source qu’il y a recours à Sortable.js qui est un script inexistant sur mon site, peut être car c’est une version intermédiaire (3.3).
Je dois donc d’abord mette à jour.

4

Pour l’image de la croix, cela nous a permis de la remplacer avec une croix plus grande. Sinon, en SPIP4, il faut aussi que l’on debug car cela ne fonctionne plus

5

Cela fonctionne sur un spip 4 qui est une maj de spip 32 pour lequel j’ai gardé jqueryui !
j’ai ajouté en plus la ligne css suivante

.croix_centre_image {position: absolute;}
6

Ça serait bien de virer la dépendance à jQuery ui en Spip 4 si possible.

Ce plugin est indispensable mais jQuery ui, bof :slight_smile:
Je tenterai un PR à l’occasion.

1 « J'aime »
7

Le site est maintenant en SPIP4, mais je n’arrive pas à faire marcher centre_image dans le public.
Dans le head il y a le style recopié du plugin et la librairie js :

#INSERT_HEAD_CSS #INSERT_HEAD
<style>.croix_centre_image {cursor: move;touch-action: none;-webkit-user-drag: none; position: absolute; margin-left: -12px; margin-top: -12px; width: 24px; height:24px; background:transparent!important; }</style>
<script type="text/javascript">var croix = "[(#CHEMIN{imgs/croix-centre-image.svg})]";</script>
<script type='text/javascript' src="[(#CHEMIN{centre_image_gestion.js})]"></script>

et dans le body de test il y a simplement 2 liens avec hasbox, l’un avec et l’autre sans timestamp :

<BOUCLE_d(DOCUMENTS){0,1}>
Sans timestamp <a href='#FICHIER' class="hasbox">[(#FICHIER|image_reduire{100})]</a><br>
Avec <a href='[(#FICHIER|timestamp)]' class="hasbox">[(#FICHIER|image_reduire{100})]</a>
</BOUCLE_d>

J’ai mis le squelette de test sur spip pastebin - outil de debug collaboratif - Bonjour les écureuils !
Le js de centre_image_gestion est bien là et exécuté mais impossible d’obtenir la petite croix de centre_image.
Il semble que var images = $(this).find("a[href*=\".jpg?\"].hasbox, a[href*=\".png?\"].hasbox, etc... ne trouve rien. Même en simplifiant la recherche, ça ne trouve rien.
Quel est le problème et comment faire ?

Au passage avec ce test je découvre qu’un lien vers un fichier image s’ouvre automatiquement dans une popin, mais pas s’il y a un timestamp sur le fichier destination (alors qu’il en faut un maintenant pour centre_image), et pas non plus s’il y a la classe hasbox sur le lien…

8

Réponse : il faut en plus que les images soient dans un blocs satisfaisant les sélecteur css suivants :

  • .portfolios
  • .formulaire_editer_logo .spip_logo
  • .documents-album
  • #documents_joints

Squelette test mis à jour : spip pastebin - outil de debug collaboratif - Bonjour les écureuils !

Youpie !