html - Photoset 帖子在 Tumblr 上不显示动画 gif

标签 html tumblr mustache

好的,我知道问题出在哪里,但我需要知道最好的解决方案。

我正在使用这个主题的大幅修改版本 http://kalalalani.tumblr.com/

我的客户在转发包含动画 gif 的照片集时提出了一个问题。源代码(这部分我从来没有接触过)是这样的:

 {block:Photoset}
    <li class="photoset">
        {block:Photos}
            {block:HighRes}<p><img src="{PhotoURL-HighRes}" alt="photo"></p>{/block:HighRes}
            {block:Caption}<p>{Caption}</p>{/block:Caption}
        {/block:Photos}
        <p class="meta">
            <a href="{Permalink}">{TimeAgo}</a>
            {block:IfShowNotes}&nbsp;/&nbsp; <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:IfShowNotes}
            {block:IfDisqusComments}{block:IfDisqusShortname} &nbsp;/&nbsp; <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a>{/block:IfDisqusShortname}{/block:IfDisqusComments}
            {block:ContentSource}
                &nbsp;/&nbsp; {lang:Source}: <a href="{SourceURL}">{block:SourceLogo}<img src="{WhiteLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a></p>
            {/block:ContentSource}
        </p>
    </li>
    {/block:Photoset}

问题出在 {PhotoURL-HighRes} 动画 gif 上,这种尺寸的图像不太可能存在。

那么默认的解决方案是什么。我试过 {PhotoURL-500} 和 {PhotoURL-100} 但似乎都不起作用。

所以

1) 什么是最好的默认值。

2) 有没有办法编写回退:如果存在 Photo-HighRes,则使用 Photo-HighRes;如果 High-Res 不存在,则使用 PhotoURL-500(或任何默认值)。

TIA。 卢克

最佳答案

正如您所说,回退将是最佳解决方案。
幸运的是,tumblr 的 {PhotoURL-HighRes} 变量已经自行恢复,它会自动为您显示最高分辨率的图像。

如果您想始终显示图像,而不管其分辨率如何,只需使用 {PhotoURL-HighRes} 作为 img src

{block:HighRes}{/block:HighRes} 标签 block 是这个回退(以及您尝试其他解决方案的尝试)的障碍,根据文档,它只是如果帖子有高分辨率或全景照片则渲染。

因此,如果没有可用的高分辨率图像(就像您客户的大多数 GIF 一样),则不会显示整个图像节点。

所以您所要做的就是删除周围的 {block:HighRes}{/block:HighRes} 标签,最高分辨率的图像将始终呈现!

来自

<s>{block:HighRes}</s><p><img src="{PhotoURL-HighRes}" alt="photo"></p><del>{/block:HighRes}</del>

对此

<p><img src="{PhotoURL-HighRes}" alt="photo"></p>

==============

引用official documentation以供引用。

关于html - Photoset 帖子在 Tumblr 上不显示动画 gif,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24283684/

相关文章:

mustache - AMP : How to handle complex conditional logic in AMP?

html - 如何使用 CSS 创建三 Angular 形背景

jquery - 如何使用 css 和/或 js 实现此框布局?

jQuery slidetoggle 旋转动画

Android-Tumblr API - 适用于 Android 的 Jumblr [OAuthConnectionException]

javascript - mustache JS : fill multiple divs with different content

mustache - Handlebars - 动态元素属性

javascript - 在循环中使用 Jquery 检索 HTMl 元素的 PHP 变量值

jquery - 在同一页面上多次单击幻灯片

css - 快速 CSS 悬停问题