I have a tumblr page with Isotope and I was wondering if its possible to have the corner-stamp option in isotope:
http://isotope.metafizzy.co/custom-layout-modes/masonry-corner-stamp.html
...function based on a specified tag using {TagsAsClasses}?
In the script, I have:
masonry: { columnWidth: 267, cornerStampSelector: '.stamp' }
So on a post, if I tag it "stamp", it won't stay in the corner, instead it keeps descending with the other posts. However when I add the item directly to the markup, it will work. Unfortunately, editing the html is not possible in this situation.
So long question summed up, is it possible to utilize the corner-stamp option on a isotope/tumblr theme without editing the html and using only a tag of "stamp" within the UI of tumblr?
The site in question is: www.itschucksbday.tumblr.com
Here is the isotope html markup without any modification to add the corner-stamp.
{/block: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">…{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">“</span>{Quote}<span class="quote_end">”</span></p>
</header>
<section class="post-full"><p><span class="quote_start">“</span>{Quote}<span class="quote_end">”</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> {/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> {/block:RebloggedFrom}{block:ContentSource} <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 -->
I found only one solution (without any code):
“However when I add the item directly to the markup” — If this way works, you can simply add .stamp with JavaScript, and it will work too.