Annonce

  •  » Plugins
  •  » PWG Stuffs - Rajeunir le module tags

#1 2021-01-24 17:23:05

Guillaume C
Membre
Belgium
2014-04-08
335

PWG Stuffs - Rajeunir le module tags

Bonjour

[extension by plg] PWG Stuffs est un plugin quasi indispensable. Par contre, le module "Tags" est un peu obsolète :
- le "nuage de tags" n'est pas des plus jolis sur certains thèmes (dont Bootstrap Darkroom)
- le regroupement par lettres devient vite encombrant
- le "Cumulus Tag Cloud", en flash, n'est quant à lui plus supporté !

Pour ma part, j'ai partiellement modifié le contenu du fichier stuffs_tag.tpl (/plugins/PWG_Stuffs/theme/template/stuffs_tags.tpl), ce qui me permet d'avoir un tag Cloud en HTML5 un peu plus joli. S'il y a des intéressés, en attendant un éventuel rajeunissement de PWG Stuffs, voici le code (fonctionne avec Bootstrap Darkroom mais ça peut être facilement adapté).

Code:

{if $display_mode == 'cloud'}
<div id="fullTagCloud">
  {combine_script id='jquery.awesomeCloud' load='footer' path="themes/bootstrap_darkroom/js/jquery.awesomeCloud.js"}
{footer_script require='jquery.awesomeCloud'}{strip}
    $(document).ready(function(){
        $("#tagCloudCanvas").awesomeCloud({
            "size" : {
                "grid": 12,
                "factor": 0.2,
                "normalize": true
            },
            "options": {
                "color": "gradient",
                "rotationRatio": 0.5
            },
            "color": {
                "start": $('#tagCloudGradientStart').css('color'),
                "end": $('#tagCloudGradientEnd').css('color')
            },
            "font": "josefinsans,'Helvetica Neue',Helvetica,Arial,sans-serif",
            "shape": "square"
        });
    });
{/strip}{/footer_script}
    <div id="tagCloudCanvas">
{foreach from=$tags item=tag}
        <span data-weight="{$tag.counter}"><a href="{$tag.URL}">{$tag.name}</a></span>
{/foreach}
    </div>
    <div id="tagCloudGradientStart"></div>
    <div id="tagCloudGradientEnd"></div>
</div>

{elseif $display_mode == 'letters'}
<table>
  <tr>
    <td valign="top">
  {foreach from=$letters item=letter}
<fieldset class="tagLetter">
  <legend class="tagLetterLegend">{$letter.TITLE}</legend>
  <table class="tagLetterContent">
    {foreach from=$letter.tags item=tag}
    <tr class="tagLine">
      <td><a href="{$tag.URL}">{$tag.name}</a></td>
      <td class="nbEntries">{$pwg->l10n_dec('%d element', '%d elements', $tag.counter)}</td>
    </tr>
    {/foreach}
  </table>
</fieldset>
    {if isset($letter.CHANGE_COLUMN) }
    </td>
    <td valign="top">
    {/if}
  {/foreach}
    </td>
  </tr>
</table>

{elseif $display_mode == 'cumulus'}
<div style="text-align:center;">
<object data="{$PWG_CUMULUS_SWF}/tagcloud.swf" width="{$PWG_CUMULUS_WIDTH}" height="{$PWG_CUMULUS_HEIGHT}" type="application/x-shockwave-flash">
    <param name="movie" value="{$PWG_CUMULUS_SWF}/tagcloud.swf">
    <param name="allowScriptAccess" value="sameDomain">
    <param name="quality" value="high">
    {if ($PWG_CUMULUS_MODE_TRANSPARENT)}
    <param name="wmode" value="transparent">
    {else}
    <param name="bgcolor" value="#{$PWG_CUMULUS_BGCOLOR}">
    {/if}
    <param name="flashvars" value="mode=tags&tcolor={$PWG_CUMULUS_COLOR1}&tcolor2={$PWG_CUMULUS_COLOR2}&hicolor={$PWG_CUMULUS_HICOLOR}&tspeed=100&distr=true&tagcloud=<tags>{foreach from=$tags item=tag}<a href='{$tag.URL}' style='{$tag.size}pt'>{$tag.display_name}</a>{/foreach}</tags>">
  </object>
