Html 如何在我的 tumblr 自定义主题中获取大图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8837090/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get large images in my tumblr custom theme?
提问by Fred Stevens-Smith
In Tumblr, the maximum image size is 500px. I want to know how to get larger images in my custom theme.
在 Tumblr 中，最大图像大小为 500px。我想知道如何在我的自定义主题中获得更大的图像。
回答by Fred Stevens-Smith
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}
唯一的复杂性是包括回退，以便如果不存在高分辨率图像，则使用标准尺寸。注意：这些说明用于自定义主题创建，使用 Tumblr 的主题语言。还值得注意的是，这必须在照片块内{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.
这种方法取决于 Tumblr 的{block:HighRes}. {block:HighRes}{/block:HighRes}仅当存在高分辨率版本的图像时才存在包装的代码。
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.
注意：该类是必需的，因为您可能需要设置最大图像宽度。如果您不想弄乱自定义 CSS，您通常可以style="max-width:100%"在 img 标签中使用。
回答by Jeff Escalante
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: )
您可以使用 {PhotoURL-HighRes} - 它还带有一个块来检测是否有上传的高分辨率照片。文档和细节可以在这里找到：）
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.
此外，您可能希望区分何时上传高分辨率照片和未上传。使用这样的块，您可以让 tumblr 显示高分辨率图片（如果可用），如果不是默认为 500px 版本。
{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-widthproperty to your image element or container in your styles.
请注意，高分辨率照片将以其上传的大小呈现。为了保持它们的行为，max-width在样式中向图像元素或容器添加属性会有所帮助。
Also, you need to enable hi-res photos from your theme options
此外，您需要从主题选项中启用高分辨率照片
Hope this helps!
希望这可以帮助！
