Keep aspect ratio in Thumbnails in XenForo Media Gallery?

vFranky · Jan 15, 2016

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

Chris D · Jan 15, 2016

No there's no way to do that.

sross · Feb 12, 2016

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?

XFA · Feb 20, 2016

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

XFA · Feb 20, 2016

Oh, you'll have to rebuild the thumbnail once it's done of course

sross · Sep 3, 2016

MtoR said:
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

island · Jan 6, 2020

Does this method work for 2.x?

XFA · Jan 6, 2020

No it won't, it was specifically for xF1 and file structure is obviously different.

island · Jan 25, 2020

OK, thanks. This worked really well for 1.x to provide this option for those who wanted/needed it.

@Chris D how hard would this be to adapt for 2.1x?

It sure would be a nice admin control panel option! It probably takes me 1000x longer to figure out the code and adapt it than you, so I thought I'd ask you before I attempt the upgrade. Thanks!

RobinHood · Nov 12, 2020

XFA said:
No it won't, it was specifically for xF1 and file structure is obviously different.

I don't suppose you ended up also doing something similar for XF2 per chance?

Mr.Wildman · Nov 13, 2020

Hello to all!

As I know, when loading an image, the 'engine' creates cropped square thumbnails of 300 x 300 px.
Is it possible to make it so that the width of the thumbnail remains 300 px., and the height changes in auto, in proportion to the height of the main image?
For example - 450 x 300, 700 x 300, 525 x 300 px., etc.
What needs to be corrected for this in the code (2.2.x) to achieve this?

Thanks in advance.

XFA · Nov 15, 2020

RobinHood said:
I don't suppose you ended up also doing something similar for XF2 per chance?

Nope I didn't.

island · Oct 10, 2025

This has been holding me up from upgrading to 2.x for a long time now. Has anyone done this with 2.x?

Keep aspect ratio in Thumbnails in XenForo Media Gallery?

vFranky

Active member

Chris D

XenForo developer

sross

Active member

XFA

Well-known member

XFA

Well-known member

sross

Active member

island

Active member

XFA

Well-known member

island

Active member

RobinHood

Well-known member

Mr.Wildman

Member

XFA

Well-known member

island

Active member

Similar threads

We value your privacy