Piwigo.org

biache · 2021-05-31 19:17:58

Bonjour/Bonsoir,

Il y a fort fort longtemps j'avais fait des essais avec phpwebgallery puis dans mon club photo on a déployé un piwigo 2.4 avec succès (150 utilisateurs, concours internes, etc..) puis me suis endormi et là en me reveillant je suis retourné voir piwi et j'ai vraiment aimé cette nouvelle mouture.

Avant de me décider a activer l'hébergement Piwigo.com j'aimerais un retour sur le look & feel de la personnalisation que j'ai appliquée

Ici

Vos retours sont utiles sur la perception générale

- Bootstrap Darkroom variante Simplex, sans Jumbotron
- Additional pages pour gérer la page du carroussel en plein écran
- Inspiré de https://guillaumecyriaque.be/ pour mettre les liens Linkedin et Contact

Les petits points que je n'ai pas trouvé comment faire :
- garder un footer personnalisé mais avec moins d'espace au dessus de lui (exemple sur page accueil, gros espace entre image et footer)
- modifier couleurs de texte et bouton (localfiles editor ou custom css, sans résultat)
- gérer un module de commande de tirage; mais je pense que sur piwigo.com ce ne sera pas possible
- gérer du contenu adulte, pas de plugin disponible sur piwigo.com, une astuce ?
- autosize ne met pas la plus grande taille disponible (qui devrait être XL)

Merci à vous !

Version de Piwigo: version essai piwigo.com
URL Piwigo: https://biache.piwigo.com

Katryne · 2021-05-31 20:40:37

Ah ! Notre-Dame en mode Diaporama, qui jaillit de la nuit ! Magique ...

Guillaume C · 2021-06-01 20:47:09

Plus propre qu’un copier-coller de mon code source : https://guillaumecyriaque.be/index.php? … _de_piwigo

biache · 2021-06-01 21:50:57

Guillaume C a écrit:
Plus propre qu’un copier-coller de mon code source

Par contre les autres aspects de personnalisation ne sont pas possibles en hébergement piwigo.com

Et sinon un petit retour sur les choses a améliorer ou qui vont bien ?

gbo · 2021-06-02 08:06:23

Moi, je dis bravo !

Pour la présentation de la galerie et les trés belles photos qui la compose.
J'ai toujours des craintes sur délai de chargement des pages avec de grandes photos, mais avec piwigo pas de soucis.

Merci à Guillaume pour le partage.

biache · 2021-06-02 12:04:20

gbo a écrit:
Moi, je dis bravo !
Pour la présentation de la galerie et les trés belles photos qui la compose.
J'ai toujours des craintes sur délai de chargement des pages avec de grandes photos, mais avec piwigo pas de soucis.
Merci à Guillaume pour le partage.

Oui c'est fluide, franchement rien a dire.

Merci de ton retour Gbo.

Des idées sur pourquoi la perso des couleurs via localfiles editor ou via champ custom css du thème ne marche pas ?
D'après ce que j'ai compris c'est soit l'un, soit l'autre

Avez vous un exemple simple de config couleur sur les boutons et liens avec bootstrap darkroom ?

J'ai essayé avec déclaration balises CSS en .X ou en #X

Exemple:

Code:

#a {
    color: #b90309;;
    text-decoration: none;
    background-color: transparent;
}
#nav-pills {
    color: #ff0;
    background-color: #d9230f;
}
#nav-link.active {
    color: #f0f;
    background-color: #d9230f;
}
#nav-link {
    color: #b90309;;
    background-color: #fff;
}

gbo · 2021-06-02 14:33:25

Je ne connais pas les spécificités du thème bootstrap darkroom

.X cible l’élément de classe "X "alors que #X cible l’élément dont l’ID est "X"

Essaye en ajoutant !important avant le ;
exemple → #a{ color: red !important;}

biache · 2021-06-02 14:51:37

Ca marche ! si je met le !important dans le localfilleseditor et sur les classes

merci .... 1 point traité !

Katryne · 2021-06-02 18:44:22

Benoit, avec Bootstrap Dark oom, ya du css perso que j'arrive pas à passer via Local File Editor. Comme le nuage de mots clefs.
Mais j'ai réussi en mettant le code, exactement le même, dans la config du thème. Regarde, en cliquant sur Configuration de Bootstrap Darkroom, ya un champ pour entrer du css.

biache · 2021-06-03 21:30:56

Rigolo car moi c'est que par le localfiles editor que ça marche ;)

biache · 2021-06-03 23:39:37

Bon j'ai un peu arrangé le style avec changement couleurs et petits effets ainsi que l'icone d'information sur la page photo en plus grand et visible

