当前位置：文江博客话题详情

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

发布于 2024-12-26 07:13:46 字数 143 浏览 1 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

枯叶蝶 2025-01-02 07:13:46

唯一的复杂性是包括一个后备，以便如果不存在高分辨率图像，则使用标准尺寸图像。注意：这些说明适用于使用 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%" 。

The only complexity is including a fallback so that if no high resolution image exists, the standard size one is used. Note: these instructions are for custom theme creation, using Tumblr's theming language. It's also worth noting that this must be within a photo block {block:Photo} {/block:Photo}

This method hinges on Tumblr's {block:HighRes}. Code wrapped with {block:HighRes}{/block:HighRes} only exists if a high resolution version of the image is present.

First, hide the normal image.

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

Second, display the large image with a custom class.

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

Note: The class is necessary as you will likely need to set a maximum image width. If you don't want to mess around with custom CSS you can generally just use style="max-width:100%" within the img tag.

回复收藏 0 原文

七月上 2025-01-02 07:13:46

您可以使用 {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 属性会有所帮助。

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

希望这有帮助！

You can use {PhotoURL-HighRes} - it also comes with a block to detect whether there is a Hi res photo uploaded or not. Docs and details can be found here : )

Also, it's likely that you will want to differentiate between when you have uploaded a hi-res photo and not. Using blocks like this, you can have tumblr display a hi-res picture if available, and if not default to the 500px version.

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

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

Note that high res photos will render at the size they were uploaded. In order to keep them behaving, it helps to add a max-width property to your image element or container in your styles.

Also, you need to enable hi-res photos from your theme options

Hope this helps!

回复收藏 0 原文

~没有更多了~