</div>
{/if}

Ce n'est pas la solution la plus propre mais c'était la plus simple...

NB : Le CSS inclus dans le fichier correspond à mon thème, il est à adapter en fonction du vôtre.

Hors ligne

#2 2021-01-24 19:35:25

Katryne
Membre
Le Revest-les-Eaux (Provence)
2016-12-03
1633

Re: PWG Stuffs - Rajeunir le module tags

Bonsoir,

Moi, j'étais très fière de mon css pour un Bootstrap Darkroom customisé. Je l'avais juste mis dans la configuration du thème (dans le champ Custom CSS), sans rien forker, je me souviens que ça marchait pas dans LocalFileEditor.

Code:

.tagLevel1 {font-size:1rem;color:rgb(0,0,0);}
.tagLevel2 {font-size:1.4rem;color:rgb(206, 4, 13);}
.tagLevel3 {font-size:1.8rem;color:rgb(27, 146, 108);}
.tagLevel4 {font-size:2.2rem;color:rgb(63, 81, 181);}
.tagLevel5 {font-size:2.5rem;color:rgb(223, 105, 26);}
.tagLevel1,.tagLevel2,.tagLevel3,.tagLevel4,.tagLevel5 {
border: 1px solid rgb(67, 94, 149);
border-radius: .25em;
background-color: rgb(255,255,255);
padding: 0 .3rem;
font-variant:small-caps;
}

https://prnt.sc/xk67t6
http://photos.katrynou.fr/


https://album.chauvigne.info/ v.13.8.0  PHP: 8.1.22
http://photos.katrynou.fr/ v.14.1.0 PHP: 8.1.22
Système d'exploitation: Linux - Hébergeur 1&1-Ionos - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

#3 2022-01-30 11:36:32

STF4
Invité

Re: PWG Stuffs - Rajeunir le module tags

Guillaume C a écrit:

Bonjour

[extension by plg] PWG Stuffs est un plugin quasi indispensable. Par contre, le module "Tags" est un peu obsolète :
- le "nuage de tags" n'est pas des plus jolis sur certains thèmes (dont Bootstrap Darkroom)
- le regroupement par lettres devient vite encombrant
- le "Cumulus Tag Cloud", en flash, n'est quant à lui plus supporté !

Pour ma part, j'ai partiellement modifié le contenu du fichier stuffs_tag.tpl (/plugins/PWG_Stuffs/theme/template/stuffs_tags.tpl), ce qui me permet d'avoir un tag Cloud en HTML5 un peu plus joli. S'il y a des intéressés, en attendant un éventuel rajeunissement de PWG Stuffs, voici le code (fonctionne avec Bootstrap Darkroom mais ça peut être facilement adapté).

Code:

{if $display_mode == 'cloud'}
<div id="fullTagCloud">
  {combine_script id='jquery.awesomeCloud' load='footer' path="themes/bootstrap_darkroom/js/jquery.awesomeCloud.js"}
{footer_script require='jquery.awesomeCloud'}{strip}
    $(document).ready(function(){
        $("#tagCloudCanvas").awesomeCloud({
            "size" : {
                "grid": 12,
                "factor": 0.2,
                "normalize": true
            },
            "options": {
                "color": "gradient",
                "rotationRatio": 0.5
            },
            "color": {
                "start": $('#tagCloudGradientStart').css('color'),
                "end": $('#tagCloudGradientEnd').css('color')
            },
            "font": "josefinsans,'Helvetica Neue',Helvetica,Arial,sans-serif",
            "shape": "square"
        });
    });
{/strip}{/footer_script}
    <div id="tagCloudCanvas">
{foreach from=$tags item=tag}
        <span data-weight="{$tag.counter}"><a href="{$tag.URL}">{$tag.name}</a></span>
{/foreach}
    </div>
    <div id="tagCloudGradientStart"></div>
    <div id="tagCloudGradientEnd"></div>
</div>

{elseif $display_mode == 'letters'}
<table>
  <tr>
    <td valign="top">
  {foreach from=$letters item=letter}
