Forum CMS Made Simple FR

Version complète : Images pixellisées dans la galerie
Vous consultez actuellement la version basse qualité d’un document. Voir la version complète avec le bon formatage.
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: !1.11.6
#~ Url du site : http://cluster015.ovh.net/~hgraffit/cmsmadesimple/
#~ Hébergeur / Soft : ovh
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Bonjour à tous,
J'utilise le module Galerie avec option lightbox...
Je suis satisfait du fonctionnement mais pas de la qualité d'image....

En effet quelle-que soit la dimension de l'image (qui est impeccable de qualité sur mon PC), elle se retrouve pixelisée dans ma galerie...
Voici l'exemple dans ma gallerie :
http://cluster015.ovh.net/~hgraffit/cmsm...e=affiches

Et voici l'image telle que je la télécharge :
http://h.graffiti.free.fr/chazal.jpg

Avouez que c'est le jour et la nuit...
Et j'ai le même problème avec des images grandes ou petites...
Je trouve d'ailleurs que d'une manière générale, les images sur CMSMS sont toutes pixelisées (moches) ...?!?
De quoi cela peut-il provenir ?
J'ai l'habitude d'optimiser mes images dans Photoshop pour le web. Est-ce que CMS n'aurait pas une "moulinette" qui retravaille les images ? ce qui serait "facheux" pour le moins !!!
Merci pour vos avis éclairés...
Bonjour,
oui, les images sont redimensionnées par le module Gallery pour les faire apparaitre à la taille indiquée dans le gabarit utilisé : Regarde dans l'onglet gabarit de Gallery et clique sur celui que tu utilises.
Alors, oui, c'est fâcheux pour quelqu'un comme toi qui a à cœur de présenter ses créations sous leur plus bel angle, mais c'est très pratique pour celui qui ne sait ni retailler ni optimiser des images.
Ceci-dit, je ne suis pas entièrement d'accord avec toi, ça n'est pas le jour et la nuit.
Si les images "en général" de CMSMS que tu as pu voir son moche, c'est parce qu'il n'y a pas de graphiste pour les travailler.
Pour ton cas, je te conseille de préparer tes images à la taille maxi définie dans le gabarit de Gallery, et ainsi, elles ne seront pas redimensionnées.
Bonjour,
Merci pour cet éclaircissement...
C'est bien ce qu'il me semblait.
Je vais essayer de me conformer à cet obligation... mais bon...
Que penser alors de l'option de la galerie :
Avant upload, redimensionnez les grandes images à ces dimensions maximales :
Par défaut 800 X 600...
Si j'augmente ces dimensions, est-ce que j'obtiendrai de plus grandes possibilités ou bien vais-je au devant d'autres difficultés ?

Et en passant, si... c'est bien le jour et la nuit !
Quand on désire proposer une "galerie" d'images... c'est bien pour que celle-ci soit au top !
Mais je vais essayer la méthode préconisée et on va bien voir le résultat. Si on est cantonné à 800 X 600 en revanche, c'est peu au regard des écrans dont on dispose aujourd'hui, je trouve.
Merci en tout cas pour ces précisions.
+ grande = + lourde = site lent

Regarde du côté de CgSmartImage qui te permettrait d'optimiser le redimensionnement et la qualité de ce redimensionnement

L'idée serait de désactiver le ratio de Gallerie et de configurer CgSmartImage avec une qualité de 100% au lieu du probable 80% de Gallerie
+1 : je fonctionne comme ca personnellement.

J'ai un client qui voulait présenter des photos de la meilleur qualité possible, peu importe la taille. Donc j'ai paramétré les dimensions maximum des images à uploader comme suit : width = 9999 et height = 9999 => pour ne pas obtenir de redimentionnement.

Je le gère ensuite dans le template avec CGSmartImage. Ca me permet d'avoir des vignettes à la taille voulue et la grand image à la taille et à la qualité voulue.

That's all folks!
Bonjour et merci pour vos réponses...
Oui, je crois piger ce que vous me conseillez...

Pour Hériquet, je crois comprendre que l'on affecte à la Gallery Lightbox, les options 9999 x 9999 px et ensuite on gère comme le dit également Bess, avec le template CGSmartImage...

