Search code examples
javascripthtmlcssblogger

Adapting Blogger's Featured Post Gadget to show recent posts of specific labels


Essentially the title says it all. Would you anybody know how to adapt Blogger's Featured Post Gadget so that instead of showing recent posts from my entire site, it could just show recent posts from a certain label? I just want a widget that can show the most recent post (just 1 post) from one of my labels.
This is the link to my site. The gadget I'm talking about is called Random Post on the site:http://newsotuniverse.blogspot.ca/
I'll also provide some code from site for you non-Blogger users to see if you can tackle the problem:

          <b:widget id='FeaturedPost1' locked='false' title='Random Post' type='FeaturedPost'>
            <b:widget-settings>
              <b:widget-setting name='showSnippet'>true</b:widget-setting>
              <b:widget-setting name='showPostTitle'>true</b:widget-setting>
              <b:widget-setting name='showFirstImage'>true</b:widget-setting>
              <b:widget-setting name='useMostRecentPost'>true</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
  <!-- Only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <b:include name='content'/>

  <b:include name='quickedit'/>
</b:includable>
            <b:includable id='content'>
  <div class='post-summary'>
    <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
      <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
    </b:if>
    <b:if cond='data:showSnippet and data:postSummary != &quot;&quot;'>
      <p>
        <data:postSummary/>
      </p>
    </b:if>
    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
      <img class='image' expr:src='data:postFirstImage'/>
    </b:if>
  </div>

  <style type='text/css'>
    .image {
      width: 100%;
    }
  </style>
</b:includable>
          </b:widget>

Would really appreciate it if someone could help. Thanks in advance!


Solution

  • Update: I updated the code it filters now the posts for the label label1.

    I don't think it is possible, since you can't access the labels property from the featured Post data element, but you could replace the FeaturedPost Widget with a Blog Widget, with Code like this:

    <b:widget id='Blog2' locked='true' title='FeaturedBlog' type='Blog' >
      <b:includable id='main'>
        <div class='post-summary'>
          <b:with var="filteredData" value="data:posts filter (p =&gt; p.labels any ( l =&gt; l.name == &quot;label0&quot; ))">     
            <b:loop values='data:filteredData' var='post' index='index'>
              <b:if cond='data:index == "0"' > 
                <h3><a expr:href='data:post.url'><data:post.title/></a></h3>
                ...
              </b:if>  
            </b:loop>
          </b:with>
       </div>
      <b:include name='quickedit'/>
      </b:includable>
    </b:widget>
    
    • It is not so sexy, and you would have to copy the html-structure from the Featured Post Widget
    • you would have to change id='Blog2' according to your needs.

    Mini Explanation to the filtering:
    data:posts filter (p =&gt; p.labels any ( l =&gt; l.name == &quot;label0&quot; ))
    data:posts: get all Posts
    filter: is a lambda function, that will be called for all posts( to filter items ) and returns only "fitting" items
    (p => ... ): is the outer function "construct" p.labels: p is the current post, labels are the labels of the current post any: is an other lambda function, that returns true if one items "fits"
    (l => l.name == "label0") ... inner function checking if the post has a label with the name label0

    Here a link to a good inofficial reference website: http://template-data.blogspot.co.at