Keep aspect ratio in Thumbnails in XenForo Media Gallery?

[vFranky]

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]

No there's no way to do that.

 

[sross]

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]

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:

        return "<img src=\"{$writeUrl}\" style=\"width: 100%; visibility: {$visibility}\" class=\"dummyImage {$classes}\" title=\"{$title}\" alt=\"{$title}\" />";

By:

        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:

        if ($height < $max_height && $width < $max_width)
        {
            return true;
        }

Before :

        //Want to fit in the area?
        if ($method == 'fit')

Template edits

Edit the template xengallery_album_thumb_item.

Replace :

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

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

.albumContainer .thumbImage
{
    width: 100%;
    border-radius: 4px 4px 0 0;
}

By:

.albumContainer .thumbImage
{
    border-radius: 4px 4px 0 0;
    vertical-align: middle;
}

Replace:

.thumbnailContainer
{
    overflow: hidden;
    position: relative;
    width: 100%;
}

By:

.thumbnailContainer
{
    overflow: hidden;
    position: relative;
    width: 100%;
    text-align: center;
}

Wherever you want in that template add:

.thumbImageLink
{
    line-height: {$xenOptions.xengalleryThumbnailDimension.height}px;
}

Edit the template xengallery_media_thumb_item.

Replace :

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

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

.mediaContainer .thumbImage
{
    width: 100%;
    vertical-align: middle;
    border-radius: 3px 3px 0 0;
}

By:

.mediaContainer .thumbImage
{
    vertical-align: middle;
    border-radius: 3px 3px 0 0;
}

Replace:

.thumbnailContainer
{
    overflow: hidden;
    position: relative;
    width: 100%;
}

By:

.thumbnailContainer
{
    overflow: hidden;
    position: relative;
    width: 100%;
    text-align: center;
}

Wherever you want in that template add:

.thumbImageLink
{
    line-height: {$xenOptions.xengalleryThumbnailDimension.height}px;
}

And voilà !

Hope this helped

Clément

 

[XFA]

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

 

[sross]

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]

Does this method work for 2.x?

 

[XFA]

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

 

[island]

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]

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]

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]

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

Nope I didn't.

 

[island]

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

 

[island]

I spent a few hours on this tonight and found the following solution for my site now running 2.3.10.
(Thanks again to XFA for the instructions for 1.5.x -- really appreciated above)

I'll share it here in case anyone else finds it useful.
Edit
\src\addons\XFMG\Service\Media\ThumbnailGenerator.php
Line 273

		// Customization Begin: Fit instead of crop
		// to not cut off portrait or landscape photos
		// change crop thumbnail to fit
		// $image->resizeAndCrop($thumbWidth, $thumbHeight)
		//		->unsharpMask();
		$origWidth = $image->getWidth();
		$origHeight = $image->getHeight();

		if ($origWidth > $origHeight) {
			// Landscape: scale down based on max width, calculate proportional height
			$newWidth = $thumbWidth;
			$newHeight = max(1, round(($origHeight / $origWidth) * $thumbWidth));
		} else {
			// Portrait or Square: scale down based on max height, calculate proportional width
			$newHeight = $thumbHeight;
			$newWidth = max(1, round(($origWidth / $origHeight) * $thumbHeight));
		}

		// Pass the strictly positive, proportional dimensions to the driver
		$image->resizeTo($newWidth, $newHeight)
			->unsharpMask();
		// Customization End: Fit instead of crop

Add to extra.less

/* Center uncropped XFMG thumbnails cleanly */
.xfmgThumbnail {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff; /* Fills empty padding space with white */
    width: 100%;
    height: 100%;
}

.xfmgThumbnail-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.xfmgThumbnail.xfmgThumbnail--fluid {
    border-radius: 5px;
}

/* increase margin between gallery thumbnails from 3px default to 10px */
.itemList-item {
    margin: 10px !important;
}