1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Keep aspect ratio in Thumbnails in XenForo Media Gallery?

Discussion in 'Media Gallery Support' started by vFranky, Jan 15, 2016.

  1. vFranky

    vFranky Active Member

    Hello,

    is it possible to configure XenForo Media Gallery in a way to the keep the aspect ratio of pictures in Thumbnails? Not to cut something off, but to to fill it with white space?

    Thank you in advance!

    Kind regards,
    Frank
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    No there's no way to do that.
     
    vFranky likes this.
  3. sross

    sross Active Member

    This is kind of a must have. I have a site of fine art photographers and it really is painful for them to have their work misrepresented in the thumbnails. A switch to keep aspect ration would be great. On that note would hiring a coder to make a mod for this be feasible or is this extremely pervasive to adjust?
     
    DragonFlames likes this.
  4. MtoR

    MtoR Well-Known Member

    Hi,

    This is feasible, though it's through file editing as your image helper class already as everything that's necessary :)
    I did that for sross which is a long time customer of mine so I am posting it here in case it helps some others, and perhaps you could add that as an option in admincp @Chris D ?

    Explanations here below are valid for XFMG 1.2.2.

    File edits

    Edit library/XenGallery/Deferred/Thumbnail.php, at line 108 replace 'crop' by 'fit'.

    Edit library/XenGallery/Model/Album.php, at line 1073 replace 'crop' by 'fit'.

    Edit library/XenGallery/Model/File.php, at line 80 replace 'crop' by 'fit'.

    Edit library/XenGallery/Model/Media.php, at lines 1009 & 3415 replace 'crop' by 'fit'.

    Edit library/XenGallery/Model/Watermark.php, at line 248 replace 'crop' by 'fit'.

    Edit library/XenGallery/Thumbnail/Abstract.php, at lines 56 & 95 & 140 replace 'crop' by 'fit'.

    Edit library/XenGallery/Template/Helper/Core.php at line 198 replace 'crop' by 'fit'.
    In the same file, replace:
    PHP:
            return "<img src=\"{$writeUrl}\" style=\"width: 100%; visibility: {$visibility}\" class=\"dummyImage {$classes}\" title=\"{$title}\" alt=\"{$title}\" />";
    By:
    PHP:
            return "<img src=\"{$writeUrl}\" style=\"visibility: {$visibility}\" class=\"dummyImage {$classes}\" title=\"{$title}\" alt=\"{$title}\" />";
    Btw, if you dont' want smaller sized image (both w/h smaller than max ones) to be resized, add in file library/XenGallery/Helper/Image.php:
    PHP:
            if ($height $max_height && $width $max_width)
            {
                return 
    true;
            }
    Before :
    PHP:
            //Want to fit in the area?
            
    if ($method == 'fit')
    Template edits

    Edit the template xengallery_album_thumb_item.

    Replace :
    HTML:
                <xen:if is="{$album.mediaCache}">
                    <a href="{xen:link xengallery/albums, $album}">
                        <img src="{$album.mediaCache.placeholder}" class="thumbImage AlbumThumbs show" data-images="{xen:helper implode, $album.mediaCache.thumbnails, ','}" alt="{$album.album_title}" />
                    </a>
                <xen:else />
    
    By:
    HTML:
                <xen:if is="{$album.mediaCache}">
                    <a href="{xen:link xengallery/albums, $album}" class="thumbImageLink">
                        <img src="{$album.mediaCache.placeholder}" class="thumbImage AlbumThumbs show" data-images="{xen:helper implode, $album.mediaCache.thumbnails, ','}" alt="{$album.album_title}" />
                    </a>
                <xen:else />
    
    Edit the template xengallery_album_thumb_item.css.

    Replace :
    HTML:
    .albumContainer .thumbImage
    {
        width: 100%;
        border-radius: 4px 4px 0 0;
    }
    
    By:
    HTML:
    .albumContainer .thumbImage
    {
        border-radius: 4px 4px 0 0;
        vertical-align: middle;
    }
    
    Replace:
    HTML:
    .thumbnailContainer
    {
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    
    By:
    HTML:
    .thumbnailContainer
    {
        overflow: hidden;
        position: relative;
        width: 100%;
        text-align: center;
    }
    
    Wherever you want in that template add:
    HTML:
    .thumbImageLink
    {
        line-height: {$xenOptions.xengalleryThumbnailDimension.height}px;
    }
    
    Edit the template xengallery_media_thumb_item.

    Replace :
    HTML:
                <xen:if is="{$item.media_type} == 'image_upload'">
                    <a href="{xen:link xengallery, $item}">
                        <img src="{$item.thumbnailUrl}?{$item.last_edit_date}" class="thumbImage" alt="{$item.media_title}" />
                    </a>
                <xen:else />
    
    By :
    HTML:
                <xen:if is="{$item.media_type} == 'image_upload'">
                      <a href="{xen:link xengallery, $item}" class="thumbImageLink">
                               <img src="{$item.thumbnailUrl}?{$item.last_edit_date}" class="thumbImage" alt="{$item.media_title}" />
                           </a>
                <xen:else />
    
    Edit the template xengallery_media_thumb_item.css.

    Replace:
    HTML:
    .mediaContainer .thumbImage
    {
        width: 100%;
        vertical-align: middle;
        border-radius: 3px 3px 0 0;
    }
    
    By:
    HTML:
    .mediaContainer .thumbImage
    {
        vertical-align: middle;
        border-radius: 3px 3px 0 0;
    }
    
    Replace:
    HTML:
    .thumbnailContainer
    {
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    
    By:
    HTML:
    .thumbnailContainer
    {
        overflow: hidden;
        position: relative;
        width: 100%;
        text-align: center;
    }
    
    Wherever you want in that template add:
    HTML:
    .thumbImageLink
    {
        line-height: {$xenOptions.xengalleryThumbnailDimension.height}px;
    }
    
    And voilà !

    Hope this helped :)

    Clément
     
    Last edited: Feb 20, 2016
  5. MtoR

    MtoR Well-Known Member

    Oh, you'll have to rebuild the thumbnail once it's done of course :)
     
    vFranky likes this.
  6. sross

    sross Active Member

    Just a quick note to say I have implemented this in XFMG 1.1.9 and all is ok. A few of the line numbers in the tutorial have changed but it's easy enough to find the content :)
     

Share This Page