How to Implement amp-image-slider in Article Thumbnail
How to Implement amp-image-slider for Blogspot in Article Thumbnail. This tutorial with led you to create
The Latest AMP Components <amp-image-slider> can be tricked by applying it to (Featured Image) Thumbnail Post
Recently, AMP HTML has launched its newest javascript component called amp-image-slider. In @amhtml's official twitter, officially launched the <amp-image-slider> on September 15, 2018.
This component allows visitors to click and slide on 2 different images. You can see an example that I have applied to Janganlupabahagia.com.
Behavior
The amp-image-slider component requires exactly two amp-img elements as its children. The first child image displays on the left, the second child image displays on the right.The amp-image-slider component can also contain two <div> elements to use as labels for the images. The labels are overlayed on top of the images. The label on the left image requires the first attribute, while the right labels requires the second attribute.
By default, the labels display at the top left corner of the image. Adapun Layout yang support <amp-image-slider> yaitu responsive, fixed dan intrinsic.
<amp-image-slider> sample code :
<amp-image-slider layout="responsive" width="100" height="200">
<amp-img src="/green-apple.jpg" alt="A green apple"></amp-img>
<amp-img src="/red-apple.jpg" alt="A red apple"></amp-img>
<div first>This apple is green</div>
<div second>This apple is red</div>
</amp-image-slider>For more details about what the <amp-image-slider> can be seen Click here..
Implement amp-image-slider in Blogger
This time I will try to apply the amp-image-slider component to CSM Blogger. And I have an idea if this can be applied to the Feature image (Thumbnail) of Blogger article.In the tutorial that I made, in the Thumbnail / featured image will only load 1 image. Because the amp-image-slider requires loading two images, I outsmart one other image using Blur effect with CSS.
The first thing we do is copy the javascript component
<amp-image-slider> to <head>. Copy the following code before </head> or <head> .
<b:if cond='data:blog.pageType == "item"'>
<script async='async' custom-element="amp-image-slider" src="https://cdn.ampproject.org/v0/amp-image-slider-0.1.js"/>
</b:if>To make the Blur effect on the second child image, I use CSS filters. Please copy the following CSS between
<style amp-custom='amp-custom'> .... </style>
.blurry {
-webkit - filter: blur(2 px); /* Safari 6.0 - 9.0 */
filter: blur(2 px);
}Next we will place the <amp-image-slider> to replace the default code of Blogger Thumbnail / Featured Image.
Find
<b:if cond='data:post.firstImageUrl'>, and replace <b:if cond='data:post.firstImageUrl'> until </b:if> with the code below, so that the code will become as below:
<b:if cond='data:post.firstImageUrl'>
<amp-image-slider height='200' initial-slider-position='0.3' layout='responsive' width='300'>
<amp-img class='contain' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' layout='fill'/>
<amp-img class='contain blurry' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' layout='fill'/>
</amp-image-slider>
<b:else/>
<div class='fixed-height-containerthumb'>
<a expr:href='data:post.url'>
<amp-img class='contain' expr:alt='data:post.title' expr:title='data:post.title' layout='fill' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwN3hk2SowqH-f5FSSse783pobdbPIQ7Mv5ppzPT_5it7rcWbeCOnuzsIVmfqQuKx3hSE5Mok8au_OX5bqr72e0D_fmHw6AA0Qh3Qqs4c_gsdxgUZmy6ANqoPSPVS8Yt0wh5Zm7U_YGWyq/s250/no-thumbnail.png'/> </a>
</div>
</b:if>
</b:if>After everything is finished, please click SAVE.
You can see the demo by access https://amp.alinuxblog.com
If you don't like the second child image effect that I use, you can create it yourself using another CSS filter. You can search it on google.
That's the tutorial on the Application of amp-image-slider on Featured Image Blogger Articles. Hopefully useful and can be applied to the Blogger AMP template that you have.