Question

在Tumblr，the maximum image size is 500px。我想知道如何在我的自定义主题中获得更大的图像。

Answer 1

唯一的复杂性是包括后备，因此如果不存在高分辨率图像，则使用标准尺寸的图像。 注意：这些说明适用于使用Tumblr主题语言创建自定义主题。值得注意的是，这必须位于照片块中{block:Photo} {/block:Photo}

此方法取决于Tumblr的{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，通常只需在img标记中使用style="max-width:100%"。

Answer 2

您可以使用{PhotoURL-HighRes} - 它还附带一个块来检测是否有上传的Hi res照片。 Docs and details can be found here：）

此外，您可能希望区分上传高分辨率照片的时间与否。使用这样的块，你可以让tumblr显示高分辨率图像（如果可用），如果不是默认为500px版本。

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

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

请注意，高分辨率照片将以其上传的大小呈现。为了使它们保持行为，有助于在样式中为图像元素或容器添加max-width属性。

此外，您需要enable hi-res photos from your theme options

希望这有帮助！

如何在我的tumblr自定义主题中获取大图像？

2 个答案: