Carnet Wiki

Astuces sur lity

Lity est la libraire qui gère la mediabox de SPIP à partir de SPIP 4
https://sorgalla.com/lity/

Afficher un SVG en popin

Si l’affichage direct des SVG en popin ne fonctionne pas

L’astuce est d’avoir un div caché dans lequel on affiche le SVG en ligne

Au lieu de:

<a href="#URL_DOCUMENT" type="#MIME_TYPE" class="spip_doc[ (#EXTENSION|attribut_html)]">
  <div class="logo_doc">[(#LOGO_DOCUMENT|image_reduire{30,30})]</div>
  <div class="[(#EDIT{titre})] titre_doc">[(#TITRE|sinon{[(#FICHIER|basename|couper{80})]})]</div>
</a>

Faire

<a href="#popup-svg#ID_DOCUMENT" class="spip_doc mediabox">
  <div class="logo_doc">[(#LOGO_DOCUMENT|image_reduire{30,30})]</div>
  <div class="[(#EDIT{titre})] titre_doc">[(#TITRE|sinon{[(#FICHIER|basename|couper{80})]})]</div>
</a>

<div id="popup-svg#ID_DOCUMENT" class="lity-hide">
  [(#FICHIER|balise_svg)]
</div>

Portfolio d’article: afficher dans la modale, le titre mais aussi le descriptif et crédit de l’image

Par défaut le portfolio n’affiche que le titre dans la modale de squelettes-dist.

Pour afficher tous les champs on peut passer par {aria-describedby} qui pointe vers le descriptif complet via un id.

Ce qui donne:

[(#REM) Portfolio : album d'images ]
<B_documents_portfolio>
  <div class="bloc clearfix documents_portfolio" id="documents_portfolio">
    <section class="chapo">
      <div class="intitule"><:medias:info_portfolio:></div>
        <ul>
          <BOUCLE_documents_portfolio(DOCUMENTS){id_article?}{id_rubrique?}{objet?}{id_objet?} {mode=document}{media=image}{par rang_lien, num titre, date}{doublons}{vu=non}>[
          <li>
            <a href="(#URL_DOCUMENT)" type="#MIME_TYPE" class="mediabox" onclick="return false;">[(#FICHIER
              |image_passe_partout{90,90}
              |image_reduire{110,110}
              |inserer_attribut{class,spip_logo_left}
              |inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]}
              |inserer_attribut{aria-describedby,legende#ID_DOCUMENT})]
            </a>
            <div class="portfolio-legend-popin" id="legende#ID_DOCUMENT">
              [<h6 class="portfolio-legend-titre">(#TITRE)</h6>]
              [<div class="portfolio-legend-descriptif">(#DESCRIPTIF)</div>]
              [<div class="portfolio-legend-credits">(#CREDITS)</div>]
            </div>
          </li>
          ]</BOUCLE_documents_portfolio>

        </ul>      
    </section>
  </div><!--#documents_portfolio-->
</B_documents_portfolio>

On peut cacher la légende lorsque la modale n’est pas déclenchée via la CSS

/* classe pour le legende de la popin du portfolio */
.portfolio-legend-popin {
	display:none;
}
erational - Mise à jour :8 November 2025 at 22:31