A few problems that appear when we use the image used will not appear in the post editor and some pages of the template. Using the amp-img component might be a bit troublesome than the image component provided by blogger.
If we use amp as a template for bloggers, we must get used to typing manually <amp-img> </ amp-img> and then the image will not appear in the blogger text editor component and after that a new problem arises in the featuredImage image that will not appear on page multiple view.
To resolve image from featuredImage that does not appear on the page multiple views or when we use the featuredImage tag to get the first image in the article, in the post editor we must use noscript tag inside amp-img, so that the image will appear in the featuredImage tag.
Examples of blogger editors with responsive layouts:
<amp-img alt="lensamedia" src="url/s1200/apple-lensamedia.jpg"
width="5" height="3" layout="responsive">
<noscript>
<img src="url/s1200/apple-lensamedia.jpg" alt="lensamedia" />
</noscript>
</amp-img>
width="5" height="3" layout="responsive">
<noscript>
<img src="url/s1200/apple-lensamedia.jpg" alt="lensamedia" />
</noscript>
</amp-img>
Example for blogger editor with nodisplay layout:
<amp-img alt="lensamedia" src="url/s1200/apple-lensamedia.jpg"
layout="nodispay">
<noscript>
<img src="url/s1200/apple-lensamedia.jpg" alt="lensamedia" />
</noscript>
</amp-img>
layout="nodispay">
<noscript>
<img src="url/s1200/apple-lensamedia.jpg" alt="lensamedia" />
</noscript>
</amp-img>
To get more perfect and responsive results we can add the srcset tag on the amp-img tag line and can also be combined by sourceSet operator provided by Blogger. The sourceSet operator is useful for generating images and resizing images given for each given width (if the cut is given according to the given ratio).
Example if used with <img> on blogger template:
<img expr:srcset='sourceSet(data:post.featuredImage, [1600, 1200, 640, 320.80], "2:1")' expr:src='data:post.featuredImage' expr:alt='data:post.title '/>
And if we use img srcset in the post editor we only have to copy the image url address and edit the size by changing the url path s1600, s1200 in the image url address. The example below that we can use in the post editor.
<img alt="lensamedia" src="url/s1200/apple-lensamedia.jpg" srcset="url/s1600/apple-lensamedia.jpg 1200w, url/s640/apple-lensamedia.jpg 640w, url/s320/apple -lensamedia.jpg 320w "/>
The amp-img component also provides srcset which can be used specifically in all amp-img tags to determine which image elements to use based on changes in screen size. AMP will automatically create a size attribute for all the <img> tags underlying <amp-img> if <amp-img> has a srcset attribute but does not have a size.
The descriptor w tells the browser the width of each image in the list, the srcset determines which image is used based on the width of the screen and we must know that AMP also supports srcset with w descriptors in all browsers.
The example below is amp-img which can be used to use blogger post editor:
<amp-img alt="lensamedia" src="url/s1200/apple-lensamedia.jpg"
width="5" height="3" layout="responsive"
srcset="url/s1600/apple-lensamedia.jpg 1200w, url/s640/apple-lensamedia.jpg 640w, url/s320/apple-lensamedia.jpg 320w"></ amp-img>
So we can combine AMP srcset and the sourceSet operator to be used in the blogger template in other words combining amp-img and sourceSet so that the images used follow the browser w and also don't forget to add the noscript tag.
Examples of usage on blogger templates:
<amp-img expr:alt='data:post.title' expr:src='data:post.featuredImage' width='2 ’height =' 1 ' layout ='responsive' expr:srcset='sourceSet (data:post.featuredImage, [1600, 1200, 640, 320, 80], "2:1")’>
<noscript>
<img expr:srcset='sourceSet (data:post.featuredImage, [1600, 1200, 640, 320.80], "2:1")' expr:src='data:post.featuredImage' expr:alt=' data:post.title '/>
</noscript>
</amp-img>
Disqus comments