J'ai installé ce template ce matin... et franchement, je n'ai pas compris grand chose...
Est-ce que l'on continue ensuite à se servir de la Gallery ou bien un ce sera un mix des deux ?!?!!
Est-ce qu'il faut introduire un code de ce nouveau template dans la Galery et à quel endroit ?

Je plane......

C'est vrai que ce que propose hériquet est très tentant... mais je ne pige pas comment on fait intervenir tout ça ensemble...
Comme j'en suis au début de mes essais avec CMSMS, ça ne me gène pas trop de faire et défaire... mais j'aimerais aussi finaliser ce site et ne pas y passer tout mon temps.
Auriez-vous quelques précisions quand à la marche à suivre.
Merci
voir l'aide de CGSmartImage, il te montrera comment générer à la volée une image avec des dimensions pré-définie :

{CgSmartImage src='toto' autresparametres='600,600' notag='1'}

Ensuite, une fois que tu as maitrisé ces paramètres, dans une page test créée pour l'occasion par exemple, il te reste à inclure dans le templates de Gallery ce code, tu remplace les appel de Gallery ->thumbail par l'équivalent de CgSmartImage

Test et dis nous Smile
Non pour les dimensiont 9999/9999, c'est carrément dans les paramètres du module. Attention que les images déjà uploadées doivent l'être à nouveau car Gallery redimensionne les images à ce format maximum AVANT d'uploader, donc directement sur le poste client et ce à l'aide d'un petit composant Flash.

Donc ce qui est déjà uploadé est aux dimensions initiales : 800/600.
oui....
bon....
merci pour ces précisions...
je vais tester tout ça...
je reviendrai vous tenir informés de mes résultat !
euh ... ça peu prendre un moment... ne soyez pas trop pressés.
merci beaucoup à vous.
bonne journée
Bon courage, mais je te tracasse pas pour nous, prend ton temps, on est bien occupés aussi :-). Surtout à une semaine du CMS Day ou chacun pourra venir nous rencontrer.
Sad
Bonjour...
Je crois que je vais clôturer ce topic...

Je ne réussi pas à améliorer ma Galerie avec CGSmartImage...
Je crois que cela dépasse mes compétences car je n'ai pas trouvé l'endroit où faire intervenir ce fameux "CGSmartImage".
J'ai créé une pageTest avec une GalerieTest ... j'ai trituré les "codes des Gabarits, et du JavaScript" mais je me rend bien compte que je fais tout cela au hasard et sans aucune logique. Je tourne en rond.
A moins que l'un d'entre vous puisse me fournir des indications plus ciblées en rapport avec mes faibles connaissances en CMSMS...
Sinon, je crois que je me contenterai d'afficher mes images dans Galerie en prenant l'option d'affichage maxi (100).
Mais bon, c'est la mort dans l'âme car ce ne sera pas au top, à mon avis.
Merci
rha c'est pourtant pas compliqué je t'assure

déjà oublie Gallerie et concentre toi sur CGSmartImage comme je te l'avais suggéré plus tôt

l'aide de CGSmartImage nous donne de précieuses informations. Voici un extrait de l'aide : (entre autre hein ...)

Citation :A Simple Gallery

The code below uses the {CGSmartImage} module, fancybox, and a bit of smarty magic to generate a simple lightbox style albom from a subdirectory on your website, while processing the images for web standards, and creating thumbnails.

1: <script type="text/javascript">{literal}
2: jQuery(document).ready(function(){
3: jQuery('a.fancybox').fancybox();
4: });
5: {/literal}</script>
6: {assign var='files' value='uploads/album/*.jpg'|glob}
7: {if count(\$files)}
8: <div style="width: 100%; height: 150px; overflow: auto;">
9: {foreach from=\$files item='file'}
10: <a rel='simple_album' class="fancybox" href="{CGSmartImage src=\$file filter_rotate=90 filter_watermark=1 filter_resize='h,500' notag=1 noembed=1}">
11: {CGSmartImage src=\$file filter_rotate=90 filter_grayscale=1 filter_watermark=1 filter_resize='h,150'}
12: </a>
13: {/foreach}
14: </div>
15: {/if}

regarde ce code particulièrement :

Code :
[== Indéfini ==]
{CGSmartImage src=\$file filter_rotate=90 filter_watermark=1 filter_resize='h,500' notag=1 noembed=1}

