Forum CMS Made Simple FR
[Résolu] Redimentionner images a l'upload - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [Résolu] Redimentionner images a l'upload (/thread-2143.html)


[Résolu] Redimentionner images a l'upload - Pietdeziek - 08/08/2012

Bonjour la communauté.

Je cherche un module qui permettrait de redimensionner mes images à une taille définie.

Gallery ne me convient pas entièrement.

L'image main affichée doit faire 598x512px. Mon problème est que pour que la photo uploadée occupe cet espace, je dois lui donner des dimensions bien supérieures car les images sources sont soit verticales, soit horizontales et pas toujours dans le même ration LxH.

Existe t-il un module qui fonctionnerait comme pour les thunbails ou je pourrais à l'upload redéfinir toutes les photos au format 598x512 et qui "optimiserait" la largeur et/ou la hauteur en faisant un zoom+crop à partir du centre?

Merci pour vos conseils éclairés,
Piet

[Résolu] Redimentionner images a l'upload - Jean le Chauve - 08/08/2012

CGSmartImages

[Résolu] Redimentionner images a l'upload - bess - 08/08/2012

+1 pour JeanLeChauve, c'est un module incontournable !

[Résolu] Redimentionner images a l'upload - Pietdeziek - 08/08/2012

Merci à vous,
je l'avais déjà installé, mais j'avais du mal à l'utiliser en combinaison de gallery dans mon gabarit...
Je ne comprends pas comment insérer le code CGSmartImage tout en gardant mes éléments du gabarit...

Code :
[== Indéfini ==]
<div class="gallery">
                <div id="gallery" class="content">
                    <div class="slideshow-container">
                        <div id="loading" class="loader"></div>
                        <div id="slideshow" class="slideshow">
</div>
                    </div>
                </div>
                <div id="thumbs" class="navigation">
                    <ul class="thumbs noscript">

{foreach from=$images item=image}
    <li>

   <a class="thumb" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="history"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>

    </li>
{/foreach}
                        </ul>
<a href="javascript:history.back()" class="bottom pagination" style="margin:0 0 0 15px;" title="Revenir à l'index">Revenir à l'index</a>
                </div>
                <div style="clear: both;"></div>

</div>

J'ai sans doute loupé un épisode, mais il y a t-il un tuto quelque part?

Merci à vous,
Piet

[Résolu] Redimentionner images a l'upload - Jean le Chauve - 08/08/2012

Voilà un gabarit de Gallery (slider) que j'ai modifié avec CGSmartImages :
Code :
[== Indéfini ==]
<div id="slider">{foreach from=$images item=image}
{if $image->fields.type.value == 'photo'}
{if !empty($image->fields.link.value)}      
<a href="{$image->fields.link.value}">{cms_module module="CGSmartImage" src=$image->file|rawurldecode alias='slider' alt=$image->titlename title=$image->comment}</a>{else}
{cms_module module="CGSmartImage" src=$image->file|rawurldecode alias='slider' alt=$image->titlename title=$image->comment}{/if}
{/if}{/foreach}    
</div>
Et l'alias slider : filter_croptofit="960,300" quality='100'

[Résolu] Redimentionner images a l'upload - Piet - 10/08/2012

Bonjour votre seigneurie,

J'ai bien testé le module qui est très efficace.
Mais si j'ai bien compris, il ne s'occupe que de traiter l'affichage des images dans la boucle, or mon script va chercher la source de mon image principale directement via un class.

Est-il possible de redimensionner l'image (zoom+crop) à l'upload?

Merci d'avance pour votre réponse,
COrdialement,
Piet

[Résolu] Redimentionner images a l'upload - Jean le Chauve - 10/08/2012

Dès que tu appliques la tag CGSmartImage sur l'image uploadée, cette dernière est copiée dans un autre répertoire (par défaut : /uploads/_CGSmartImage) dans la taille demandée
Quel est ton script ?

[Résolu] Redimentionner images a l'upload - Piet - 11/08/2012

Bonjour,

J'utilise le JQuery galleriffic.

Le javascript dans la page:
Code :
[== Indéfini ==]
        <script type="text/javascript" src="uploads/js/jquery.galleriffic.js"></script>
        <script type="text/javascript" src="uploads/js/jquery.opacityrollover.js"></script>
<script type="text/javascript">
            jQuery(document).ready(function($) {
                // We only want these styles applied when javascript is enabled
                $('div.navigation').css({'width' : '342px', 'float' : 'right'});
                $('div.content').css('display', 'block');

                // Initially set opacity on thumbs and add
                // additional styling for hover effect on thumbs
                var onMouseOutOpacity = 0.67;
                $('#thumbs ul.thumbs li').opacityrollover({
                    mouseOutOpacity:   onMouseOutOpacity,
                    mouseOverOpacity:  1.0,
                    fadeSpeed:         'fast',
                    exemptionSelector: '.selected'
                });
                
                // Initialize Advanced Galleriffic Gallery
                var gallery = $('#thumbs').galleriffic({
                    delay:                     2500,
                    numThumbs:                 6,
                    preloadAhead:              10,
                    enableTopPager:            false,
                    enableBottomPager:         true,
                    maxPagesToShow:            7,
                    imageContainerSel:         '#slideshow',
                    controlsContainerSel:      '#controls',
                    captionContainerSel:       '#caption',
                    loadingContainerSel:       '#loading',
                    renderSSControls:          true,
                    renderNavControls:         true,
                    playLinkText:              'Play Slideshow',
                    pauseLinkText:             'Pause Slideshow',
                    prevLinkText:              '&lsaquo; Previous Photo',
                    nextLinkText:              'Next Photo &rsaquo;',
                    nextPageLinkText:          'Next &rsaquo;',
                    prevPageLinkText:          '&lsaquo; Prev',
                    enableHistory:             false,
                    autoStart:                 true,
                    syncTransitions:           true,
                    defaultTransitionDuration: 900,
                    onSlideChange:             function(prevIndex, nextIndex) {
                        // 'this' refers to the gallery, which is an extension of $('#thumbs')
                        this.find('ul.thumbs').children()
                            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                            .eq(nextIndex).fadeTo('fast', 1.0);
                    },
                    onPageTransitionOut:       function(callback) {
                        this.fadeTo('fast', 0.0, callback);
                    },
                    onPageTransitionIn:        function() {
                        this.fadeTo('fast', 1.0);
                    }
                });
            });
        </script>

