Playing with bp.blogspot.com
it`s easy now to resize any blogger image or snippet , normaly snippet would take the width of 72 and the same height
for example
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix8OkZlugYDI7OSvqeKVa-pTbqdHpMrPUwtj_eZPBqayBots7vkcIlYbJfcx8K4OR_bSEDl3nWasSX0uJfSNhNYTrat7pYS2baLrI8hdMId-ctFx_bVGKIg4-7w9m5jEWqlRmHRzwwkItK/s72/blogger_masthead%25403x.png
this s72 in the link show the width and height of the image and it is changeable so if you edited the number 72 you will get different sizes
you can do this manually or using javascript or by the following snippet from Blogger that will do the job for you without any pain.
i you want to have a snippet with custom size put the following code where you want in blogger template , if you already have <data:post.thumbnailUrl> in your code jus replace it using the following code:-
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 240, "1:1")'/>
</b:if>
you can change 240 to any value you prefer it will resize width and height with the same value
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY27t2Eb3X5mCk3Mbsfz10tFIJcl6MFkBvIDXQ3vLww1oVwXl-XkDmXpNkj3EyhqT3RLuTQCzVoEbY3xwefj4r14e9-iMFbyr59V5cPXrqGUIKFD8Lf_GMnItE30aIfWUdsznJw-n69mVF/w240-h240-p-k-no-nu/oracle-logo.png
1:1 is for height to width proportion so you can change it to get custom size vs custom height 1:2 for example will make height double the width.
for example
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix8OkZlugYDI7OSvqeKVa-pTbqdHpMrPUwtj_eZPBqayBots7vkcIlYbJfcx8K4OR_bSEDl3nWasSX0uJfSNhNYTrat7pYS2baLrI8hdMId-ctFx_bVGKIg4-7w9m5jEWqlRmHRzwwkItK/s72/blogger_masthead%25403x.png
this s72 in the link show the width and height of the image and it is changeable so if you edited the number 72 you will get different sizes
you can do this manually or using javascript or by the following snippet from Blogger that will do the job for you without any pain.
i you want to have a snippet with custom size put the following code where you want in blogger template , if you already have <data:post.thumbnailUrl> in your code jus replace it using the following code:-
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 240, "1:1")'/>
</b:if>
you can change 240 to any value you prefer it will resize width and height with the same value
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY27t2Eb3X5mCk3Mbsfz10tFIJcl6MFkBvIDXQ3vLww1oVwXl-XkDmXpNkj3EyhqT3RLuTQCzVoEbY3xwefj4r14e9-iMFbyr59V5cPXrqGUIKFD8Lf_GMnItE30aIfWUdsznJw-n69mVF/w240-h240-p-k-no-nu/oracle-logo.png
1:1 is for height to width proportion so you can change it to get custom size vs custom height 1:2 for example will make height double the width.
Comments
Post a Comment