Diminuer les grandes images

[mewtwo]

Bonjour, =)

Je cherchée a faire ce genre de chose avec les images de mon forum. Afin que ça diminue la taille des grandes images.

https://patmax.error/I7/120306231646.bmp

Merci d'avance =)

[Dr. Karlos]

Bonsoir,

Je vous invite à consulter ce tutoriel concernant le redimensionnement automatique des images.


Cordialement.

[mewtwo]

Merci

Regardez Dr.karlos ça ne s'applique pas sur les images dans les news du portail =/
http://pokemongold.forum-pro.fr/

[mewtwo]

Il dit qu,il faut tout remplacé par

Spoiler:

mais mon widget de news du portail, je l'ai personnalisé =/

[Dr. Karlos]

Re,

Postez votre template ici, nous tenterons de faire les modifications nécessaires.


Cordialement.

[mewtwo]

Code:

<!-- BEGIN post_row --><!-- BEGIN saut -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td height="2px"></td>
   </tr>
</table><!-- END saut -->
<table class="forumline mod_news" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
              <td class="tablenews" height="25">
                <a name="news_{post_row.ID}"></a><span class="titrenews">{post_row.TITLE}</span>
              </td>
   </tr>
   <tr>
      <td class="row2" height="24"><span class="gensmall"><img src="{ICON_TIME}" alt="" />{post_row.TIME} {BY} <b>{post_row.POSTER}</b></span></td>
   </tr>
   <tr>
      <td class="row1">
                 <span class="contentnews" style="line-height:150%">
                    {post_row.TEXT}<br /><br />

            <!-- BEGIN switch_attachments -->
            <dl class="attachbox">
               <dt>{post_row.switch_attachments.L_ATTACHMENTS}</dt>
               <dd>
                  <!-- BEGIN switch_post_attachments -->
                  <dl class="file">
                     <dt>
                        <img src="{post_row.switch_attachments.switch_post_attachments.U_IMG}" />

                        <!-- BEGIN switch_dl_att -->
                        <a class="postlink" href="{post_row.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{post_row.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {post_row.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                        <!-- END switch_dl_att -->

                        <!-- BEGIN switch_no_dl_att -->
                        {post_row.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {post_row.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                        <!-- END switch_no_dl_att -->
                     </dt>

                     <!-- BEGIN switch_no_comment -->
                     <dd>
                        <em>{post_row.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                     </dd>
                     <!-- END switch_no_comment -->

                     <!-- BEGIN switch_no_dl_att -->
                     <dd>
                        <em><strong>{post_row.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                     </dd>
                     <!-- END switch_no_dl_att -->

                     <dd>({post_row.switch_attachments.switch_post_attachments.FILE_SIZE}) {post_row.switch_attachments.switch_post_attachments.NB_DL}</dd>
                  </dl>
                  <!-- END switch_post_attachments -->
               </dd>
            </dl>
            <!-- END switch_attachments -->

            {post_row.OPEN}
            <a href="{post_row.U_READ_FULL}">{post_row.L_READ_FULL}</a>
            {post_row.CLOSE}
         </span>
      </td>
   </tr>
   <tr>
      <td class="row3" height="24"><span class="gensmall"><a href="{post_row.U_VIEW_COMMENTS}">{L_COMMENTS}</a>: {post_row.REPLIES}</span></td>
   </tr>
</table><!-- END post_row -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.mod_news .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

[Dr. Karlos]

Bonsoir,

Remplacez votre ancien template par celui-ci:

Code:

<!-- BEGIN post_row --><!-- BEGIN saut -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td height="2px"></td>
    </tr>
</table><!-- END saut -->
<table class="forumline mod_news" width="100%" border="0" cellspacing="1" cellpadding="0">
    <tr>
        <td class="tablenews" height="25">
          <a name="news_{post_row.ID}"></a><span class="titrenews">{post_row.TITLE}</span>
        </td>
    </tr>
    <tr>
        <td class="row2" height="24"><span class="gensmall"><img src="{ICON_TIME}" alt="" />{post_row.TIME} {BY} <b>{post_row.POSTER}</b></span></td>
    </tr>
    <tr>
        <td class="row1">
            <span class="gensmall content" style="line-height:150%">
                {post_row.TEXT}<br /><br />
                {post_row.OPEN}
                <a href="{post_row.U_READ_FULL}">{post_row.L_READ_FULL}</a>
                {post_row.CLOSE}
            </span>
        </td>
    </tr>
    <tr>
        <td class="row3" height="24"><span class="gensmall"><a href="{post_row.U_VIEW_COMMENTS}">{L_COMMENTS}</a>: {post_row.REPLIES}</span></td>
    </tr>
</table><!-- END post_row -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(function(){
    $('.mod_news .content img').not('.signature_div img').css('display','none');
});
$(window).load(function(){
    $('.mod_news .content img')
        .each(function(){
            if ( ( $(this).width() > {switch_image_resize.IMG_RESIZE_WIDTH} && {switch_image_resize.IMG_RESIZE_WIDTH} != 0 ) || ( $(this).height() > {switch_image_resize.IMG_RESIZE_HEIGHT} && {switch_image_resize.IMG_RESIZE_HEIGHT} != 0 ) ) {
                $(this)
                    .before(document.createElement('div'))
                    .prev()
                    .click(function(){
                        return false;
                    })
                    .addClass('resizebox gensmall clearfix')
                    .append(document.createElement('div'))
                    .children()
                    .addClass('resize_border clearfix')
                    .append(document.createElement('div'))
                    .children()
                    .addClass('resize_content clearfix')
                    .append(document.createElement('a'))
                    .children()
                    .addClass('enlarge')
                    .attr('href', '#')
                    .text('{switch_image_resize.L_IMAGE_ENLARGE}')
                    .focus(function(){
                        $(this).blur();
                    })
                    .click(function(){
                        $(this).parent().parent().parent().next().css('display','none').attr('resizeWidth', $(this).parent().parent().parent().next().width()).width('');
                        $(this).parent().parent().parent().next().width($(this).parent().parent().parent().next().width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('td').width() - $(this).parent().parent().parent().offset().left + $(this).closest('td').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('td').offset().left) ? $('html').attr('dir') != 'rtl' ? $(this).closest('td').width() - $(this).parent().parent().parent().offset().left + $(this).closest('td').offset().left : $(this).parent().parent().parent().width() + $(this).parent().parent().parent().offset().left - $(this).closest('td').offset().left : '').css('display','inline');
                        $(this).css('display','none').next('a.resize').css('display','inline-block');
                        $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                        return false;
                    })
                    .parent()
                    .append(document.createElement('a'))
                    .children()
                    .next()
                    .addClass('resize')
                    .attr('href','#')
                    .text('{switch_image_resize.L_CLICK_TO_RESIZE}')
                    .click(function(){
                        $(this).parent().parent().parent().next().width(parseInt($(this).parent().parent().parent().next().attr('resizeWidth'))).removeAttr('resizeWidth');
                        $(this).css('display','none').prev('a.enlarge').css('display','inline-block');
                        $(this).parent().parent().parent().width('').width($(this).parent().parent().parent().next().width());
                        return false;
                    })
                    .parent()
                    .append(document.createElement('div'))
                    .children('a.resize')
                    .next()
                    .addClass('resize_filler')
                    .text(' ')
                    .parent()
                    .append(document.createElement('a'))
                    .children('div.resize_filler')
                    .next()
                    .addClass('fullsize')
                    .attr('href','#')
                    .click(function(){
                        window.open('/viewimage.forum?u=' + encodeURIComponent($(this).parent().parent().parent().next().attr('src')));
                        return false;
                    })
                    .attr('target', '_blank')
                    .text('{switch_image_resize.L_CLICK_TO_SEE_FULLSIZE}');
                if ($(this).width() > ($('html').attr('dir') != 'rtl' ? $(this).closest('td').width() - $(this).prev().offset().left + $(this).closest('td').offset().left : $(this).prev().width() + $(this).prev().offset().left - $(this).closest('td').offset().left)){
                    $(this).prev().find('a.fullsize').attr('href','/viewimage.forum?u=' + encodeURIComponent($(this).attr('src'))).css('display', 'inline-block');
                }
                $(this).width($(this).width() * ( ( {switch_image_resize.IMG_RESIZE_WIDTH} != 0 && ( {switch_image_resize.IMG_RESIZE_HEIGHT} == 0 || $(this).width() / $(this).height() > {switch_image_resize.IMG_RESIZE_WIDTH} / {switch_image_resize.IMG_RESIZE_HEIGHT} ) )
                        ? {switch_image_resize.IMG_RESIZE_WIDTH} / $(this).width()
                        : {switch_image_resize.IMG_RESIZE_HEIGHT} / $(this).height() ) )
                    .css('display','inline')
                    .prev().width($(this).width());
            }
        })
        .css('display','inline');
});
//]]>
</script>
<!-- END switch_image_resize -->

Par contre, vous ne pourrez plus utiliser la classe contentnews pour la police des news puisqu'elle cause problème avec le redimensionnement. Changez donc dans votre CSS .contentnews par td.row1 span.gensmall.content.


Cordialement.

[mewtwo]

Merci
Vous dites que si je change .contentnews par td.row1 span.gensmall.content je pourrais gerer le contenu des news mais ca ne fait rien =/


A propos le problème était deja présent avant.

on va dire que je change pas mon template donc mon template est celui ci

Code:

        <!-- BEGIN post_row --><!-- BEGIN saut -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
              <td height="2px"></td>
          </tr>
        </table><!-- END saut -->
        <table class="forumline mod_news" width="100%" border="0" cellspacing="1" cellpadding="0">
          <tr>
                      <td class="tablenews" height="25">
                        <a name="news_{post_row.ID}"></a><span class="titrenews">{post_row.TITLE}</span>
                      </td>
          </tr>
          <tr>
              <td class="row2" height="24"><span class="gensmall"><img src="{ICON_TIME}" alt="" />{post_row.TIME} {BY} <b>{post_row.POSTER}</b></span></td>
          </tr>
          <tr>
              <td class="row1">
                        <span class="contentnews" style="line-height:150%">
                            {post_row.TEXT}<br /><br />
       
                    <!-- BEGIN switch_attachments -->
                    <dl class="attachbox">
                      <dt>{post_row.switch_attachments.L_ATTACHMENTS}</dt>
                      <dd>
                          <!-- BEGIN switch_post_attachments -->
                          <dl class="file">
                            <dt>
                                <img src="{post_row.switch_attachments.switch_post_attachments.U_IMG}" />
       
                                <!-- BEGIN switch_dl_att -->
                                <a class="postlink" href="{post_row.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{post_row.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {post_row.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_dl_att -->
       
                                <!-- BEGIN switch_no_dl_att -->
                                {post_row.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {post_row.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_no_dl_att -->
                            </dt>
       
                            <!-- BEGIN switch_no_comment -->
                            <dd>
                                <em>{post_row.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                            </dd>
                            <!-- END switch_no_comment -->
       
                            <!-- BEGIN switch_no_dl_att -->
                            <dd>
                                <em><strong>{post_row.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                            </dd>
                            <!-- END switch_no_dl_att -->
       
                            <dd>({post_row.switch_attachments.switch_post_attachments.FILE_SIZE}) {post_row.switch_attachments.switch_post_attachments.NB_DL}</dd>
                          </dl>
                          <!-- END switch_post_attachments -->
                      </dd>
                    </dl>
                    <!-- END switch_attachments -->
       
                    {post_row.OPEN}
                    <a href="{post_row.U_READ_FULL}">{post_row.L_READ_FULL}</a>
                    {post_row.CLOSE}
                </span>
              </td>
          </tr>
          <tr>
              <td class="row3" height="24"><span class="gensmall"><a href="{post_row.U_VIEW_COMMENTS}">{L_COMMENTS}</a>: {post_row.REPLIES}</span></td>
          </tr>
        </table><!-- END post_row -->
       
        <!-- BEGIN switch_image_resize -->
        <script type="text/javascript">
        //<![CDATA[
        $(resize_images({ 'selector' : '.mod_news .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
        //]]>
        </script>
        <!-- END switch_image_resize -->

et mon css celui ci

Code:


        .titrenews { /* titre des news */
        font-size: 22px;
        color: #9F91C2;
        font-weight: bold;
}
        .tablenews{ /* barre des titres de sujet */
        text-align: center;
        }
        .contentnews { /* contenu des news */
        color: #couleur;
        font-size: 5 px
        }
.forumline.mod_news .row1 {
background-image: url('http://hitskin.com/themes/18/11/49/i_background.jpg');
}

        table.forumline.mod_news {
        border:2px solid black;
        -moz-border-radius:5px;
        box-shadow:0 0 5px black;
        -moz-box-shadow:0 0 5px black;
        -webkit-box-shadow:0 0 5px black;
        border-image:initial;
        background-color:#FFF;
        padding:5px;}

voici mon forum http://www.pokemon-forever.com/
Avec ceci
.contentnews { /* contenu des news */
color: #couleur;
font-size: 5 px
}

je n'arrive pas a redimensionner l’écriture du contenue. Elle reste toujours grande =/

[Dr. Karlos]

Re,

Vous avez des espaces entre l'attribut, la valeur et le point-virgule. Si vous ne faisiez pas de modifications, vous devriez remplacez ce code:

Code:

.contentnews { /* contenu des news */
color: #couleur;
font-size: 5 px
}

Par celui-ci:

Code:

.contentnews { /* contenu des news */
color: #couleur;
font-size:5px
}

Les espaces empêchent au code de bien fonctionner. 5px est par contre trop petit pour lire, la valeur normale de lecture étant de 10px.

Si vous utilisez le template modifié que je vous ai donné dans mon précédant message, utilisez ce CSS:

Code:

 
        .titrenews { /* titre des news */
        font-size: 22px;
        color: #9F91C2;
        font-weight: bold;
}
        .tablenews{ /* barre des titres de sujet */
        text-align: center;
        }
        td.row1 span.gensmall.content { /* contenu des news */
        color: #couleur;
        font-size:5px
        }
.forumline.mod_news .row1 {
background-image: url('http://hitskin.com/themes/18/11/49/i_background.jpg');
}
 
        table.forumline.mod_news {
        border:2px solid black;
        -moz-border-radius:5px;
        box-shadow:0 0 5px black;
        -moz-box-shadow:0 0 5px black;
        -webkit-box-shadow:0 0 5px black;
        border-image:initial;
        background-color:#FFF;
        padding:5px;}

Le code responsable de l'affichage de l'écriture est donc celui-ci:

Code:

  td.row1 span.gensmall.content { /* contenu des news */
        color: #couleur;
        font-size:5px
        }

Cordialement.

[mewtwo]

Encore merci c’est parfaitb