Annonce

Écrire une réponse

Veuillez écrire votre message et l'envoyer

Cliquez dans la zone sombre de l'image pour envoyer votre message.

Retour

Résumé de la discussion (messages les plus récents en premier)

Katryne
2022-08-02 16:07:09

Hello !
La balise title sur la PAGE est essentielle pour le référencement, on est bien d'accord, mais elle est inutile et même nuisible sur l'IMAGE. Par contre, pour l'image, la balise alt est plus qu'importante, à la fois pour les robots indexeurs et pour les robots lecteurs des déficients visuels.

gbo
2022-08-02 15:47:45

Bonjour,
Les balises "title" et "alt"sont utiles pour le référencement des pages.

Une solution  pour "Cacher le titre des photos lors du survol de la souris" passe par un javascript qui :
1 -Supprime temporairement le contenu de la balise" title "de l'élément X lorsqu'il est survolé et avant que le navigateur n'affiche le titre.

2 - Remettre le titre en place lorsque l'élément X perd le focus.

C'est peu ou prou ce que je fait dans le plugin LLGBO ( mais que sur certains éléments de la "page picture")

Katryne
2022-06-03 13:17:44

Pour supprimer l'infobulle sur les vignettes d'album, c'est le même principe que pour les photos, mais dans mainpages_categories.tpl de Bootstrap Darkroom, à la fin de la ligne 23 : ne rien laissé entre les guillemets de title.
Et bien sûr en mode template extension, sinon, la prochaine maj balaie toutes les modifs.

Katryne
2022-06-03 08:57:57

En fait, selon cet article d'AlsaCréation, l'attribut Title sur les images ne sert quasi à rien, et il est même la plupart du temps plus nuisible qu'utile. Contrairement à l'attribut ALT pour les images qui sert aux robots indexeurs, aux lecteurs de pages pour déficients visuels et en remplacement de l'image quand un problème technique empêche son affichage. Et l'attribut ALT doit être signifiant, sinon, ça sert à rien.
https://www.alsacreations.com/astuce/li … liens.html

dreamer
2022-06-01 20:36:21

Salut voisine

Plus d'infobulle sur l'image et sous Opera

A+

ClémentA9300
2022-06-01 20:36:02

Katryne a écrit:

J'ai pas réussi à placer un span pour définir le css du tooltip.
J'ai cherché où se trouve défini le contenu de title, puisque c'est ça qu'affiche l'infobulle..
Dans Bootstrap Darkroom, c'est dans picture_content.tpl, dans la 2e partie de la ligne 24.

Code:

<img {if $current.selected_derivative->is_cached()}src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()}{else}src="{$ROOT_URL}themes/bootstrap_darkroom/img/transparent.png" data-src="{$current.selected_derivative->get_url()}"{/if} alt="{$ALT_IMG}" id="theMainImage" usemap="#map{$current.selected_derivative->get_type()}" title="{if isset($COMMENT_IMG)}{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}{else}{$current.TITLE_ESC} - {$ALT_IMG}{/if}">

Si je supprime la définition de title pour ne laisser que les guillemets sans rien dedans, je n'ai plus de tooltip au survol de la photo.

Ce qui donne :

Code:

<img {if $current.selected_derivative->is_cached()}src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()}{else}src="{$ROOT_URL}themes/bootstrap_darkroom/img/transparent.png" data-src="{$current.selected_derivative->get_url()}"{/if} alt="{$ALT_IMG}" id="theMainImage" usemap="#map{$current.selected_derivative->get_type()}" title="">

Certes, je n'ai plus de title sur l'image, mais il reste toujours la balise alt...
Là, j'ai forké comme un sauvage, mais il faut bien sûr passer par un template extension.

Alors, vous voyez encore un scrogneugneu, là , au survol de la souris ?
https://album.chauvigne.info/picture?/C … s_de_nancy

Merci beaucoup, ça fonctionne en faisant de la sorte !

Katryne
2022-06-01 20:12:15

C'était dans la description, je l'ai retiré, juste là.

polowigo
2022-06-01 20:03:54

Bien vu ! Plus de bulle.

Et le "scrogneugneu" sous ta photo, c'est dans la description ?

Katryne
2022-06-01 19:50:05