<fieldset class="tagLetter">
  <legend class="tagLetterLegend">{$letter.TITLE}</legend>
  <table class="tagLetterContent">
    {foreach from=$letter.tags item=tag}
    <tr class="tagLine">
      <td><a href="{$tag.URL}">{$tag.name}</a></td>
      <td class="nbEntries">{$pwg->l10n_dec('%d element', '%d elements', $tag.counter)}</td>
    </tr>
    {/foreach}
  </table>
</fieldset>
    {if isset($letter.CHANGE_COLUMN) }
    </td>
    <td valign="top">
    {/if}
  {/foreach}
    </td>
  </tr>
</table>

{elseif $display_mode == 'cumulus'}
<div style="text-align:center;">
<object data="{$PWG_CUMULUS_SWF}/tagcloud.swf" width="{$PWG_CUMULUS_WIDTH}" height="{$PWG_CUMULUS_HEIGHT}" type="application/x-shockwave-flash">
    <param name="movie" value="{$PWG_CUMULUS_SWF}/tagcloud.swf">
    <param name="allowScriptAccess" value="sameDomain">
    <param name="quality" value="high">
    {if ($PWG_CUMULUS_MODE_TRANSPARENT)}
    <param name="wmode" value="transparent">
    {else}
    <param name="bgcolor" value="#{$PWG_CUMULUS_BGCOLOR}">
    {/if}
    <param name="flashvars" value="mode=tags&tcolor={$PWG_CUMULUS_COLOR1}&tcolor2={$PWG_CUMULUS_COLOR2}&hicolor={$PWG_CUMULUS_HICOLOR}&tspeed=100&distr=true&tagcloud=<tags>{foreach from=$tags item=tag}<a href='{$tag.URL}' style='{$tag.size}pt'>{$tag.display_name}</a>{/foreach}</tags>">
  </object>
</div>
{/if}

Ce n'est pas la solution la plus propre mais c'était la plus simple...

NB : Le CSS inclus dans le fichier correspond à mon thème, il est à adapter en fonction du vôtre.

#4 2022-01-30 11:41:14

STF4
Invité

Re: PWG Stuffs - Rajeunir le module tags

Bonjour,
J'ai été ravi de voir que quelqu'un avait essayé de rajeunir ce plugin.
Sauf qu'il ne fonctionne pas en l'état pour ma part
j'ai une erreur :

Erreur fatale : Uncaught --> Smarty Compiler : Erreur de syntaxe dans le template "file:/volume1/wex/xxxxx/plugins/PWG_Stuffs/theme/template/stuffs_tags.tpl" à la ligne 28 "{/pour chaque}" balise inconnue 'pourclose ' <-- jeté dans /volumex/xxx/xxxx/include/smarty/libs/sysplugins/smarty_internal_templatecompilerbase.php à la ligne 28

Aurais tu une idée sur l'origine du problème ?

Je l'ai utilisé sur avec Bootstrap Darkroom

Merci de ton retour.

Denis

#5 2022-01-30 18:04:52

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
16784

Re: PWG Stuffs - Rajeunir le module tags

STF4 a écrit:

Bonjour,
J'ai été ravi de voir que quelqu'un avait essayé de rajeunir ce plugin.
Sauf qu'il ne fonctionne pas en l'état pour ma part
j'ai une erreur :

Erreur fatale : Uncaught --> Smarty Compiler : Erreur de syntaxe dans le template "file:/volume1/wex/xxxxx/plugins/PWG_Stuffs/theme/template/stuffs_tags.tpl" à la ligne 28 "{/pour chaque}" balise inconnue 'pourclose ' <-- jeté dans /volumex/xxx/xxxx/include/smarty/libs/sysplugins/smarty_internal_templatecompilerbase.php à la ligne 28

Aurais tu une idée sur l'origine du problème ?

Je l'ai utilisé sur avec Bootstrap Darkroom

Merci de ton retour.

Denis

Bonjour
Il y a des tags sur votre galerie ?


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

  •  » Plugins
  •  » PWG Stuffs - Rajeunir le module tags

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2024 · Contact