j'en comprend quoi ? que ce code devrait me générer l'url d'une miniature de 150 de hauteur, miniature de l'image "\$file" apparemment (l'antislash est une erreur dans notre exemple)

ensuite que valent les autres paramètres : il me suffit de baisser les yeux de 30cm environ dans la doc :
* src="" - Specify the source for the image processing (if any) or the generated img tag
* (optional) filter_rotate="" - (angle,couleur) Spécifie l'angle (sens des aiguilles d'une montre) de rotation de l'image, et la couleur de remplissage pour les pixels vides. La rotation s'effectue à partir du centre de l'image.
* (optional) filter_watermark="" - (toutes valeurs) Spécifie que le filigrane (réglé dans le module CGExtensions) doit être appliqué à l'imag
* (optional) filter_resize="" - type,number[,number] - Perform a resize of the source image. Possible values are:

p,number - Perform a simple rescale to a certain percentage. i.e: resize=p,50 to resize to 50% of the original size.
w,number - Perform a resize to a specified width (while retaining aspect ratio). i.e: resize=w,80 to create a thumbnail with a maximum width of 80 pixels.
h,number - Perform a resize to a specified height (while retaining aspect ratio). i.e: resize=h,80 to create a thumbnail with a maximum height of 80 pixels.
c,x,y - Perform a resize to a custom size (without retaining aspect ratio). i.e: resize=c,50,75 to create a thumbnail that is 50x75 pixels.
* (optional) notag="" - Ne pas générer de balise "img", mais uniquement l'URL de l'image en cache. Ceci n'a aucun effet quand CGSmartImage est utilisé depuis une feuille de styles.
* (optional) noembed="" - Force l'image à ne pas être intégrée encodée dans le code source. En dépit de sa configuration dans l'admin, le module va générer un fichier image sur le serveur.

EXERCICE : donc si je souhaite faire une miniature de 150px de haut maxi de mon image uploads/img/test.jpg sans faire de rotation, sans faire de watermark, sans avoir le code <img ... /> qui va autour, sans avoir de code bas64 (noembeded) : Quel code devrais-je mettre ?

Tu tests chez toi avec une de tes images nouvellement uploadée par FTP pour l'occasion de tes tests. Tu t'assure de maitriser les paramètres :
src, filter_resize ,notag , noembed, mais également quality et rel DANS UN SECOND TEMPS SEULEMENT qui te seront certainement utile.

(optional) quality="75" - Spécifier la qualité de l'image affichée. Mettre une valeur entre 0 et 100.
(optional) rel="75" - Utilisé lors de la création d'une balise d'image, il permet de spécifier un attribut rel optionnel (utilisé typiquement dans les albums javascript). e.g: rel="album"

Allez ! on baisse pas les bras et on fait le plus dur : on lit la documentation Wink
Quel pédagogue !!! Smile

Comment pourrais-je ne pas faire un effort après cet exposé !?!!!
Bon, promis... je vais m'y atteler !

Et merci pour cette encourageante réponse...
à bientôt.
Bonjour à tous...
Voici ce à quoi je suis arrivé :
C'est ici

