Blogger'da Küçük Resimlerin Varsayılan Çözünürlüğünü Yeniden Boyutlandırın
Blogger'da Küçük Resimlerin Varsayılan Çözünürlüğünü Yeniden Boyutlandırın
Küçük resimlerin çözünürlüğünü dinamik olarak yeniden boyutlandırmak için Blogger'daki küçük resimlerin URL yapısını JSON aracılığıyla değiştirin.
Blogger, küçük resimleri 72x72px olarak boyutlandırır. Gönderilerinizde yüklediğiniz bütün resimler 72px genişliğinde ve yine 72px yüksekliğinde JSON ve XML dosyaları olarak saklanır.Küçük görseller orijinal haliyle kare boyutlarda kaydedilmektedir. Bu CSS olarak sayfaya eklendiğinde ister istemez orijinal çözünürlük düşer. Bu yazı da Javascript tekniğiyle son yazılar eklentisini kullanarak resmin URL'sinde ki orijinal boyutlarını değiştirerek bu problemi ortadan kaldırma yolunda ilerleyeceğiz.
Blogger küçük resimlerinin varsayılan çözünürlüğü asla yalnızca CSS kullanılarak değiştirilemez. Gerçek URL yapısını değiştirmek için JavaScript gerekir.
JSON beslemesindeki Küçük Resimlerin URL yapısı
Küçük resimlerin media$thumbnail satırında saklandığını ve aşağıdaki URL yapısına sahip olduğunu artık açıkça biliyorsunuz.
<!-- ######### Writing Callback Function ############# -->
<script type="text/javascript">
//----------------------------Defaults
var ListBlogLink = window.location.hostname;
var ListCount = 5;
var TitleCount = 70;
var ListLabel =" ";
var ChrCount = 80;
var ImageSize = 100;
//----------------------------Function Start
function mbtlist(json) {
document.write('<ul class="mbtlist">');
for (var i = 0; i < ListCount; i++)
{
//-----------------------------Variables Declared
var listing= ListUrl = ListTitle = ListConten = ListContent =ListImage =thumbUrl =sk = "";
//----------------------------- Title URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//----------------------------------- Title Stirng
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
//----------------------------------- Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substr(0, ChrCount);
//------------------------------------ Thumbnail Check
if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}
// Support For 3rd Party Images
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNMYRwM5nv3Z8t0y8OeJMeNnUmPaoK0q0dN1IdctV5qdMUFBBXF6Q_W-fVLUDnt8X2yEaCoBS2ZKMWxB6Rjak1RYRvDbOuHcrV14oFCBjmEV0vEXwTbNDCkMGEDAN3oDO7eYfi2sZDxDo/s200/Icon.png'";
}
//----------------------------------- Printing List
var listing = "<li><a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a><a class='mbttitle' href="
+ListUrl+
"target='_blank'>"
+ListTitle+
"</a><span class='icontent'>"
+ListContent+
" ... <a href="
+ListUrl+
" class='imore'>»</a></span></li>";
document.write(listing);
}
document.write("</ul>");
}
</script>
<!-- ######### Invoking the Callback Function ############# -->
<script>
ListBlogLink = "http://www.mybloggertricks.com";
ListCount = 4;
TitleCount = 70;
ListLabel = "Announcement";
ChrCount = 150;
document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
</script>
<!-- ######### Styles for Look ############# -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style>
.mbtlist {list-style-type:none;overflow:hidden}
.mbtlist li {margin:0px auto 20px auto; clear:both; color:#666; font-family:Helvetica; font-size:12px; border-bottom:1px dotted #ddd;padding-bottom:10px;}
.mbtlist .mbttitle {font-family:oswald; font-size:16px; color:#0080ff; font-weight:normal; text-decoration:none;}
.mbtlist .mbttitle:hover {color:#00A5FF;}
font-family:georgia; font-size:15px; font-weight:bold}
.mbtlist div span{margin:0 10px 0 0; display:inline-block;}
.mbtlist span {display:block; margin:5px 0px 0px; padding-right:5px;}
.mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666; line-height: 0.7em;}
.mbtlist img {float:left; margin:0px 10px 10px 0px; border:6px solid #fff; padding:0px; width:80px; height:65px; box-shadow:-1px -1px 4px #777; }
.mbtlist .icontent {text-align:justify;}
</style>
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
Burada ilk JavaScript kullanılan () yerine değiştirmek için bir yöntem S72-c ile imagesize . Daha sonra bu yeni Resim URL'sini sk içine kaydettik . Ayrıca görüntülerin kırpılmasını önlemek için -c parametresini de kaldırdık .
4. Sonunda ?imgmax=800 parametresini sk içindeki Resim URL'sinden replace yöntemini kullanarak kaldırdık ve yeni temiz URL'yi ListImage içine kaydettik .
Normal boyut
Hiç yorum yok: