Bonsoir,
Suite à une demande récente de mes utilisateurs, j'aimerais placer une icône sur les miniatures représentatives des vidéos (celles provenant de dossiers pwg_representative).
Une discussion semble répondre à mes besoins : Différencier les vidéos des photos sur la page vignette .... Malheureusement, le lien vers la méthode n'est plus valable.
Si il existe une autre piste, je suis preneur.
Merci.
Hors ligne
Bonsoir,
Finalement ce n'était pas très compliqué, pas de jQuery à faire...
Comme j'utilise GThumb+, j'ai juste alourdi un peu son tpl et son css pour afficher un bouton "play" discret en bas à droite des miniatures des vidéos.
Au début de la classe gthumb de gthumb.tpl :
{if strpos($derivative->get_url(), 'pwg_representative') !== false} <button class="fa-play-circle" style="display:block"></button> {/if}
Dans gthumb.css
#thumbnails .gthumb > button { position: absolute; z-index: 50; bottom:-2px; top:auto; right:2px; height:28px; padding: 0; border: none; color: #ffae67; background:rgba(0,0,0,0); font-family: "Font Awesome 5 Free"; }
Et ça rend pas mal avec Bootstrap Darkroom.
Prochaine étape : le carrousel...
Hors ligne
Bonsoir,
Quelques modifications pour assurer la compatibilité avec les thèmes autres que Bootstrap Darkroom.
Dans gthumb.tpl :
<li class="gthumb"> {if strpos($derivative->get_url(), 'pwg_representative') !== false} <button class="media-video {$themeconf.name}" style="display:block"></button> {/if} ...
Dans gthumb.css :
#thumbnails .gthumb .media-video:before { content:"\25BA"; } #thumbnails .gthumb .bootstrap_darkroom:before { font-family: "Font Awesome 5 Free"; content: "\f144"; } #thumbnails .gthumb > button { position: absolute; z-index: 50; bottom:-2px; top:auto; right:2px; height:28px; padding: 0; border: none; color: #ffae67; background-color:transparent; }
Par facilité, j'ai modifié directement le plugin mais, bien entendu, ces modifications doivent être passée par LocalFiles Editor.
Hors ligne
Bonjour,
si tu met un pdf ou un mp4 tu as pas ton icône vidéo ?
as tu regardé [extension by julien1311] Media Icon
En ligne
Bonjour ddtddt,
Merci pour ta réponse. Effectivement, Media Icon est fantastique pour toutes ses possibilités de configuration.
Cependant, dans mon cas, GThumb+ la tronque lors du découpage de l'image (car j'ai choisi le mode "retailler les miniatures").
En fait, ce que je souhaite obtenir, c'est une icône assez discrète (actuellement, elle occupe moins d'un dixième de la surface de celle de Media Icon) mais visible facilement tout de même.
Par ailleurs, j'envisage de la faire apparaître aussi sur le carrousel de Bootstrap Darkroom et sur la page d'édition des photos.
Ma chance est qu'il s'agit d'une galerie familiale dans laquelle seules les vidéos téléversées seront à distinguer ; il n'y aura pas d'autres types de fichier.
Hors ligne
Bonjour,
@polowigo
il est préférable de faire un plugin pour pouvoir continuer à faire les mises à jour ;-)
En ligne