amp-img
amp-img is use as replacment of HTML img tag. amp-img tag effectively manage image resource at runtime. It uses lazy load to reduce page load time.
To use amp-img need to specify width and height, src attriburtes. It also support three optional attributes srcset, alt, attribution.
- src – url of image need to display.
- srcset – for retine ready images. We can provide different image for devices varying pixel ratio.
- attribution – to set attribution text of the image.
To set image to responsive use layout attribute and set it value responsive.
<amp-img src=\"/img/amp.jpg\" srcset=\"/img/amp.jpg 1080w, /img/amp-900.jpg 900w, /img/amp-800.jpg 800w, /img/amp-700.jpg 700w, /img/amp-600.jpg 600w, /img/amp-500.jpg 500w, /img/amp-400.jpg 400w, /img/amp-300.jpg 300w, /img/amp-200.jpg 200w, /img/amp-100.jpg 100w\" width=\"1080\" height=\"610\" layout=\"responsive\" alt=\"an image\"></amp-img>
amp-img is builtin tag and imported via the AMP js.
amp-video
amp-video is replacement of Html Video tag. It also lazy load video at runtime.
To use amp-video you must specify width, height and src attributes. It also support some more optional attributes poster, autoplay, controls, loop, muted. It also accept three unique HTML child nodes tag, placeholder before video start, and fallback.
<amp-video width=400 height=300 src=\"https://yourhost.com/videos/myvideo.mp4\"
poster=\"myvideo-poster.jpg\">
<div fallback>
<p>Your browser doesn’t support HTML5 video</p>
</div>
<source type=\"video/mp4\" src=\"foo.mp4\">
<source type=\"video/webm\" src=\"foo.webm\">
</amp-video>
amp-video is in-builtn tag and imported via the AMP js.
amp-audio
amp-audio is replacement of HTML audio tag. It is use to embed audio file in amp pages.
To use amp-audio you must specify src, width and height attributes, amp-audio also have three more optional attribute autoplay, loop and muted.
- src – audio file url.
- autoplay – It will autoplay animated image.
- loop – it will auto loop audio.
- muted – muted audio by default.
<amp-audio width=\"400\" height=\"300\" src=\"https://yourhost.com/audios/myaudio.mp3\">
<div fallback>
<p>Your browser doesn’t support HTML5 audio</p>
</div>
<source type=\"audio/mpeg\" src=\"foo.mp3\">
<source type=\"audio/ogg\" src=\"foo.ogg\">
</amp-audio>
To use amp-audio you have to include below script in <head> section
<script async custom-element=\"amp-audio\" src=\"https://cdn.ampproject.org/v0/amp-audio-0.1.js\"></script>
amp-accordion
amp-accordion is use to implement accordion in amp pages. Accordion is mostly use in faq pages.
Amp-accordion can have one or more first child node <section> and each <section>contain 2 child node first one is heading and second node is content and clicking heading it will toggle display of content.
<amp-accordion>
<section expanded>
<h2>Section 1</h2>
<p>Bunch of awesome content</p>
</section>
<section>
<h2>Section 2</h2>
<div>Bunch of awesome content</div>
</section>
<section>
<h2>Section 3</h2>
<amp-img src=\"/awesome.png\" width=\"300\" height=\"300\"></amp-img>
</section>
</amp-accordion>
amp-accordion also provides below attributes
- disable-session-states – to disable preserving the collapsed/expanded state of the amp-accordion element
- expanded – to set on any <section> expanded on page load.
To use amp-accordion you have to include below script in <head> section
<script async custom-element=\"amp-accordion\" src=\"https://cdn.ampproject.org/v0/amp-accordion-0.1.js\"></script>
amp-carousel
amp-carousel tag to display content boxes horizontally. A carousel is set of number of items with optional navigational arrow. The carousel move items if user swipe, or use arrow key or use navigation arrow.
To use amp-carousel you must specify height attribute, it also provide more optional attributes controls, type, loop, autoplay, delay.
- controls – to display navigation arrow
- type – by default its value is carousel all slides are shown and scrollable. If type value is Slides, it will display singe silde at a time. With type slides you can use three more attribute loop, autoplay, delay.
<amp-carousel width=300 height=400> <amp-img src=\"my-img1.png\" width=300 height=400></amp-img> <amp-img src=\"my-img2.png\" width=300 height=400></amp-img> <amp-img src=\"my-img3.png\" width=300 height=400></amp-img> </amp-carousel>
To use amp-audio you have to include below script in <head> section
<script async custom-element=\"amp-carousel\" src=\"https://cdn.ampproject.org/v0/amp-carousel-0.1.js\"></script>
amp-lightbox
amp-lightbox tag to implement light box interface. amp-lightbox will have to define child node
to display child node content in lightbox on tap or click event.
<button on=\"tap:my-lightbox\">Open lightbox</button>
<amp-lightbox id=\"my-lightbox\" layout=\"nodisplay\">
<div class=\"lightbox\">
<amp-img src=\"my-full-image.jpg\" width=300 height=800 on=\"tap:my-lightbox.close\">
</div>
</amp-lightbox>
To use amp-lightbox you have to include below script in <head> section
<script async custom-element=\"amp-lightbox\" src=\"https://cdn.ampproject.org/v0/amp-lightbox-0.1.js\"></script>
amp-ad/amp-embed
amp-ad is use to display ads. amp-embed is an alias of the amp-ad and use amp-embed when logically more accurate. Your ad javascript will not run inside your amp page, AMP will loads an iframe on runtime and execute ad javascript inside iframe sandbox.
To use amp-ad you need to specify type, width, height attributes. Type is name of ad network to which your ad belong. All data-* attributes also depend on type of network.
Below example amp-ad of for different type of network
<amp-ad width=300 height=250
type=\"a9\"
data-aax_size=\"300x250\"
data-aax_pubname=\"test123\"
data-aax_src=\"302\">
</amp-ad>
<amp-ad width=320 height=140
type=\"colombia\"
layout=responsive
data-clmb_slot=\"129883\"
data-clmb_position=\"1\"
data-clmb_section=\"0\">
</amp-ad>
<amp-embed width=400 height=300
type=\"taboola\"
layout=responsive
data-publisher=thepublisher
data-mode=themode
data-article=auto
data-placement=\"Below Article Thumbnails\">
</amp-embed>
To use amp-ad you have to include below script in <head> section
<script async custom-element=\"amp-ad\" src=\"https://cdn.ampproject.org/v0/amp-ad-0.1.js\"></script>
amp-analytics
amp-analytics is use to collect analytics data from an AMP page. Currently amp-analytics support below events:
- Pageview
- Anchor Clicks
- Timer
- Scrolling
- AMP Carousel changes
To send data to analytcis server you need to specify json configuration object inside amp-analytics tag. Some vendor provide pre configure json configuration object. With type attribute you can set vendor and their json object.
<amp-analytics type=”abc”>
<script type=\"application/json\">
{
.........
}
</script>
</amp-analytics>
To use amp-analytics you have to include below script in <head> section
<script async custom-element=\"amp-analytics\" src=\"https://cdn.ampproject.org/v0/amp-analytics-0.1.js\"></script>
amp-iframe
amp-iframe to display an iframe in AMP pages. amp-iframe is more secure than html <iframe> tag.
To use amp-iframe you must follow these rules iframe must be at least 600px or 75% of the first viewport away from the top and can only request resources via HTTPS.
<amp-iframe width=\"500\"
height=\"281\"
layout=\"responsive\"
sandbox=\"allow-scripts allow-same-origin allow-popups\"
allowfullscreen
frameborder=\"0\"
src=\"https://player.vimeo.com/video/140261016\">
</amp-iframe>
To include an amp-iframe, first include the following script to the <head>
<script async custom-element=\"amp-iframe\" src=\"https://cdn.ampproject.org/v0/amp-iframe-0.1.js\"></script>
Amp also provide some more tags that we can use when require <amp-selector>, <amp-sidebar>,<amp-facebook>,<amp-instagram>,<amp-pinterest>,<amp-playbuzz>,<amp-twitter>,<amp-vine>,<amp-form>,<amp-font>,<amp-dynamic-css-classes>,<amp-anim>,<amp-app-banner> and more you can refer it on amp officia site.
