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

Question

在Tumblr中，图片最大尺寸为500px。我想知道如何在我的自定义主题中获取更大的图片。

- Fred Stevens-Smith

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%"。

- Fred Stevens-Smith

Answer 2

你可以使用 {PhotoURL-HighRes} - 它还带有一个块来检测是否已上传了高分辨率照片。文档和详细信息可以在这里找到 :)

此外，你可能想区分何时上传了高分辨率照片并且没有上传。使用这样的块，你可以让Tumblr显示可用的高分辨率图片，如果没有则默认为500像素版本。

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

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

请注意，高分辨率照片将以上传时的尺寸呈现。为了使它们保持良好的表现，建议在样式中为图像元素或容器添加max-width属性。

此外，您需要从主题选项中启用高分辨率照片。

希望对您有所帮助！

- Jeff Escalante

---

谢谢，我问这个问题是为了自己回答，没意识到我还要等7个小时... :S - Fred Stevens-Smith

它说你不到半小时前添加了这个...但是不客气！ - Jeff Escalante

我本来想自己回答的 ;) - Fred Stevens-Smith

当然可以。我试图成为一个语义互联网公民，并通过在Quora上链接到这里来回答这个问题。 - Fred Stevens-Smith

块{block:IfNotContentWidth500}和{block:IfContentWidth500}对我不起作用。可能出了什么错误？ - Vladimir Starkov