Surviving the Move from Post To Snippet...
Last year, Blogger launched new templates. I selected the Cntempo Template and a feature of this template is to offer snippets of a number of posts on the home page with links to the full posts that underlie each each snippet. In many of my posts, I offer ratings for anime, movies or TV shows and I wanted a way to display the ratings in the snippets, so, visitors would not have to open a particular post to see a rating.The problem that I encountered is that the snippets did not contain the full text of the entire post, but, instead, contain just a small fragment of the text from their posts, and since, the rating text and images in each post are usually at the bottom of each post, the snippets never contained any information about the ratings that might appear in the full post. Some HTML content like images are automatically stripped out of the snippet. So, getting information from the original post, and having that information survive in the snippet, proved an interesting challenge.
One way to overcome the issue of missing rating data is with a JSON query to retrieve the full text of each snippet as needed, then parse the text for the required rating data. The problem with this solution, is, in the case of my site, I would need to make ten round trips to Blogger to get the full text for each of the ten snippets that are displayed which would cause the page to take longer to load -- in some cases several seconds longer.
Another way to achieve the result that I wanted, was to place the rating data at the top of the post rather than near the bottom, but, this would mean editing every post that displays a rating and would require a certain amount of upkeep as new posts are added. After some experimentation, I found that DIV containers placed in posts would automatically be removed from snippets, but, bold tags (b) and anchor tags (a) would survive in snippets. I settled on using an empty bold tag to store the rating data which might look like the following:
I created the gadget below to look for bold tags with the rating attribute like the one above:<b rating="3"></b>
<script type="text/javascript">
var d=document;
var divs;
var articles;
var mainposts;
var articlerating;
var ratingimage='';
var postContainer;
divs=d.getElementsByTagName('div');
for (var i=0;i<divs.length;i++){
if (divs[i].className=='blog-posts hfeed container'){
mainposts=divs[i];
articles=mainposts.getElementsByTagName('article');
if (articles.length>1){
for (var j=0;j<articles.length;j++){
var articleDivs=articles[j].getElementsByTagName('div');
var articleh3 = articles[j].getElementsByTagName('h3');
var articleh3a = articleh3[0].getElementsByTagName('a');
var linkurl = new String(articleh3a[0].getAttribute('href'));
for (var k=0;k<articleDivs.length;k++){
if (articleDivs[k].className=='container post-body entry-content'){
postContainer = articleDivs[k];
}
if (articleDivs[k].className=='snippet-item r-snippetized'){
var articleB = articleDivs[k].getElementsByTagName('b');
if (articleB.length > 0) {
articlerating = new String(articleB[0].getAttribute('rating'));
if (articlerating=='0') {ratingimage = 'imageURLforrating0goeshere';}
if (articlerating=='1') {ratingimage = 'imageURLforrating1goeshere';}
if (articlerating=='2') {ratingimage = 'imageURLforrating2goeshere';}
if (articlerating=='3') {ratingimage = 'imageURLforrating3goeshere';}
if (articlerating=='4') {ratingimage = 'imageURLforrating4goeshere';}
if (articlerating=='5') {ratingimage = 'imageURLforrating5goeshere';}
if (ratingimage!='' && articlerating!='null') {
var im = document.createElement("IMG");
im.setAttribute("src", ratingimage);
im.setAttribute("alt", articlerating + " out of 5");
im.setAttribute("title", articlerating + " out of 5");
im.setAttribute("style", "width:72px;height:13px;");
var am = document.createElement("A");
am.setAttribute("href", linkurl);
am.setAttribute("class", "ratingimage");
am.appendChild(im);
postContainer.appendChild(am);
}}}}}}}}
</script>
The code above will look for snippets using the class name snippet-item r-snippetized and find the header for the snippet and determine the link and the title for the underlying post. Then, the code places an image with a link to the post in the snippet that corresponds to the rating value in the bold tag with the attribute rating. Under the hood, the gadget is not particularly elegant and it does require a certain amount of overhead to maintain, but, it does serve a specific function. Given the specific nature of this gadget, it might not be very useful in a broad sense, but, nonetheless, I felt that I should at least share. By the way, the image for this post is Yuno from Future Diary. Although Yuno's hair, in the anime, is not purple, I wanted something that would illustrate what happens to a post, from a programming perspective, when it is displayed as a snippet.
January 29, 2021
