Skip to content

Instantly share code, notes, and snippets.

@xomisse

xomisse/data:post.body Secret

Created Dec 3, 2015
Embed
What would you like to do?
Advanced Post summary with Image, Title, Date, Read More and URL.
<!-- START GRID XOMISSE -->
<b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> <b:else/> <div class='featured' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.dateHeader/>&quot;); </script> </b:if> </b:if>
<!-- END GRID XOMISSE -->
<!-- START GRID XOMISSE -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot; ;
summary_noimg = 400;
summary_img = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}
function createSummaryAndThumb(pID, pURL, pTITLE, pDATE){
var div=document.getElementById(pID);
var imgtag="";
var img=div.getElementsByTagName("img");
var summ=summary_noimg;
var posttitle="<h3 class='feat-title' itemprop='name'><a href='"+pURL+"'>"+pTITLE+"</a></h3>";
var extras="<div class='feat-link'><span class='feat-date'>"+ pDATE +"</span><span><a class='more' href='"+pURL+"'>Read More</a></span></div>";
if(img.length>=1){imgtag='<div class="feat-img"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'"/></a></div>';summ=summary_img}
var summary=imgtag+posttitle+'<div class="feat-summ">'+removeHtmlTag(div.innerHTML,summ)+'</div>'+extras;div.innerHTML=summary}
//]]>
</script>
<style type='text/css'>
.post-body div:nth-child(2) { height:70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-outer { float:left; width: 48%; margin:1%; margin-top:25px;}
.post-outer:nth-child(1) {margin-top:0px; width: 98%; float: none;}
.post-outer:nth-child(1) .feat-summ {display:block;}
.post-outer:nth-child(1) .feat-img {height:400px;}
.post {padding:20px; -webkit-box-shadow: 1px 1px 2px 0 #d0d0d0; -moz-box-shadow: 1px 1px 2px 0 #d0d0d0; box-shadow: 1px 1px 2px 0 #d0d0d0; border: 1px solid #ddd; background: #f5f5f5;}
.feat-title {margin: 20px 0; text-overflow: ellipsis; white-space: nowrap;overflow:hidden;}
.post-body img {height:auto;max-width:100%}
.feat-img {margin:0;overflow:hidden;position:relative;height:220px;}
.feat-img img {width:100%;height:auto}
.feat-summ {margin: 20px 0;}
.feat-link {padding: 10px 20px 10px 20px; border-top: 1px solid #ddd; clear:both;}
.more {float: right; width: 45%; text-align:right;} .feat-date {float:left; width: 50%}
.post-footer, .post-labels, .shareaholic-canvas, .feat-summ, .post-title, .date-header {display:none;}
.mobile .post {width:auto;height:auto;}
.mobile .post-body {height:auto;}
</style>
</b:if>
</b:if>
<!-- END GRID XOMISSE -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.