如何在基于{TagsAsClasses}的tumblr主题上集成Isotope Corner-stamp?

时间:2012-07-10 20:57:09

标签: tumblr jquery-masonry jquery-isotope

我有一个有同位素的tumblr页面,我想知道它是否可能在同位素中有角标记选项:

http://isotope.metafizzy.co/custom-layout-modes/masonry-corner-stamp.html

...使用{TagsAsClasses}?

基于指定标签的功能

在剧本中,我有:

砌筑:{      columnWidth:267,      cornerStampSelector:'。stamp'           }

所以在帖子上,如果我将其标记为“标记”,它将不会留在角落,而是与其他帖子一起下降。但是,当我将项目直接添加到标记时,它将起作用。不幸的是,在这种情况下无法编辑html。

如此长的问题总结一下,是否可以在同位素/ tumblr主题上使用corner-stamp选项而无需编辑html并在tumblr的UI中仅使用“stamp”标记?

相关网站是:www.itschucksbday.tumblr.com

这是同位素html标记,无需任何修改即可添加角标记。

{/块:IndexPage}         

    <div id="main">
    <div id="iso">

        {block:IndexPage}
        {block:Posts}
            <div class="article-box {TagsAsClasses}">
            {block:Text}
            <article class="text {TagsAsClasses}" id="post_{PostID}" data-postID="{PostID}" data-permalink="{Permalink}" data-notes="{PostNotesURL}" data-urlencoded="{URLEncodedPermalink}" data-summary="{block:PostSummary}{PostSummary}{/block:PostSummary}">
                <header>
                    {block:Title}<a href="{Permalink}"><p>{Title}</p></a>{/block:Title}
                </header>

                <section class="post-full">
                {block:Title}<a href="{Permalink}"><p>{Title}</p></a>{/block:Title}
                    {Body}
                    {block:More}
                    <a href="{Permalink}" class="more-link">&#133;{lang:More}</a>
                    {/block:More}
                </section>
                <ul class="post-meta clearfix">
                    <li class="timeago"><a href="{Permalink}">{Timeago}</a></li>
                    <li class="icon"><a href="{Permalink}">{Icon}</a></li>

                </ul>
            {/block:Text}

            {block:Photo}
            <article class="photo {TagsAsClasses}" id="post_{PostID}" data-postID="{PostID}" data-permalink="{Permalink}" data-notes="{PostNotesURL}" data-urlencoded="{URLEncodedPermalink}" data-summary="{block:PostSummary}{PostSummary}{/block:PostSummary}">
                <header>
                    {LinkOpenTag}<img src="{PhotoURL-HighRes}" data-highres="{PhotoURL-HighRes}"  alt="{PhotoAlt}" />{LinkCloseTag}
                </header>


                <section class="post-full">
                    <div class="post-image-holder"><img src="{PhotoURL-HighRes}" data-highres="{PhotoURL-HighRes}"  alt="{PhotoAlt}" /></div>
                    {block:Caption}{Caption}{/block:Caption}
                </section>
                <ul class="post-meta clearfix">
                    <li class="timeago"><a href="{Permalink}">{Timeago}</a></li>
                    <li class="icon"><a href="{Permalink}">{Icon}</a></li>
                </ul>
            {/block:Photo}

            {block:Photoset}
            <article class="photoset" id="post_{PostID}" data-postID="{PostID}" data-permalink="{Permalink}" data-notes="{PostNotesURL}" data-urlencoded="{URLEncodedPermalink}" data-summary="{block:PostSummary}{PostSummary}{/block:PostSummary}">
                        <header>
                            <div class="custom-photoset visuallyhidden" data-photoset-layout="{PhotosetLayout}" data-photoset-id="photoset{PostID}">
                            {block:Photos}
                                <img src="{PhotoURL-250}" data-500px="{PhotoURL-500}" {block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes} alt="{Caption}">
                            {/block:Photos}
                            </div>
                        </header>
                        <section class="post-summary"></section>
                        <section class="post-full">
                        <div class="custom-photoset visuallyhidden" data-photoset-layout="{PhotosetLayout}" data-photoset-id="photoset{PostID}">
                            {block:Photos}
                                <img src="{PhotoURL-250}" data-500px="{PhotoURL-500}" {block:HighRes}data-highres="{PhotoURL-HighRes}"{/block:HighRes} alt="{Caption}">
                            {/block:Photos}
                            </div>
                            {block:Caption}{Caption}{/block:Caption}
                        </section>
                        <ul class="post-meta clearfix">
                    <li class="timeago"><a href="{Permalink}">{Timeago}</a></li>
                    <li class="icon"><a href="{Permalink}">{Icon}</a></li>
                </ul>
            {/block:Photoset}

            {block:Quote}
            <article class="quote {TagsAsClasses}" id="post_{PostID}" data-postID="{PostID}" data-permalink="{Permalink}" data-notes="{PostNotesURL}" data-urlencoded="{URLEncodedPermalink}" data-summary="{block:PostSummary}{PostSummary}{/block:PostSummary}">
                <header>
                    <p><span class="quote_start">&ldquo;</span>{Quote}<span class="quote_end">&rdquo;</span></p>
                </header>

                <section class="post-full"><p><span class="quote_start">&ldquo;</span>{Quote}<span class="quote_end">&rdquo;</span></p>
                    {block:Source}- {Source}{/block:Source}
                </section>
                <ul class="post-meta clearfix">
                    <li class="timeago"><a href="{Permalink}">{Timeago}</a></li>
                    <li class="icon"><a href="{Permalink}">{Icon}</a></li>
                </ul>
            {/block:Quote}

            {block:Link}
            <article class="link {TagsAsClasses}" id="post_{PostID}" data-postID="{PostID}" data-permalink="{Permalink}" data-notes="{PostNotesURL}" data-urlencoded="{URLEncodedPermalink}" data-summary="{block:PostSummary}{PostSummary}{/block:PostSummary}">
                <header>
                    <a href="{URL}" {Target}><p>{Name}</p></a>
                </header>

                <section class="post-full">
                    <a href="{URL}" {Target}><p>{Name}</p></a>
                    {block:Description}{Description}{/block:Description}
                </section>
                <ul class="post-meta clearfix">
                    <li class="timeago"><a href="{Permalink}">{Timeago}</a></li>
                    <li class="icon"><a href="{Permalink}">{Icon}</a></li>
                </ul>
            {/block:Link}

            {block:Chat}
            <article class="chat" id="post_{PostID}" data-postID="{PostID}" data-permalink="{Permalink}" data-notes="{PostNotesURL}" data-urlencoded="{URLEncodedPermalink}" data-summary="{block:PostSummary}{PostSummary}{/block:PostSummary}">
                <header>
                    {block:Title}<h2>{Title}</h2>{/block:Title}
                </header>

                <section class="post-full">
                    {block:Lines}<p class="{Alt} clearfix">{block:Label}<strong>{Label}</strong> &nbsp;{/block:Label}<span>{Line}</span></p>{/block:Lines}
                </section>
                <ul class="post-meta clearfix">
                    <li class="timeago"><a href="{Permalink}">{Timeago}</a></li>
                    <li class="icon"><a href="{Permalink}">{Icon}</a></li>
                </ul>
            {/block:Chat}

            {block:Audio}
            <article class="audio {TagsAsClasses}" id="post_{PostID}" data-postID="{PostID}" data-permalink="{Permalink}" data-notes="{PostNotesURL}" data-urlencoded="{URLEncodedPermalink}" data-summary="{block:PostSummary}{PostSummary}{/block:PostSummary}">
                <header>
                    <a href="{Permalink}"><p></p></a>
                </header>
                <section class="post-full">

                    {block:AudioEmbed}{AudioEmbed-500}{/block:AudioEmbed}

                {block:AudioPlayer}
                    {block:AlbumArt}<img class="album-art" src="{AlbumArtURL}" />{/block:AlbumArt}
                    {block:TrackName}{TrackName}{/block:TrackName}
                    <p><strong>{block:Artist}{Artist}{/block:Artist}{block:Album}, {Album}{/block:Album}</strong></p>
                    <div class="player">{AudioPlayerGrey}</div>
                    <div class="js-dump hidden">{JSAudioPlayerGrey}</div>
                    {/block:AudioPlayer}

                    {block:Caption}{Caption}{/block:Caption}
                </section>
                <ul class="post-meta clearfix">
                    <li class="timeago"><a href="{Permalink}">{Timeago}</a></li>
                    <li class="icon"><a href="{Permalink}">{Icon}</a></li>
                </ul>
            {/block:Audio}
            {block:Video}
            <article class="video {TagsAsClasses}" id="post_{PostID}" data-postID="{PostID}" data-permalink="{Permalink}" data-notes="{PostNotesURL}" data-urlencoded="{URLEncodedPermalink}" data-summary="{block:PostSummary}{PostSummary}{/block:PostSummary}">
                <header>
                    <!--<div class="click-block"></div>
                    <a href="{Permalink}">{Video-500}</a>
                    <div class="js-dump hidden">{JSAudioPlayerGrey}</div>-->
                </header>
                <section class="post-caption">
                    <div><span>
                    {block:Caption}{Caption}{/block:Caption}
                    </span></div>                    
                </section>
                <section class="post-full">
                    <a href="{Permalink}">{Video-500}</a>
                    <div class="js-dump hidden">{JSAudioPlayerGrey}</div>
                    {block:Caption}{Caption}{/block:Caption}
                </section>
               <ul class="post-meta clearfix">
                    <li class="timeago"><a href="{Permalink}">{Timeago}</a></li>
                    <li class="icon"><a href="{Permalink}">{Icon}</a></li>
                </ul>
            {/block:Video}

            {block:Answer}
            <article class="ask" id="post_{PostID}" data-postID="{PostID}" data-permalink="{Permalink}" data-notes="{PostNotesURL}" data-urlencoded="{URLEncodedPermalink}" data-summary="{block:PostSummary}{PostSummary}{/block:PostSummary}">
                <header>
                    <h2>{Question}</h2>
                    <p class="asker"><small>{lang:Asked by Asker}</small><br />
                        <img src="{AskerPortraitURL-16}" height="16" width="16"></p>
                </header>

                <section class="post-full">
                    {Answer}
                </section>
                <ul class="post-meta clearfix">
                    <li class="timeago"><a href="{Permalink}">{Timeago}</a></li>
                    <li class="icon"><a href="{Permalink}">{Icon}</a></li>
                </ul>
            {/block:Answer}

            {block:Date}
            <div class="post-details">                  
                <p><strong>Posted on</strong> {DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix} {Year}{block:GroupMembers}, by <a href="{PostAuthorURL}" class="author-name">{PostAuthorTitle}</a>{/block:GroupMembers}</p>

                {block:HasTags}<p><strong>{lang:Tags}</strong> {block:Tags}<a href="{TagURL}" title="{Title} - {Tag}">{Tag}</a> {/block:Tags}</p>{/block:HasTags}
                <p>{block:RebloggedFrom}<strong>{lang:Reblogged from}</strong> <a href="{ReblogParentURL}">{ReblogParentTitle}</a>&nbsp;{/block:RebloggedFrom}{block:ContentSource}&nbsp;<strong>{lang:Source}</strong> {block:SourceLogo}<a href="{SourceURL}"><img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /></a>{/block:SourceLogo}
                {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}{/block:ContentSource}</p>
            </div>
            <footer>
                <ul class="post-meta clearfix">

                </ul>
            </footer>
            {/block:Date}
        </article>
    </div>
    {/block:Posts}
    {/block:IndexPage} 

    </div> <!--! end of #iso -->

1 个答案:

答案 0 :(得分:0)

我发现只有一个解决方案(没有任何代码):
“但是,当我将项目直接添加到标记”时 - 如果这种方式有效,您只需使用JavaScript添加.stamp,它也可以使用。