Is there a way to make blogger fetch the external url from an image (that is already part of the post) so it can generate a thumbnail?
The template i had before generated thumbnails from both external or picasa urls, but i needed to change the template for a responsive one, and now the new one only chooses the images uploaded to picasa to generate thumbnails.
Here is part of the code for the recent posts list:
<b:if cond='data:post.thumbnailUrl'>
<a class='wdxthumb' expr:href='data:post.url' expr:title='data:post.title'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
</a>
<b:else/>
<a class='wdxthumb' expr:href='data:post.url' expr:title='data:post.title'>
<img alt='no image' class='post-thumbnail' src='https://lh3.googleusercontent.com/-VnJqhx42r-c/UfFWlD-sF_I/AAAAAAAAAQI/rT3sYPba2dY/s271-Ic42/logo3.jpg'/>
</a>
</b:if>
Having the same problem with the related posts (in the post pages), this time with javascript:
<script type = 'text/javascript'>
var relnojudul = 0;
var relmaxtampil = 6;
var numchars = 100;
var reljudul = new Array();
var relurls = new Array();
var relcuplikan = new Array();
var relgambar = new Array();
function saringtags(g, h) {
var e = g.split("<");
for (var f = 0; f < e.length; f++) {
if (e[f].indexOf(">") != -1) {
e[f] = e[f].substring(e[f].indexOf(">") + 1, e[f].length)
}
}
e = e.join("");
e = e.substring(0, h - 1);
return e
}
function relpostimgcuplik(h) {
for (var e = 0; e < h.feed.entry.length; e++) {
var g = h.feed.entry[e];
reljudul[relnojudul] = g.title.$t;
postcontent = "";
if ("content" in g) {
postcontent = g.content.$t
} else {
if ("summary" in g) {
postcontent = g.summary.$t
}
}
relcuplikan[relnojudul] = saringtags(postcontent, numchars);
if ("media$thumbnail" in g) {
postimg = g.media$thumbnail.url
} else {
postimg = "https://lh3.googleusercontent.com/-VnJqhx42r-c/UfFWlD-sF_I/AAAAAAAAAQI/rT3sYPba2dY/s271-Ic42/logo3.jpg"
}
relgambar[relnojudul] = postimg;
for (var f = 0; f < g.link.length; f++) {
if (g.link[f].rel == "alternate") {
relurls[relnojudul] = g.link[f].href;
break
}
}
relnojudul++
}
}
function contains(a, e) {
for (var f = 0; f < a.length; f++) {
if (a[f] == e) {
return true
}
}
return false
}
function artikelterkait() {
var v = new Array(0);
var w = new Array(0);
var x = new Array(0);
var A = new Array(0);
for (var u = 0; u < relurls.length; u++) {
if (!contains(v, relurls[u])) {
v.length += 1;
v[v.length - 1] = relurls[u];
w.length += 1;
w[w.length - 1] = reljudul[u];
x.length += 1;
x[x.length - 1] = relcuplikan[u];
A.length += 1;
A[A.length - 1] = relgambar[u]
}
}
reljudul = w;
relurls = v;
relcuplikan = x;
relgambar = A;
for (var u = 0; u < reljudul.length; u++) {
var B = Math.floor((reljudul.length - 1) * Math.random());
var i = reljudul[u];
var s = relurls[u];
var y = relcuplikan[u];
var C = relgambar[u];
reljudul[u] = reljudul[B];
relurls[u] = relurls[B];
relcuplikan[u] = relcuplikan[B];
relgambar[u] = relgambar[B];
reljudul[B] = i;
relurls[B] = s;
relcuplikan[B] = y;
relgambar[B] = C
}
var r = 0;
var D = Math.floor((reljudul.length - 1) * Math.random());
var z = D;
var q;
var t = document.URL;
while (r < relmaxtampil) {
if (relurls[D] != t) {
q = "<li class='news-title clearfix'>";
q += "<a href='" + relurls[D] + "' rel='nofollow' target='_top' title='" + reljudul[D] + "'><div class='overlayb'></div><img src='" + relgambar[D] + "' /></a>";
q += "<a class='relinkjdulx' href='" + relurls[D] + "' target='_top'>" + reljudul[D] + "</a>";
q += "<span class='news-text'>" + relcuplikan[D] + "</span>";
q += "</li>";
document.write(q);
r++;
if (r == relmaxtampil) {
break
}
}
if (D < reljudul.length - 1) {
D++
} else {
D = 0
} if (D == z) {
break
}
}
};
</script>
It happens also on the Popular list, on the Notícias and the 4 other widgets at the bottom of the homepage.
You can see the problem here: hondanewspot.com
Through out the internet the only explanation i can find is that blogger only generates thumbnail from images uploaded on to picasa and a few other. But the strange is that my other template worked fine.
Thanks in advance for any help.
You can resolve this issue by using <data:post.firstImageUrl/> tag instead of <data:post.thumbnailUrl/> in the reccent post list code
<b:if cond='data:post.firstImageUrl'>
<a class='wdxthumb' expr:href='data:post.url' expr:title='data:post.title'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
</a>
<b:else/>
<a class='wdxthumb' expr:href='data:post.url' expr:title='data:post.title'>
<img alt='no image' class='post-thumbnail' src='https://lh3.googleusercontent.com/-VnJqhx42r-c/UfFWlD-sF_I/AAAAAAAAAQI/rT3sYPba2dY/s271-Ic42/logo3.jpg'/>
</a>
</b:if>
<data:post.firstImageUrl/> tag will return both Picasa hosted images as well as external images.
For the related post widget, you will have to make changes to the code to parse out the Image URL from the HTML response in case the image is not uploaded to Picasa storage
Related
I want to remove the target="_blank" in the given code and also, show me how to add unordered list or ordered list.
Random Post example: Check the bottom of the page
<div class='kotakleft'>
<div class='boxleft'>
<ul id='random-posts' />
<script>
var homePage = "http://www.example.com/",
numPosts = 7;
function randomPosts(a) {
if (document.getElementById("random-posts")) {
var e = shuffleArray(a.feed.entry), title, link, img, content = "", ct = document.getElementById("random-posts");
for (var i = 0; i < numPosts; i++) {
for (var j = 0; j < numPosts; j++) {
if (e[i].link[j].rel == "alternate") {
link = e[i].link[j].href;
break
}
}
var title = e[i].title.$t;
content += '<div class="random-posts"><li>' + title + '</li></div>'
}
ct.innerHTML = content
}
}
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp
}
return arr
}
var random_post = document.createElement('script');
random_post.src = homePage + '/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';
document.getElementsByTagName('head')[0].appendChild(random_post);
</script>
</div>
</div>
How can I do this?
It's very simple, you just need to change a few things:
<div class='boxleft'>
<ul id='random-posts' />
<script>
var homePage = "http://www.example.com/",
numPosts = 7;
function randomPosts(a) {
if (document.getElementById("random-posts")) {
var e = shuffleArray(a.feed.entry), title, link, img, content = "", ct = document.getElementById("random-posts");
content = '<ul>';
for (var i = 0; i < numPosts; i++) {
for (var j = 0; j < numPosts; j++) {
if (e[i].link[j].rel == "alternate") {
link = e[i].link[j].href;
break
}
}
var title = e[i].title.$t;
content += '<li><div class="random-posts">' + title + '</div></li>'
}
content = '</ul>';
ct.innerHTML = content
}
}
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp
}
return arr
}
var random_post = document.createElement('script');
random_post.src = homePage + '/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';
document.getElementsByTagName('head')[0].appendChild(random_post);
</script>
</div>
</div>
How to list post titles of all the post on blogger that have specific tag?
Same sort order that is explained in answer on this question:
How to change this code to list post titles of all the post on Blogger in format YYYY.MM.DD and chronological order?
I try to make a page that list posts titles below different headers(tags).
You can get posts by label using the following url ( replace LabelName with your label )
/feeds/posts/summary/-/LabelName?alt=json
Code from your old question
<div>
<ul id="postList12"></ul>
</div>
<script type="text/javascript">
var startIndex = 1;
var maxResults = 150;
var allResults = [];
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary/-/LabelName?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root)
{
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
a1E.href = url;
a1E.textContent = title + " (" + date.substr(0,10) + ")";
liE.appendChild(a1E);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
</script>
I'm not a programmer, so maybe the info that I looking for in somewhere but I don't know How to search for it.
I have this script to post recent posts by category. It will get the latest published posts from that category forever without ending. If there any solution to make it run once.
Example: If I put this code into a blog post, I want it to post the latest 5 posts only from a specific category, and stop getting any new published posts from that category after that.
I don't know if you understand what I mean or not, but excuse me because I'm not a programmer.
Thank You..
<style>
/*Recent Post By tag*/
img.recent-thumb{float:left;margin-right:10px;height:50px;width:50px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;margin-right:28px;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:14px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:14px;margin:10px 0 0}</style>
<div id="rcentDiv">
</div>
<script type='text/javascript'>
var numposts = 10;
var showpostthumbnails = true;
var showpostdate = false;
// Recent Post By Tag
// Recent Post By Tag For Blogger
// insert revised rcentbytag() code here
function rcentbytag(e) {
var storedHTML = "";
function saveHTML(h) {
storedHTML += h;
}
saveHTML('<table><tbody><tr><td><ul class="recent-by-tag">');
for (var t = 0; t < numposts; t++) {
var n = e.feed.entry[t];
var r = n.title.$t;
var i;
if (t == e.feed.entry.length) break;
for (var o = 0; o < n.link.length; o++) {
if (n.link[o].rel == "replies" && n.link[o].type == "text/html") {
var u = n.link[o].title;
var f = n.link[o].href
}
if (n.link[o].rel == "alternate") {
i = n.link[o].href;
break
}
}
var l;
try {
l = n.media$thumbnail.url
} catch (h) {
s = n.content.$t;
a = s.indexOf("<img");
b = s.indexOf('src="', a);
c = s.indexOf('"', b + 5);
d = s.substr(b + 5, c - b - 5);
if (a != -1 && b != -1 && c != -1 && d != "") {
l = d
} else l = "http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"
}
var p = n.published.$t;
var v = p.substring(0, 4);
var m = p.substring(5, 7);
var g = p.substring(8, 10);
var y = new Array;
y[1] = "January";
y[2] = "February";
y[3] = "March";
y[4] = "April";
y[5] = "May";
y[6] = "June";
y[7] = "July";
y[8] = "August";
y[9] = "September";
y[10] = "October";
y[11] = "November";
y[12] = "December";
saveHTML('<li class="clear">');
if (showpostthumbnails == true) saveHTML('<img class="recent-thumb" alt="' + r + '" src="' + l + '"/>');
saveHTML('<strong>' + r + '</strong>');
saveHTML('<br>');
var x = "";
var T = 0;
if (showpostdate == true) {
x = '<span class="showdates">' + x + g + " " + y[parseInt(m, 10)] + " " + v + "</span>";
T = 1
}
saveHTML(x);
saveHTML("</li>");
if (t != numposts - 1) saveHTML("")
}
saveHTML("</ul></td></tr></tbody></table>")
document.getElementById("rcentDiv").innerHTML = storedHTML;
}
</script>
<script async="async" src="https://www.example.com/feeds/posts/default/-/CategoryName?orderby=published&alt=json-in-script&callback=rcentbytag" return false;"></script>
Replace all of your code with this, let me know if it works; after changing the page make sure you hard refresh the page (ctrl + F5 in google chrome) to get the new content. Note that there are a lot of bad practices in the code you provided and that I've only slightly edited here; if this is for a production website I highly recommend hiring a developer who is familiar with modern javascript techniques like ES6 modules.
<style>
/*Recent Post By tag*/
img.recent-thumb{float:left;margin-right:10px;height:50px;width:50px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;margin-right:28px;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:14px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:14px;margin:10px 0 0}</style>
<div id="rcentDiv">
</div>
<script type='text/javascript'>
var limitreached = false;
var maxposts = 5;
var numposted = 0;
var showpostthumbnails = true;
var showpostdate = false;
// Recent Post By Tag
// Recent Post By Tag For Blogger
// insert revised rcentbytag() code here
function rcentbytag(e) {
if (limitreached === false) {
var storedHTML = "";
function saveHTML(h) {
storedHTML += h;
}
saveHTML('<table><tbody><tr><td><ul class="recent-by-tag">');
for (var t = 0; t < maxposts; t++) {
numposted = numposted + 1;
if (numposted > maxposts) {
limitreached = true;
}
if (limitreached === false) {
var n = e.feed.entry[t];
var r = n.title.$t;
var i;
if (t == e.feed.entry.length) break;
for (var o = 0; o < n.link.length; o++) {
if (n.link[o].rel == "replies" && n.link[o].type == "text/html") {
var u = n.link[o].title;
var f = n.link[o].href
}
if (n.link[o].rel == "alternate") {
i = n.link[o].href;
break
}
}
var l;
try {
l = n.media$thumbnail.url
} catch (h) {
s = n.content.$t;
a = s.indexOf("<img");
b = s.indexOf('src="', a);
c = s.indexOf('"', b + 5);
d = s.substr(b + 5, c - b - 5);
if (a != -1 && b != -1 && c != -1 && d != "") {
l = d
} else l = "http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"
}
var p = n.published.$t;
var v = p.substring(0, 4);
var m = p.substring(5, 7);
var g = p.substring(8, 10);
var y = new Array;
y[1] = "January";
y[2] = "February";
y[3] = "March";
y[4] = "April";
y[5] = "May";
y[6] = "June";
y[7] = "July";
y[8] = "August";
y[9] = "September";
y[10] = "October";
y[11] = "November";
y[12] = "December";
saveHTML('<li class="clear">');
if (showpostthumbnails == true) {
saveHTML('<img class="recent-thumb" alt="' + r + '" src="' + l + '"/>');
}
saveHTML('<strong>' + r + '</strong>');
saveHTML('<br>');
var x = "";
var T = 0;
if (showpostdate == true) {
x = '<span class="showdates">' + x + g + " " + y[parseInt(m, 10)] + " " + v + "</span>";
T = 1
}
saveHTML(x);
saveHTML("</li>");
if (t != maxposts - 1) {
saveHTML("");
}
}
}
saveHTML("</ul></td></tr></tbody></table>");
document.getElementById("rcentDiv").innerHTML = storedHTML;
}
}
</script>
<script async="async" src="https://www.example.com/feeds/posts/default/-/CategoryName?orderby=published&alt=json-in-script&callback=rcentbytag" return false;"></script>
Use a boolean (yes/no value) to check if the function has been ran already.
var CodeRan;
function YourFunction(){
if(!CodeRan){ // If CodeRan is false...
// Set CodeRan to true, so the next time the function is called it wont get past the If statement.
CodeRan = true;
// Your code goes here.
} // End of IF statement.
} // End of yourFunction
Possible duplicate of this:
Javascript running code once
I like to show my titles of posts on a specific page. It is more effective to get know what author have written than scroll all pages or navigate using archive widget.
I found code (code is below) for generate list that sort post titles alphabetically but I like to show titles in chronological order. There is lot of code example about this but they are outdated. They doesn’t work anymore after some changes in blogger platform.
How to change code to get post titles in chronological order and in format YYYY.MM.DD ?
<div>
<ul id="postList12"></ul>
</div>
<script type="text/javascript">
var startIndex = 1;
var maxResults = 150;
var allResults = [];
function sendQuery12() {
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root) {
//Sort Alphebetically
allResults.sort(function(a, b)
{
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root) {
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0) {
for (var i = 0; i < feed.entry.length; i++) {
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == "alternate") {
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0) {
var liE = document.createElement("li");
var a1E = document.createElement("a");
a1E.href = url;
a1E.textContent = title + " (" + date.substr(0,10) + ")";
liE.appendChild(a1E);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults) {
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
</script>
Code is copied from here: https://dansator.blogspot.fi/2015/10/general-alphabetical-list-of-posts.html
Remove sort method from the code. remove the following :
//Sort Alphebetically
allResults.sort(function(a, b){
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
Your code should be
<div>
<ul id="postList12"></ul>
</div>
<script type="text/javascript">
var startIndex = 1;
var maxResults = 150;
var allResults = [];
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root)
{
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
a1E.href = url;
a1E.textContent = title + " (" + date.substr(0,10) + ")";
liE.appendChild(a1E);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
</script>
I run a Blogger blog and I use follow code JavaScript code (requires no jQuery) to show the related post with labels/categories of the post.
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/-M72rpgunTq0/VUOKijudN_I/AAAAAAAABoI/LQ18scEunSg/w72/favicon-TIK.png";
var maxresults=16;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script type='text/javascript'>//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try {
thumburl[relatedTitlesNum] = entry.media$thumbnail.url
} catch (error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl[relatedTitlesNum] = d
} else {
if (typeof(defaultnoimage) !== 'undefined') {
thumburl[relatedTitlesNum] = defaultnoimage
} else {
thumburl[relatedTitlesNum] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"
}
}
}
if (relatedTitles[relatedTitlesNum].length > 80) {
relatedTitles[relatedTitlesNum] = relatedTitles[relatedTitlesNum].substring(0, 80) + "..."
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for (var i = 0; i < relatedUrls.length; i++) {
if (!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i]
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl = tmp3
}
function contains_thumbs(a, e) {
for (var j = 0; j < a.length; j++) {
if (a[j] == e) {
return true
}
}
return false
}
function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if (typeof(splittercolor) !== 'undefined') {
splitbarcolor = splittercolor
} else {
splitbarcolor = "#d4eaf2"
}
for (var i = 0; i < relatedUrls.length; i++) {
if ((relatedUrls[i] == current) || (!relatedTitles[i])) {
relatedUrls.splice(i, 1);
relatedTitles.splice(i, 1);
thumburl.splice(i, 1);
i--
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if (relatedTitles.length > 0) {
document.write('<div class="title">' + relatedpoststitle + '</div>')
}
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i < maxresults) {
document.write(' <img src="' + thumburl[r] + '"/><br/><div class="relatedpostitle" >' + relatedTitles[r] + '</div>');
i++;
if (r < relatedTitles.length - 1) {
r++
} else {
r = 0
}
}
document.write('</div>');
relatedUrls.splice(0, relatedUrls.length);
thumburl.splice(0, thumburl.length);
relatedTitles.splice(0, relatedTitles.length)
}
//]]></script>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'/>
<script expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script defer='defer' type='text/javascript'>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs("<data:post.url/>");</script>
</div>
<div style='clear:both'/>
This code works fine except one problem. The code generates small images ( in default blogger thumbnail size which is s72-c) and there is no way to customize the size for (to change s72-c to s200/s200-c/w200).
I have found a image re-sizing solution script for Blogger but they are not helping. Here is it
function resizeThumb(size) {
var popularPost = document.getElementById('PopularPosts1');
var image = popularPost.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s72\-c/g, "\/s" + size + "-c")
}
}
resizeThumb(200);
This is for Popular post widget. And I know if I change the ID in the first line this will replace the image. But this is not solution but a cover up. And this also means the two images are loaded on is s72-c and the replaced one.
I want to integrate it (something like this) in the first related post script. I have tried hard with very very little knowledge of javascript I have but fail. So I signed up to stackoverflow and this is my question post.
Thank you in advance for trying to the help me.
function code for image size s200-c
function resizeThumb(size) {
var popularPost = document.getElementById('PopularPosts1');
var image = popularPost.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s200\-c/g, "\/s" + size + "-c")
}
}
resizeThumb(200);
function code for image size s200
function resizeThumb(size) {
var popularPost = document.getElementById('PopularPosts1');
var image = popularPost.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s200\/g, "\/s" + size + "")
}
}
resizeThumb(200);
first,add
var thumb = 200;
after
var thumburl = new Array();
then
add
thumburl[relatedTitlesNum] = thumburl[relatedTitlesNum].replace("/s72-c/","/s"+thumb+"/");
after
thumburl[relatedTitlesNum] = entry.media$thumbnail.url;
hope you like it