J'ai pas réussi à placer un span pour définir le css du tooltip.
J'ai cherché où se trouve défini le contenu de title, puisque c'est ça qu'affiche l'infobulle..
Dans Bootstrap Darkroom, c'est dans picture_content.tpl, dans la 2e partie de la ligne 24.

Code:

<img {if $current.selected_derivative->is_cached()}src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()}{else}src="{$ROOT_URL}themes/bootstrap_darkroom/img/transparent.png" data-src="{$current.selected_derivative->get_url()}"{/if} alt="{$ALT_IMG}" id="theMainImage" usemap="#map{$current.selected_derivative->get_type()}" title="{if isset($COMMENT_IMG)}{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}{else}{$current.TITLE_ESC} - {$ALT_IMG}{/if}">

Si je supprime la définition de title pour ne laisser que les guillemets sans rien dedans, je n'ai plus de tooltip au survol de la photo.

Ce qui donne :

Code:

<img {if $current.selected_derivative->is_cached()}src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()}{else}src="{$ROOT_URL}themes/bootstrap_darkroom/img/transparent.png" data-src="{$current.selected_derivative->get_url()}"{/if} alt="{$ALT_IMG}" id="theMainImage" usemap="#map{$current.selected_derivative->get_type()}" title="">

Certes, je n'ai plus de title sur l'image, mais il reste toujours la balise alt...
Là, j'ai forké comme un sauvage, mais il faut bien sûr passer par un template extension.

Alors, vous voyez encore un scrogneugneu, là , au survol de la souris ?
https://album.chauvigne.info/picture?/C … s_de_nancy

polowigo
2022-06-01 19:05:10

Il n'y a de classe tooltip que si tu la crées.
Ensuite l'élément considéré doit appartenir à cette classe.

Dans l'exemple : https://www.w3schools.com/css/tryit.asp … ss_tooltip
Le texte à survoler "Hover over me" est une div de classe tooltip, le texte de la bulle "Tooltip text " est un span de classe tooltiptext inclus dans la div. Leurs styles sont intégrés dans le html.

Cet exemple prend le cas d'une div mais j'ai déjà fait ce genre de chose sur un lien <a> contenant un span.

Sur ton image, la bulle prend comme contenu par défaut le titre "scrogneugneu". Je pense que c'est dans cette zone qu'il faudrait ajouter un span contenant le texte de la bulle.

Katryne
2022-06-01 13:36:40

mouiiiii mais ... comment s'appelle tooltip en pays Piwigo ? j'ai beau tartiner le . tooltip de tout le css que je peux, même avec du !important, (display none, background en rouge ...) ya rien qui change.
Quel est donc le nom du sélecteur ?

polowigo
2022-06-01 13:15:30

Pour le contenu variable des tooltips, je vais m'en remettre aux concepteurs du code.

En revanche, beaucoup de possibilités sont offertes quant à leur style et leur comportement, même de l'animation.
https://www.w3schools.com/css/css_tooltip.asp

Katryne
2022-06-01 08:04:03

J'ai presque réussi, enfin j'ai un début de piste : pas encore pu zigouiller l'infobulle, mais au moins, je peux choisir ce que j'y mets.

Quand je ne mets rien dans la description de la photo, l'infobulle affiche : Titre - nom du fichier.

Quand je mets une description, c'est le texte de la description qui s'affiche au survol. Là, j'ai mis "scrogneugneu", pour bien repérer d'où vient l'affichage : https://album.chauvigne.info/picture?/C … s_de_nancy

J'ai maintenant 4 scrogneugneu en mode source. Où doit-on agir ?

Les infobulles sont quasi impossibles à styler, ça dépend, je crois, du navigateur.

polowigo
2022-06-01 07:39:08

Bonjour,
Éventuellement piocher des idées par ici : https://fr.piwigo.org/forum/viewtopic.php?id=29657

Katryne
2022-06-01 06:12:17

Bonjour K5
En fait ça ne marche pas pour le survol des photos. Mais c'est OK pour le survol des vignettes en pages album. C'est peut-être normal : après tout, le plugin Thumbnail Tooltips, c'est pour les infobulles (tooltips) des vignettes (Thumbnails).
Comment fait-on pour les photos ?

(j'utilise BootStrap Darkroom sur un site et Modus sur l'autre)

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2022 · Contact