• 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?

vFranky

Active member
#1
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
 

sross

Active member
#3
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?
 

MtoR

Well-known member
#4
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:

sross

Active member
#6
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
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 :)