Et c'est le class="thumb" qui affiche l'image principale.

Mon CSS:

Code :
[== CSS ==]
div.content {
    /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
    display: none;
    float: left;
    width: 598px;
}
div.content a, div.navigation a {
    text-decoration: none;
    color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
    text-decoration: underline;
}
div.controls {
    margin-top: 0px;
    padding-top:60px;
    height: 23px;
    width:940px;
}
div.controls a {
    padding: 10px;
}
div.ss-controls {
    float: right;
}
div.nav-controls {
    float: right;
}
div.slideshow-container {
    position: relative;
    clear: both;
    height: 512px; /* This should be set to be at least the height of the largest image in the slideshow */
        overflow:hidden;
}
div.loader {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('loader.gif');
    background-repeat: no-repeat;
    background-position: center;
    width: 598px;
    height: 512px; /* This should be set to be at least the height of the largest image in the slideshow */
        overflow:hidden;
}
div.slideshow {

}
div.slideshow span.image-wrapper {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
div.slideshow a.advance-link {
    display: block;
    width: 598px;
    height: 512px; /* This should be set to be at least the height of the largest image in the slideshow */
    line-height: 0px; /* This should be set to be at least the height of the largest image in the slideshow */
    text-align: left;
    margin: 0 0 0 0;
    padding: 0;
        overflow:hidden;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
    text-decoration: none;
}
div.slideshow img {
    vertical-align: middle;
    border: 0px solid #ccc;
}
div.download {
    float: right;
}
div.caption-container {
    position: relative;
    clear: left;
    height: 75px;
}
span.image-caption {
    display: block;
    position: absolute;
    width: 940px;
    top: 0;
    left: 0;
}
div.caption {
    padding: 0px;
}
div.image-title {
    font-weight: bold;
    font-size: 1.4em;
}
div.image-desc {
    line-height: 1.3em;
    padding-top: 0px;
}
div.navigation {
    /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
    clear: both;
    margin: 0 0 0px 0px;
    padding: 0;
    float: right;
}
ul.thumbs li {
    float: left;
    padding: 0;
    margin: 0 0 1px 1px;
    list-style: none;
}
a.thumb {
    padding: 0px;
    display: block;
    border: 0px solid #ccc;
}
ul.thumbs li.selected a.thumb {
    background: #000;
}
a.thumb:focus {
    outline: none;
}
ul.thumbs img {
    border: none;
    display: block;
}
div.pagination {
    clear: both;
}
div.navigation div.top {
    margin-bottom: 0px;
    height: 0px;
}
div.navigation div.bottom {
    margin-top: 0px;
    margin-bottom:0px;
    float: right;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
    display: block;
    float: left;
    margin-right: 10px;
    padding: 0px 0px 0px 0px;
    border: 0px solid #ccc;
}
div.pagination a:hover {
    background-color: #eee;
    text-decoration: none;
}
div.pagination span.current {
    font-weight: bold;
    color: #fff;
}
div.pagination span.ellipsis {
    border: none;
    padding: 0px 0 0px 0px;
}
.slideshow_image{
    width: 598px;
}

Je ne sais pas si il y a moyen de 'lier' les 2...

Merci pour le temps consacré à mon interrogation...

Cordialement,
Piet

[Résolu] Redimentionner images a l'upload - Jean le Chauve - 12/08/2012

Ok, il a fallu que je crée une regex pour récupérer le nom de l'image créée par CGSmartImage, et j'ai aussi corrigé la slash de trop dans le chemin du thumbnail (créée par Gallery).
Remplace ton foreach :
Code :
[== Indéfini ==]
{foreach from=$images item=image}
<li>
<a class="thumb" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="history">
<img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
</li>
{/foreach}
par celui-ci :
Code :
{foreach from=$images item=image}
{cms_module module='CGSmartImage' alias='test' src=$image->file|rawurldecode assign='CGS'}
<li>
<a class="thumb" href="{$CGS|regex_replace:'#<img\ssrc=\"(.*)\"\swidth=\".*\"\sheight=\".*\"\salt=\".*\"/>#':'$1'}" title="{$image->titlename}" rel="history">
<img src="{$image->thumb|rawurldecode|replace:'//thumb_':'/thumb_'}" alt="{$image->titlename}" /></a>
</li>
{/foreach}
Ajoute l'alias "test" : filter_croptofit="598,512" dans l'admin de CGSmartImage
J'ai testé et il fonctionne : www.tutos-pour-cmsmadesimple.be

[Résolu] Redimentionner images a l'upload - Jean le Chauve - 13/08/2012

Attention, croptofit n'agrandit pas les images, il s'agit d'un petit bug qui sera réglé très prochainement :
http://forum.cmsmadesimple.org/viewtopic.php?f=7&t=62382

[Résolu] Redimentionner images a l'upload - Pietdeziek - 14/08/2012

Merci, ça fonctionne au poil Wink

Luke à Obi-Wan a écrit :"J'apprendrais à maitrîser la Force pour devenir un Jedi comme mon père"