Les petits points qui restent et dont je suis preneur d'astuces :
- garder un footer personnalisé mais avec moins d'espace au dessus de lui (exemple sur page accueil, gros espace entre image et footer) ?
- gérer du contenu adulte, pas de plugin disponible sur piwigo.com, une astuce ?
- autosize ne met pas la plus grande taille disponible (qui devrait être XL) ?
- si on active le plugin copyright alors il apparait 2 fois dans le bloc d'informations, bug ?

Et bien que pas réalisable je pense sur piwigo.com, une idée comment gérer un module de commande de tirage ?

Voici le contenu de mon css (via localfiles editor) :

Code:

#sidebar .handle{color:rgba(255,255,255,.75);background-color:#346c9d;border-top:1px solid #336D99;border-bottom:1px solid #336D99;border-left:1px solid #336D99;box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2)}
#sidebar .handle a{color:rgba(255,255,255,.75)}
#sidebar .handle a:focus,#sidebar .handle a:hover{color:#fff}
#sidebar .info h4{color:rgba(255,255,255,.75)}
#sidebar .info .imageInfo>dd>a{color:rgba(255,255,255,.75)}
#sidebar .info .imageInfo>dd>a:focus,#sidebar .info .imageInfo>dd>a:hover{color:#fff}.slick-next:before,.slick-prev:before{color:#212529}.navbar-brand a:first-child:before{font-size:1.015625rem!important}.navbar.navbar-transparent.navbar-sm{margin-top:-112px!important}
#sidebar{position:absolute;right:-250px;text-align:left;z-index:100}
#sidebar .handle{margin-top:10px;float:right;border-bottom-left-radius:8px;border-bottom-right-radius:0px;border-top-left-radius:0px}
#sidebar .handle a{display:block;padding:15px;color:#fff;font-size:1.8em}
#sidebar .handle a:hover,#sidebar .handle a:focus{color:#eee}
#sidebar .handle .fa{font-size:1.8em}
#sidebar .info{float:right;;border-bottom-left-radius:8px;border-bottom-right-radius:0px;border-top-left-radius:0px;width:250px;padding:20px}
#sidebar .info dl{margin-bottom:0}
#sidebar .info button{max-width:240px}
#sidebar .info{color:rgba(255,255,255,.75);background-color:#264f73 !important;border-top:1px solid #264f73;border-bottom:1px solid #264f73;border-left:1px solid #264f73;box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2)}
a{color:#264f73;font-weight:750;text-decoration:none;background-color:transparent}
.btn-primary{color:#fff;background-image:linear-gradient(#346c9d,#264f73 6%,#346c9d);background-repeat:no-repeat;-webkit-filter:none;filter:none;border:1px solid #336D99}
.btn-primary:disabled{color:#fff;background-color:#264f73;border-color:#264f73}
.btn-outline-primary{color:#264f73;border-color:#264f73}
.btn-outline-primary:hover{color:#fff;background-color:#264f73;border-color:#264f73}
.btn-outline-primary:disabled{color:#264f73;background-color:transparent}
.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#264f73;border-color:#264f73}
.btn-link{font-weight:750;color:#264f73;text-decoration:none}
.dropdown-item:focus,.dropdown-item:hover{color:#fff;text-decoration:none;background-color:#264f73}
.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#264f73}
.custom-control-input:checked~.custom-control-label::before{color:#fff;border-color:#264f73;background-color:#264f73}
.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before{border-color:#264f73;background-color:#264f73}
.custom-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;background-color:#264f73;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}
.custom-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#264f73;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}
.custom-range::-ms-thumb{width:1rem;height:1rem;margin-top:0;margin-right:.2rem;margin-left:.2rem;background-color:#264f73;border:0;border-radius:1rem;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;appearance:none}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-image:linear-gradient(#346c9d,#264f73 6%,#346c9d);background-repeat:no-repeat;-webkit-filter:none;filter:none;border:1px solid #336D99}
.page-link{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#264f73;background-color:#fff;border:1px solid #eee}
.page-link:hover{z-index:2;color:#fff;text-decoration:none;background-color:#264f73;border-color:#264f73}
.page-item.active .page-link{z-index:1;color:#fff;background-color:#264f73;border-color:#264f73}
.badge-primary{color:#fff;background-color:#264f73}
.progress-bar{display:flex;flex-direction:column;justify-content:center;color:#264f73;text-align:center;white-space:nowrap;background-color:#264f73;transition:width .6s ease}
.list-group-item.active{z-index:2;color:#fff;background-color:#264f73;border-color:#264f73}
.border-primary{border-color:#264f73!important}
.text-primary{color:#264f73!important}
.bg-primary{background-image:linear-gradient(#346c9d,#264f73 6%,#346c9d);background-repeat:no-repeat;-webkit-filter:none;filter:none;border:1px solid #336D99}
.btn-primary:hover{background-image:linear-gradient(#346c9d,#264f73 6%,#346c9d);background-repeat:no-repeat;-webkit-filter:none;filter:none;border:1px solid #336D99}
.a {color: #264f73 !important}
.nav-pills {color: #264f73;font-weight: 900 !important;}
.nav-pills .nav-pills .show {color: #264f73;font-weight: 750 !important;}
.card-title {color: #264f73 !important}
.copyright {color: #333 !important}
.card-title.ellipsis.recent {color: #264f73 !important}

Et celui de perso footer :

Code:

[lang=Default]
<i><small>- Les photos de ce site ne sont pas libres de droit et nécessitent une autorisation explicite pour tout usage et repartage - (c) Copyright <b>Biache Benoit</b></small></i>
<style>
  .sticky-container {
    position: fixed;
    top: 90%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0px;
    margin: 0px;
    left: -130px;
    width: 175px;
    z-index: 100000 !important;
  }
  .sticky li {
    list-style-type: none;
    background-color: #bbb;
    color: #fff;
    height: 45px;
    padding: 0px;
    margin: 0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor: pointer;
                box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2);
    opacity: 0.75;
  }
  .sticky li:hover {
    margin-left: -90px;
    -webkit-transform: translateX(90px);
    -moz-transform: translateX(90px);
    -o-transform: translateX(90px);
    -ms-transform: translateX(90px);
    transform:translateX(90px);
    opacity: 1;
  }

  .sticky li a, .sticky li a:hover, .sticky li a:active {
    text-decoration:none;
    color:#fff;
  }
  .sticky li span {
    font-size: 24px;
    float: right;
    margin: 1px 1px;
    margin-right: 2px;
    width: 43px;
    height: 43px;
    text-align:center;
    vertical-align:central;
    line-height: 45px;
  }
  .sticky li p {
    float: right;
    padding: 0px;
    margin: 0px;
    text-transform: uppercase;
    text-align: center;
    line-height: 45px;
  }
</style>
<div id="socialshare" class="sticky-container">
<ul class="sticky">
<li style="background-color:#3371b7; border-radius: 0 0 10px 0;">
<a href="https://www.linkedin.com/shareArticle?mini=true&url=$url$" target="_blank" title="Partagez sur LinkedIn"><p>LinkedIn </p></a>
</li>
<li style="background-color:#000; border-radius: 0 0 10px 0;">
<a href="/index.php?/contact" title="Contactez-moi"><span><i class="fa fa-paper-plane" aria-hidden="true"></i></i></span><p>Contact</p></a>
</li>
</ul>
</div>
<script type="text/javascript">
(function(){window.addEventListener("DOMContentLoaded",function(){
    var url=document.location;
    var links=document.getElementById("socialshare")
                      .getElementsByTagName("a");
    for (var i=0;i!=links.length;i++){
        links[i].setAttribute("href",
            links[i].href.replace("$url$",url));}})})();
</script>
[/lang]
[lang=en]
<i><small>- The photos on this site are not free of rights and require explicit authorization for any use and sharing - (c) Copyright <b>Biache Benoit</b></small></i>
<style>
  .sticky-container {
    position: fixed;
    top: 90%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0px;
    margin: 0px;
    left: -130px;
    width: 175px;
                box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2);
    z-index: 100000 !important;
  }
  .sticky li {
    list-style-type: none;
    background-color: #bbb;
    color: #fff;
    height: 45px;
    padding: 0px;
    margin: 0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor: pointer;
    opacity: 0.75;
  }
  .sticky li:hover {
    margin-left: -90px;
    -webkit-transform: translateX(90px);
    -moz-transform: translateX(90px);
    -o-transform: translateX(90px);
    -ms-transform: translateX(90px);
    transform:translateX(90px);
    opacity: 1;
  }

  .sticky li a, .sticky li a:hover, .sticky li a:active {
    text-decoration:none;
    color:#fff;
  }
  .sticky li span {
    font-size: 24px;
    float: right;
    margin: 1px 1px;
    margin-right: 2px;
    width: 43px;
    height: 43px;
    text-align:center;
    vertical-align:central;
    line-height: 45px;
  }
  .sticky li p {
    float: right;
    padding: 0px;
    margin: 0px;
    text-transform: uppercase;
    text-align: center;
    line-height: 45px;
  }
</style>
<div id="socialshare" class="sticky-container">
<ul class="sticky">
<li style="background-color:#3371b7; border-radius: 0 0 10px 0;">
<a href="https://www.linkedin.com/shareArticle?mini=true&url=$url$" target="_blank" title="Share on LinkedIn"><p>LinkedIn </p></a>
</li>
<li style="background-color:#000; border-radius: 0 0 10px 0;">
<a href="/index.php?/contact" title="Contact me"><span><i class="fa fa-paper-plane" aria-hidden="true"></i></i></span><p>Contact</p></a>
</li>
</ul>
</div>
<script type="text/javascript">
(function(){window.addEventListener("DOMContentLoaded",function(){
    var url=document.location;
    var links=document.getElementById("socialshare")
                      .getElementsByTagName("a");
    for (var i=0;i!=links.length;i++){
        links[i].setAttribute("href",
            links[i].href.replace("$url$",url));}})})();
</script>
[/lang]

Nota: Edité pour mettre le css a jour

Dernière modification par biache (2021-06-04 09:48:09)

dreamer · 2021-06-04 09:07:33

Salut

En ce qui concerne le grand écart de ton footer et ce qui ne te sert à rien, mets ceci dans ta page accueil

Code:

.content-grid, .pt-3, .copyright {display:none;}

Comme ceci, il ne restera que ton menubar en haut et ton diaporama !!

A+

biache · 2021-06-04 09:53:30

dreamer a écrit:
Salut

En ce qui concerne le grand écart de ton footer et ce qui ne te sert à rien, mets ceci dans ta page accueil
Code:
.content-grid, .pt-3, .copyright {display:none;}
Comme ceci, il ne restera que ton menubar en haut et ton diaporama !!

A+

Nickel, mis dans la section Style de chaque langue dans la page additionnelle .

Merci @Dreamer ;)

Allez ca progresse ... me reste donc ..

- gérer du contenu adulte, pas de plugin disponible sur piwigo.com, une astuce ?
- autosize ne met pas la plus grande taille disponible (qui devrait être XL) ?
- si on active le plugin copyright alors il apparait 2 fois dans le bloc d'informations, bug ?

Et bien que pas réalisable je pense sur piwigo.com, une idée comment gérer un module de commande de tirage ?

dreamer · 2021-06-04 10:12:13

re

Quand je mets des photos, je demande dans Configuration --> Options --> Tailles de photo (toutes les dimensions)
ensuite je vais toujours dans les Options --> Afficher --> Page de la photo --> Activer l'icône "Tailles de photo"
comme ceci, ton visiteur pourra voir toutes les tailles dont la taille originale qui si elles dépassent les dimensions de ton écran sera ouverte dans une autre fenêtre !!

biache · 2021-06-04 10:29:59

J'aime bien réduire les choix et donc simplifier pour l'utilisateur
Du coup je n'ai mis en taille que M et XL (en sus de Carré et Miniature fixés par défaut).
Et oui j'ai activer le choix Activer l'icône Tailles de photo

Mais je pensais que le plugin aurait, si la taille est compatible avec le viewport courant, mis XL plutôt que M
Or il ne le fait pas

Piwigo.org

Annonce

#1 2021-05-31 19:17:58

Votre avis est toujours utile !

#2 2021-05-31 20:40:37

Re: Votre avis est toujours utile !

#3 2021-06-01 20:47:09

Re: Votre avis est toujours utile !

#4 2021-06-01 21:50:57

Re: Votre avis est toujours utile !

Guillaume C a écrit:

#5 2021-06-02 08:06:23

Re: Votre avis est toujours utile !

#6 2021-06-02 12:04:20

Re: Votre avis est toujours utile !

gbo a écrit:

Code:

#7 2021-06-02 14:33:25

Re: Votre avis est toujours utile !

#8 2021-06-02 14:51:37

Re: Votre avis est toujours utile !

#9 2021-06-02 18:44:22

Re: Votre avis est toujours utile !

#10 2021-06-03 21:30:56

Re: Votre avis est toujours utile !

#11 2021-06-03 23:39:37

Re: Votre avis est toujours utile !

Code:

Code:

#12 2021-06-04 09:07:33

Re: Votre avis est toujours utile !

Code:

#13 2021-06-04 09:53:30

Re: Votre avis est toujours utile !

dreamer a écrit:

Code:

#14 2021-06-04 10:12:13

Re: Votre avis est toujours utile !

#15 2021-06-04 10:29:59

Re: Votre avis est toujours utile !

Pied de page des forums