[Résolu] Intégrer une vidéo dans un porfolio

Général
#1

Bonjour
j’ai une page avec des images et une vidéo
Bientôt une communauté Emmaüs dédiée aux migrants à Tarnac (Corrèze) ? - L'aire de rien.
J’ai donc modifié ma boucle ainsi

<BOUCLE_documents_portfolio(DOCUMENTS) {objet?}{id_objet?} {mode=document}{extension IN png,jpg,gif,mp4} {par rang_lien, num titre, date}{doublons}{vu=non}>[

  • <a href="(#URL_DOCUMENT)" type="#MIME_TYPE" onclick=« location.href=’[(#URL_ARTICLE
    |url_absolue
    |parametre_url{id_document,#ID_DOCUMENT}
    |ancre_url{documents_portfolio}
    )]’;return false; »[ class="(#EXPOSER)"][ title="(#TITRE|attribut_html|couper{80})"]>[(#FICHIER
    |image_passe_partout{270,270}
    |image_recadre{300,300}
    |inserer_attribut{class,spip_logo}
    |inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]

    • ]</BOUCLE_documents_portfolio>

    En gros, j’ai juste ajouter l’extension .mp4…
    La page a réagi puisqu’un petit carré blanc est apparu à droite des images
    Mais ce carré est bien trop petit et surtout il ne prend pas en compte la vignette que j’ai définie pour cette vidéo.
    Comment faire pour qu’à la place de ce petit carré blanc, j’ai une image qui reprend ma vignette et qu’elle soit de la même taille que les autres vignettes (photos)?
    J’ai beau fouiller, tester, je n’arrive à rien.
    Donc je me permets de poster mon sujet ici.
    Je vous remercie et vous souhaite une belle journée

    Cordialement
    Christophe Noisette

    #2

    Dans /ecrire, tu as une configuration SPIP des images pour ajuster la taille des vignettes :slight_smile:

    Ou tu peux aussi poser une condition

    #SET{image_logo,#FICHIER}
[(#EXTENSION|=={mp4}|oui) 
     #SET{image_logo,#LOGO_DOCUMENT}
]

#GET{image_logo}

    où #GET{image_logo} servira ensuite de variable à la place de ton #FICHIER actuel

    1 « J'aime »
    #3

    Et aussi mets à jour ton SPIP régulièrement !

    1 « J'aime »
    #4

    Oui j’ai une vignette
    sur la page Manifestation pour la défense de la ligne POLT - L'aire de rien on voit bien la place de la vignette mais elle ne s’affiche pas.
    Par contre, mystérieusement sur l’autre page https://lairederien.net/986 je peux plus mettre de vignette (le site ne la prend pas en compte).
    Par contre j’ai pas compris où je devais #LOGO_DOCUMENT…

    #7

    C’est bon je suis donc en 4.2.9… et tout va bien. j’ai fait aussi un gros ménage dans les plugins mais j’ai pas pour autant régler mon souci de portfolio avec une vidéo…

    #8

    Si je mets #logo_document à la place de #fichier, les images deviennent toute petites et j’ai bien à la fin la vignette de ma vidéo…mais si je clique sur cette vignette, la page se recharge et me mets la vidéo sous la galerie… donc c’est invisible pour les internautes. J’aimerais qu’elle s’ouvre comme les photos, en pleine écran…
    On peut voir l’effet logo / fichier sur la page Bientôt une communauté Emmaüs dédiée aux migrants à Tarnac (Corrèze) ? - L'aire de rien mais j’ai remis ma vidéo comme avant dans la partie #TEXTE et j’ai viré la vignette car ce n’était pas fonctionnel…

    #9

    Super, tant mieux, contente pour ton super projet !

    Oups, j’ai modifié mon premier message au lieu de te répondre :slight_smile:
    Cf donc à propos du #GET{image_logo}

    #10

    ça donnerait donc

    <BOUCLE_documents_portfolio(DOCUMENTS) {objet?}{id_objet?} {mode=document}{extension IN png,jpg,gif,mp4} {par rang_lien, num titre, date}{doublons}{vu=non}>
#SET{image_logo,#FICHIER}
[(#EXTENSION|=={mp4}|oui) 
     #SET{image_logo,#LOGO_DOCUMENT}
][
<a href="(#URL_DOCUMENT)" type="#MIME_TYPE" onclick=« location.href=’[(#URL_ARTICLE
|url_absolue
|parametre_url{id_document,#ID_DOCUMENT}
|ancre_url{documents_portfolio}
)]’;return false; »[ class="(#EXPOSER)"][ title="(#TITRE|attribut_html|couper{80})"]>
[(#GET{image_logo}
|image_passe_partout{270,270}
|image_recadre{300,300}
|inserer_attribut{class,spip_logo}
|inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]

]</BOUCLE_documents_portfolio>
    1 « J'aime »
    #11

    merci. On progresse
    SI on clique sur la vignette, on a bien la vidéo qui s’ouvre en pleine page mais la vignette, en revanche, ne s’affiche pas : il y a juste un petit carré blanc.
    Et parfois un autre carré blanc (doublons) s’invite … mais bon c’est moins gênant et ce doit être une scorie.
    Voici donc les liens avec vignette et vidéo

    Merci infiniment pour cette aide…
    C.

    #12

    Bon pour le carré blanc,c’était juste #vignette qui ne fonctionnait pas mais fallait mettre #logo_document.
    Me reste juste la scorie du doublon de carré blanc…

    #13

    Si tu as uneidée pour pouvoir « sortir » facilement de la vidéo pleine page, sans avoir à faire « back », ce serait formidable.
    Et après j’écris une contrib’ ou un tuto ou un truc pour rendre compte de tes solutions
    Encore mille merci.
    C.

    #14

    Le petit carré résiduel était lié à un <//B_documents_portfolio>
    Pfou… vraiment… parfois je deviens chèvre…

    A mon avis pour parfaire la chose faudrait :

    1. une croix pour sortir facilement de la vidéo
    2. et que la vidéo puisse enchaîner directement quand elle se termine vers le portfolio ET que des flèches permettent d’aller de la vidéo aux photos.
      Je n’ai aucune idée de comment faire l’un ou l’autre.
      Si vous avez des pistes, ce serait juste magique, extra, génial…
      Bonne soirée
      C.
    #15

    J’ai corrigé le vignette par #LOGO_DOCUMENT effectivement c’est mieux, merci !

    Ça commence à avoir de la gueule, c’est chouette déjà je trouve.
    Le plugin médias par defaut dans SPIP gère le portfolio et il est configurable avec des classes CSS.
    Ton script onclick devrait disparaitre pour la clarté de ton code.

    J’ai pas le code sous la main d’un popup pour afficher la vidéo, sinon tu peux créer l’inclusion d’une URL avec le plugin Oembed oEmbed - SPIP-Contrib Pour conserver sa trace sur le site en tant que document vidéo plutôt que mettre l’URL directement dans le corps du texte, mon astuce est d’ajouter l’URL dans un document distant. La vidéo est alors incluse dans l’affichage du modèle <embXXX> et classé dans la médiathèque en tant que « séquence ».