Je n'en suis pas peu fier, vue la mélasse dans laquelle j'étais hier... (merci à Bess qui m'a remonté le moral).
J'ai bien essayé toutes les option de CGSmartimage... J'apprécie d'ailleurs toutes les fonctions et en particulier l'aspect "responsive" pour les tablettes et autre iPhones ...
Pour l'instant, mes deux images de test ne peuvent s'enchainer de l'une à l'autre (slide ou flèche) !

Bref, j'en suis là et j'ai vu que l'on pouvait éditer des alias avec des options attachées !

Je suppose que ce sont ces mêmes alias que je dois faire "jouer" dans ma galerie !?!
Et c'est là que ça se corse un peu...
J'utilise Galerie avec son gabarit "Lightbox" qui me convient bien...
Dois-je mettre les alias (ou autre chose) dans le Gabarit général de Galerie ou dans celui de "Lightbox" ?
Mais où ça ? et/ou à la place de quoi... ?
Ou bien dans la feuille de style CSS du Gabarit (mais là, ça m'étonnerait)... ?
Ou bien encore dans le Gabarit Javascript ?

Voilà messieurs, j'ai fait des progrès depuis hier mais je ne suis pas encore au bout de mes peines...
oublie les alias pour l'instant

bon tu sais visiblement jouer avec les paramètres CGSmartimage... tu sais faire afficher une miniature et afficher l'image originale.

maintenant que tu gères ces 3 points, tu ouvres ton gabarit Gallery, tu le copie colle ici (entre les balises [ code ] stp) et tu précises (selon toi) quel portion du code du gabarit de gallery génère actuellement la miniature toute moche et la grande image toute moche.

une fois que tu es certain d'avoir repéré le code de Gallery qui affiche les images petites et grande : remplace les par le code de Cgsmarty en adaptant le paramètre src avec ce que te propose Gallery pour le path de la grande image (et uniquement la grande image, on n'utilisera pas le path de la miniature de Gallery de toute manière)
Ouh lala, c'est carrément une interro en diretct !... Wink

Bon, alors voici le code de ce que j'appelerai la "Galerie mère" (AE-Galllery).
Code :
[== Indéfini ==]
<div class="gallery">
{if !empty($module_message)}<h4>{$module_message|escape}</h4>{/if}
{if !empty($gallerytitle)}<h3>{$gallerytitle}</h3>{/if}
{if !empty($gallerycomment)}<div class="gallerycomment">{$gallerycomment}</div>{/if}
<p>{$imagecount}</p>
<div class="pagenavigation">
{if $pages > 1}
<div class="prevpage">{$prevpage}</div>
<div class="nextpage">{$nextpage}</div>
{/if}
{if !$hideparentlink && !empty($parentlink)}<div class="parentlink">{$parentlink}</div>{/if}
{if $pages > 1}<div class="pagelinks">{$pagelinks}</div>{/if}
</div>

{assign var='dirs' value=''}
{assign var='imgs' value=''}
{foreach from=$images item=image}
{if $image->isdir}
{assign var='dirs' value="$dirs
    <div class=\"img\">
        <a href=\"`$image->file`\" title=\"`$image->title`\"><img src=\"`$image->thumb`\" alt=\"`$image->titlename`\" /></a><br />
        `$image->titlename`
    </div>
"}
{else}
{capture name=images assign=imgs}
{$imgs}
        <li>
          <a href="{$image->file}">
            <img src="{$image->thumb}" title="{$image->title}" alt="{if empty($image->comment)}{$image->titlename}{else}{$image->comment}{/if}" longdesc="{* you can put a url here using a custom field. This wil generate a link in the middle of the big image *}" class="image{$image->fileid}">
          </a>
        </li>
{/capture}
{/if}
{/foreach}


{if !empty($imgs)}
<div class="ae-gallery">
  <div class="ae-image-wrapper">
  </div>
  <div class="ae-controls">
  </div>
  <div class="ae-nav">
    <div class="ae-thumbs">
      <ul class="ae-thumb-list">
{$imgs}
      </ul>
    </div>
  </div>
</div>
{/if}

{$dirs}
<div class="galleryclear">&nbsp;</div>
</div>
-----------------
Je pense que le code qui appelle la grande image est celui-ci :
Code :
[== Indéfini ==]
<div class=\"img\">
        <a href=\"`$image->file`\" title=\"`$image->title`\"><img src=\"`$image->thumb`\" alt=\"`$image->titlename`\" /></a>
-----------------
Ensuite, je pense que le code qui appelle la petite image est celui-là :
Code :
[== Indéfini ==]
<a href="{$image->file}">
            <img src="{$image->thumb}" title="{$image->title}" alt="{if empty($image->comment)}{$image->titlename}{else}{$image->comment}{/if}" longdesc="{* you can put a url here using a custom field. This wil generate a link in the middle of the big image *}" class="image{$image->fileid}">
          </a>
Je ne m'explique pas bien comment il se trouve positionné derrière celui qui appellerait la grande image... mais bon... peut-être me trompé-je ?!
-----------------
Ensuite, il y a les gabarits par "genre" qui définissent, je pense les transitions. Moi je prends toujours "Lightbox"

Voici le code de "Lightbox" :
Code :
[== Indéfini ==]
<div class="gallery">
{if !empty($gallerytitle)}<h4>{$gallerytitle}</h4>{/if}
{if !empty($gallerycomment)}<div class="gallerycomment">{$gallerycomment}</div>{/if}

<div class="pagenavigation">
{if $pages > 1}
<div class="prevpage">{$prevpage}</div>
<div class="nextpage">{$nextpage}</div>
{/if}
{if !$hideparentlink && !empty($parentlink)}<div class="parentlink">{$parentlink}</div>{/if}
{if $pages > 1}<div class="pagelinks">{$pagelinks}</div>{/if}
</div>

{foreach from=$images item=image}
    <div class="img">
    {if $image->isdir}
        {* this is a subgallery *}
        <a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a><br />
        {$image->titlename}
    {else}
        {* this is an image *}
        <a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}{if !empty($image->comment)} &bull; &lt;em&gt;{$image->comment|strip_tags|escape:'html'}&lt;em&gt;{/if}" rel="lightbox[{$galleryid}]"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
    {/if}
<div class="legende_thumb">
<span class="legende">{$image->fields.legende_vignette.value}</span>
</div>
    </div>

{/foreach}
<div class="galleryclear">&nbsp;</div>
</div>
-------------------------
Bon voilà... mais j'ai un peu les jetons de copier mes codes CGSmarty là-dedans...

Mais déjà pour cette partie... Est-ce que j'ai une bonne note M'sieur ?...
alors pour ton premier gabarit

l'url vers la grande : très exactement c'est <a href=\"`$image->file`\"
l'url de la miniature : <img src=\"`$image->thumb`\"

la miniature n'est pas "derrière" c'est simplement du code HTML <img/> et <a/> qui sera utilisé par les plugins Jquery, rien d'étonnant là dedans.

dans ton second gabarit on va retrouver EXACTEMENT la même chose : :

Citation :{* this is an image *}
<a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}{if !empty($image->comment)} &bull; &lt;em&gt;{$image->comment|strip_tags|escape:'html'}&lt;em&gt;{/if}" rel="lightbox[{$galleryid}]"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>

