In your template, you'll find a couple of instances of the
"<img expr:src='data:post.thumbnailUrl'/>" tag . Using this tag, you can pick up the first image from a post and generate its thumbnail. By assigning a class/id to this tag and using a simple jquery code, we can define a custom thumbnail size for it.
Before you begin, make sure you have jquery installed in your template. If not, copy the latest version from below and paste it above the closing head tag </head>.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Custom thumbnail Size for Post Images
As mentioned in the begening, a 72 x 72 pixel size thumbnail from post image can be created using the tag:
<img expr:src='data:post.thumbnailUrl'/>
1. To the relevant image tag, simply add a class or id to the tag like this:
<img class="post-thumb" expr:src='data:post.thumbnailUrl'/>
2. Just above the closing head tag </head> in your template, paste the code below.
<script type="text/javascript">
$(document).ready(function() {$('.post-thumb').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});});
<!-- helparchive.blogspot.com -->
</script>
Changing thumbnail Size In Popular Posts Widget
Changing the thumbnail size for Popular Post images is simple. Just paste the code below just above closing head tag </head> in your template.
<script type="text/javascript">
$(document).ready(function() {$('.PopularPosts img').attr('width', '100%').attr('height', 'auto').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});});
<!-- helparchive.blogspot.com -->
</script>
Change "120" to any other number to set the desired size for popular posts thumbnail images and you are all done.
Very good artile its very helpful to me. thank you for sharing this article. Rocket Boys Web Series Watch Online
ReplyDelete