Question

我正在为想要使用Tumblr的Photoset功能创建投资组合网站的婚礼摄影师设计一个主题。

如何从照片集中提取第一张图片，以便创建一个主页，其中包含一个链接到每个集合的缩略图预览（根据我的选择大小）？

谢谢，帕里

Answer 1

Tumblr标记：

{block:Photoset}
    <div class="photoset-wrap">
    {block:Photos}
        <img src="{PhotoURL-500}" />
    {/block:Photos}
    </div>
{/block:Photoset}

注意：可能需要{PhotoURL-75sq}来输出方形预览而不是500px图像;

<强> CSS：

.photoset-wrap img { display: none; }
.photoset-wrap img:first-child { display: block; }

Answer 2

以上示例存在缺陷，因为用户必须下载所有图像，即使只显示第一个图像，所以我使用jquery仅注入第一个图像。

HTML（简化）：

{block:Photoset}
    <div class="photoset">
        {block:Photos}
            <div class="photoPlaceholder" imgsrc="{PhotoURL-500}"></div>
        {/block:Photos}
    </div>
{block:Photoset}

javascript（简体）：

$(document).ready(function() {
    $(".photoset .photoPlaceholder").first().each(function (i) {
        var src = $(this).attr("imgsrc");
        $(this).html('<a href="#"><img src="'+ src +'" /></a>');
    });
});

这确保只加载第一个图像...你可以在noscript标签中使用上面的其他css示例，因为它们已经关闭了javascript。

希望有所帮助

Answer 3

似乎没有办法限制它们，但你可以注释掉它们。此解决方案的优势在于隐藏的图像根本无法加载和它不需要任何javascript

{block:Photoset}
    <!-- Go through each Photo in the Photoset -->
    {block:Photos}
        <img src="{PhotoURL-HighRes}" class="highres">
        <!--
    {/block:Photos}
    -->

    {block:Caption}
        <p>{Caption}</p>
    {/block:Caption}
{/block:Photoset}

在关闭评论。完成后，第一张照片中的所有图像都将被隐藏。

从Tumblr photoset中拉出第一张图片？

3 个答案: