Как получить большие изображения в моей пользовательской теме Tumblr? - PullRequest
Новая
       10

Как получить большие изображения в моей пользовательской теме Tumblr?

9 голосов
/ 12 января 2012

В Tumblr, максимальный размер изображения составляет 500px .Я хочу знать, как получить увеличенные изображения в моей пользовательской теме.

Ответы [ 2 ]

12 голосов
/ 13 января 2012

Единственная сложность заключается в том, что существует запасной вариант, так что если изображение с высоким разрешением не существует, используется стандартный размер. Примечание: эти инструкции предназначены для создания пользовательских тем с использованием языка тем Tumblr. Также стоит отметить, что это должно быть в пределах фотоблока {block:Photo} {/block:Photo}

Этот метод зависит от {block:HighRes} Тумблера. Код с {block:HighRes}{/block:HighRes} существует только при наличии версии изображения с высоким разрешением.

Сначала , скрыть нормальное изображение. 

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

Второй , отображение большого изображения с помощью пользовательского класса. 

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

Примечание: Класс необходим, поскольку вам, вероятно, потребуется установить максимальную ширину изображения. Если вы не хотите возиться с пользовательским CSS, вы можете просто использовать style="max-width:100%" в теге img.

0 голосов
/ 12 января 2012

Вы можете использовать {PhotoURL-HighRes} - он также поставляется с блоком, чтобы определить, загружена фотография высокого разрешения или нет. Документы и подробности можно найти здесь :)

Кроме того, вероятно, вы захотите провести различие между тем, когда вы загрузили фотографию в высоком разрешении, а не -. Используя такие блоки, вы можете сделать так, чтобы Tumblr отображал картинку высокого разрешения, если она доступна, а если не установлена ​​по умолчанию, на версию 500px. 

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

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

Обратите внимание, что фотографии в высоком разрешении будут отображаться в том размере, в котором они были загружены. Чтобы сохранить их поведение, полезно добавить свойство max-width в элемент изображения или контейнер в ваших стилях.

Кроме того, вам необходимо включить фотографии высокого разрешения из опций вашей темы

Надеюсь, это поможет!

...