Làm cách nào để có được hình ảnh lớn trong chủ đề tùy chỉnh tumblr của tôi?

Question

Trong Tumblr, the maximum image size is 500px. Tôi muốn biết làm thế nào để có được hình ảnh lớn hơn trong chủ đề tùy chỉnh của tôi.

Answer 1

Độ phức tạp duy nhất bao gồm dự phòng để nếu không có hình ảnh có độ phân giải cao, kích thước chuẩn được sử dụng. Lưu ý: các hướng dẫn này dành cho việc tạo chủ đề tùy chỉnh, sử dụng ngôn ngữ theming của Tumblr. Cũng cần lưu ý rằng điều này phải nằm trong một khối ảnh {block:Photo} {/block:Photo}

Phương pháp này bản lề trên Tumblr {block:HighRes}. Mã được bọc với {block:HighRes}{/block:HighRes} chỉ tồn tại nếu có phiên bản có độ phân giải cao của hình ảnh.

Đầu tiên, ẩn hình ảnh bình thường.

<img src="{PhotoURL-500}" {block:HighRes}style="display:none"{/block:HighRes} /> 

Thứ hai, hiển thị hình ảnh lớn với lớp tùy chỉnh.

{block:HighRes} 
    <img src="{PhotoURL-HighRes}" class="highres"> 
{/block:HighRes} 

Lưu ý: Lớp là cần thiết khi bạn có thể sẽ cần phải thiết lập chiều rộng hình ảnh tối đa. Nếu bạn không muốn lộn xộn xung quanh với CSS tùy chỉnh, bạn thường có thể chỉ sử dụng style="max-width:100%" trong thẻ img.

Answer 2

Bạn có thể sử dụng {PhotoURL-HighRes} - nó cũng đi kèm với một khối để phát hiện xem có ảnh Hi res được tải lên hay không. Docs and details can be found here:)

Ngoài ra, có khả năng bạn sẽ muốn phân biệt giữa thời điểm bạn đã tải lên ảnh có độ phân giải cao hay không. Sử dụng các khối như thế này, bạn có thể có tumblr hiển thị một hình ảnh hi-res nếu có, và nếu không mặc định cho phiên bản 500px.

{block:IfContentWidth500} 
    <img src="{PhotoURL-500}" alt="{PhotoAlt}"/> 
{/block:IfContentWidth500} 

{block:IfNotContentWidth500} 
    <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/> 
{/block:IfNotContentWidth500} 

Lưu ý rằng ảnh có độ phân giải cao sẽ hiển thị ở kích thước chúng được tải lên. Để giữ chúng hoạt động, nó giúp thêm một thuộc tính max-width vào phần tử hoặc vùng chứa hình ảnh của bạn theo phong cách của bạn.

Ngoài ra, bạn cần phải enable hi-res photos from your theme options

Hy vọng điều này sẽ hữu ích!