Alors tu vas me dire : mais non c'est pas le même code... il y a des trucs au cul du code ! et tu as raison sauf que tout ce qui est après un pipe (|) en smarty c'est du post traitement, ici ce sera des remplacements de caractères par exemple (%2F par un slash)

Tu nous as donné le code de CgSmartImage pour générer une grande image non ?

{CGSmartImage src='/upload/img/mon_image.jpg' filter_resize='h,600' notag=1 noembed=1}

et dans gallery tu as {$image->file} ou {$image->file|....}

Dans le premier cas c'est simple :

{CGSmartImage src=$image->file filter_resize='h,600' notag=1 noembed=1}

Le second est un poil plus compliqué à cause du post traitement mais Smarty est très intelligent et te propose de stocker tes résultats dans des variables pour un traitement en plusieurs étape : c'est la méthode capture

{capture "mon_image"}{$image->file|....}{/capture}
{CGSmartImage src=$mon_image filter_resize='h,600' notag=1 noembed=1}

Et voilà comment passer à l'intégration de CGSmartImage pour tes images. Reste tes miniatures...

Attention au piège : il ne faut pas réutiliser $image->thumb car on a vu la piètre qualité du rendu... tu va simplement réutiliser $image->file (ou carrément mon_image si la variable est dispo) et changer filter_resize='h,600' en filter_resize='h,150' par exemple. Tu conserveras ainsi la main sur la qualité de génération des miniature grâce aux paramètres de CGSmartImage.

N'oublie pas de modifier les paramètres de Gallery pour définir à 100% la qualité post-upload des images dans la gallerie photo depuis ton PC et éviter à CGSmartImage de travailler à partir d'image déjà toute pourrie.
des news ?
Bonjour,

Trop de commandes depuis nos derniers échanges... 5 clients pour les mêmes délais...
Je n'ai pas pu remettre le nez dans mon site !
Mais je ne laisse pas tomber et dès que je le peux, je m'y remets.
Je ne manquerai pas de vous informer de mes évolutions positives ou non...
Encore merci et désolé de ce contre-temps,
mais vous comprendrez, j'en suis sûr, que les clients sont un peu rois... quand même.
Bonne journée à tous, à bientôt.
Cordialement