Piwigo.org

polowigo · 2024-11-05 19:13:12

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.

polowigo · 2024-11-06 23:04:25

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 :

Code:

  {if strpos($derivative->get_url(), 'pwg_representative') !== false}
    <button class="fa-play-circle" style="display:block"></button>    
  {/if}

Dans gthumb.css

Code:

#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...

polowigo · 2024-11-07 18:48:51

Bonsoir,

Quelques modifications pour assurer la compatibilité avec les thèmes autres que Bootstrap Darkroom.

Dans gthumb.tpl :

Code:

<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 :

Code:

#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.

ddtddt · Hier 05:27:35

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

polowigo · Hier 08:22:55

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.

ddtddt · Hier 12:21:10

Bonjour,

@polowigo

il est préférable de faire un plugin pour pouvoir continuer à faire les mises à jour ;-)

polowigo · Hier 21:11:51

Bonsoir,

J'entends bien ddtddt ;-)

Mais cela demanderait pas mal de peaufinage avant, je pense.

Piwigo.org

Annonce

#1 2024-11-05 19:13:12

Différencier les vidéos sur un mur

#2 2024-11-06 23:04:25

Re: Différencier les vidéos sur un mur

Code:

Code:

#3 2024-11-07 18:48:51

Re: Différencier les vidéos sur un mur

Code:

Code:

#4 Hier 05:27:35

Re: Différencier les vidéos sur un mur

#5 Hier 08:22:55

Re: Différencier les vidéos sur un mur

#6 Hier 12:21:10

Re: Différencier les vidéos sur un mur

#7 Hier 21:11:51

Re: Différencier les vidéos sur un mur

Pied de page des forums