Other Giữ tỷ lệ khía cạnh hình ảnh thu nhỏ trong XenForo Media Gallery

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,827
Được Like
12,687
Giữ tỷ lệ khía cạnh hình ảnh thu nhỏ trong XenForo Media Gallery

Chú ý: Thao tác này phải được lặp lại sau mỗi lần nâng cấp Media Gallery vì đây là những thay đổi thủ công.

Giải thích dưới đây có giá trị đối với XFMG 1.1.12.

Chỉnh sửa các tập tin:

Chỉnh sửa library/XenGallery/Deferred/Thumbnail.php, tại dòng 108 thay thế 'crop' bằng 'fit'.

Chỉnh sửa library/XenGallery/Model/Album.php, tại dòng 1076 thay thế 'crop' bằng 'fit'.

Chỉnh sửa library/XenGallery/Model/File.php, tại dòng 80 thay thế 'crop' bằng 'fit'.

Chỉnh sửa library/XenGallery/Model/Media.php, tại dòng 1052 & 3501 thay thế 'crop' bằng 'fit'.

Chỉnh sửa library/XenGallery/Model/Watermark.php, tại dòng 248 thay thế 'crop' bằng 'fit'.

Chỉnh sửa library/XenGallery/Thumbnail/Abstract.php, tại dòng 50 & 97 & 150 thay thế 'crop' bằng 'fit'.

Chỉnh sửa library/XenGallery/Template/Helper/Core.php tại dòng 198 thay thế 'crop' bằng 'fit'.

Trong cùng tập tin, thay thế:
Mã:
        return "<img src=\"{$writeUrl}\" style=\"width: 100%; visibility: {$visibility}\" class=\"dummyImage {$classes}\" title=\"{$title}\" alt=\"{$title}\" />";

Bằng:
Mã:
        return "<img src=\"{$writeUrl}\" style=\"visibility: {$visibility}\" class=\"dummyImage {$classes}\" title=\"{$title}\" alt=\"{$title}\" />";

Nhưng, nếu bạn không muốn hình ảnh có kích thước nhỏ hơn (cả w/h nhỏ hơn tối đa) để được thay đổi kích cỡ, thêm vào trong tập tin library/XenGallery/Helper/Image.php:
Mã:
        if ($height < $max_height && $width < $max_width)
        {
            return true;
        }

Trước:
Mã:
        //Want to fit in the area?
        if ($method == 'fit')

Chỉnh sửa Template:

Chỉnh sửa template xengallery_album_thumb_item.

Thay thế:
Mã:
           <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 />

Bằng:
Mã:
           <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 />

Chỉnh sửa template xengallery_album_thumb_item.css.

Thay thế:
Mã:
.albumContainer .thumbImage
{
   width: 100%;
   border-radius: 4px 4px 0 0;
}

Bằng:
Mã:
.albumContainer .thumbImage
{
   border-radius: 4px 4px 0 0;
   vertical-align: middle;
}

Thay thế:
Mã:
.thumbnailContainer
{
    position: relative;
    width: 100%;
    overflow: hidden;
}

Bằng:
Mã:
.thumbnailContainer
{
   overflow: hidden;
   position: relative;
   width: 100%;
   text-align: center;
}

Thêm vào bất cứ nơi nào bạn muốn trong template đoạn code sau:
Mã:
.thumbImageLink
{
   line-height: {$xenOptions.xengalleryThumbnailDimension.height}px;
}

Chỉnh sửa template xengallery_media_thumb_item.

Thay thế:
Mã:
           <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 />

Bằng:
Mã:
           <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 />

Chỉnh sửa template xengallery_media_thumb_item.css.

Thay thế:
Mã:
.mediaContainer .thumbImage
{
   width: 100%;
   vertical-align: middle;
   border-radius: 3px 3px 0 0;
}

Bằng:
Mã:
.mediaContainer .thumbImage
{
   vertical-align: middle;
   border-radius: 3px 3px 0 0;
}

Thay thế:
Mã:
.thumbnailContainer
{
   overflow: hidden;
   position: relative;
   width: 100%;
}

Bằng:
Mã:
.thumbnailContainer
{
   overflow: hidden;
   position: relative;
   width: 100%;
   text-align: center;
}

Thêm vào bất cứ nơi nào bạn muốn trong template đoạn code sau:
Mã:
.thumbImageLink
{
   line-height: {$xenOptions.xengalleryThumbnailDimension.height}px;
}

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom