Skip to content

Instantly share code, notes, and snippets.

@JLuc

JLuc/articleamp.html

Created May 7, 2020 11:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JLuc/46a95c5021ded1dd67454980b39a93c6 to your computer and use it in GitHub Desktop.
Save JLuc/46a95c5021ded1dd67454980b39a93c6 to your computer and use it in GitHub Desktop.
Download ZIP
Squelette AMP chrisgaillard.com
Raw
articleamp.html
<BOUCLE_lagrossebcl(ARTICLES){id_article}>
<!doctype html>
<html amp lang="fr-FR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>
#TITRE- #NOM_SITE_SPIP</title>
<link rel="canonical" href="#URL_SITE_SPIP/#URL_ARTICLE" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<meta name="description" content="[(#INTRODUCTION|textebrut)]" />
<meta property="og:title" content="#TITRE - #SOUSTITRE " />
<meta property="og:description" content="[(#INTRODUCTION|textebrut)]" />
<meta property="og:url" content="#URL_SITE_SPIP/#URL_ARTICLE" />
<meta property="og:image" content="#URL_SITE_SPIP/[(#LOGO_ARTICLE|image_reduire{300,300}|extraire_attribut{src})]" />
<meta property="og:site_name" content="C G W G" />
<meta property="fb:app_id" content="185253479000"/>
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@cg" />
<meta name="twitter:title" content="#TITRE - #SOUSTITRE " />
<meta name="twitter:description" content="[(#INTRODUCTION|textebrut)]" />
<meta name="twitter:image" content="#URL_SITE_SPIP/[(#LOGO_ARTICLE|image_reduire{180,180}|extraire_attribut{src})]" />
<meta name="twitter:url" content="#URL_SITE_SPIP/#URL_ARTICLE" />
<script type="application/ld+json">
{ "@context": "http://schema.org", "@type": "WebSite", "name": "C G", "url": "#URL_SITE_SPIP/#URL_ARTICLE", "sameAs": [ "https://twitter.com/cg", "https://www.facebook.com/cg/", "https://www.instagram.com/cg/", "https://www.linkedin.com/in/cg" ] } </script>
<style amp-custom>
/* Generic WP styling */ .alignright { float: right; } .alignleft { float: left; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .amp-wp-enforced-sizes { /** Our sizes fallback is 100vw, and we have a padding on the container; the max-width here prevents the element from overflowing. **/ max-width: 100%; margin: 0 auto; } .amp-wp-unknown-size img { /** Worst case scenario when we can't figure out dimensions for an image. **/ /** Force the image into a box of fixed dimensions and use object-fit to scale. **/ object-fit: contain; } /* Template Styles */ .amp-wp-content, .amp-wp-title-bar div { margin: 0 auto; max-width: 1080px; } html { background: #ff9100; } body { background: #fff; color: #353535; font-family: 'Arial', sans-serif; font-weight: 300; line-height: 1.75em; } p, ol, ul, figure { margin: 0 0 1em; padding: 0; } a, a:visited { color: #ff9100; } a:hover, a:active, a:focus { color: #353535; } /* Quotes */ blockquote { color: #353535; background: rgba(127,127,127,.125); border-left: 2px solid #ff9100; margin: 8px 0 24px 0; padding: 16px; } blockquote p:last-child { margin-bottom: 0; } /* UI Fonts */ /* Header */ .amp-wp-header { background-color: #ff9100; } .amp-wp-header div { color: #000; font-size: 1.2em; font-weight: 400; margin: 0 auto; max-width: calc(840px - 32px); padding: .875em 16px; position: relative; } .amp-wp-header a { color: #000; text-decoration: none; } /* Site Icon */ .amp-wp-header .amp-wp-site-icon { /** site icon is 32px **/ background-color: #fff; border: 1px solid #fff; border-radius: 50%; position: absolute; right: 18px; top: 10px; } /* Article */ .amp-wp-article { color: #353535; font-weight: 400; margin: 1.5em auto; max-width: 840px; overflow-wrap: break-word; word-wrap: break-word; } /* Article Header */ .amp-wp-article-header { margin: 1.5em 16px 1.5em; } .amp-wp-title { color: #353535; display: block; flex: 1 0 100%; font-weight: 900; margin: 0 0 ; width: 100%; } h2{margin:0 0 5px 0; font-weight:normal; font-size:1.2em;} /* Article Meta */ .amp-wp-meta { color: #696969; display: inline-block; flex: 2 1 50%; font-size: .875em; line-height: 1.5em; margin: 0; padding: 0; } .amp-wp-article-header .amp-wp-meta:last-of-type { text-align: right; } .amp-wp-article-header .amp-wp-meta:first-of-type { text-align: left; } .amp-wp-byline amp-img, .amp-wp-byline .amp-wp-author { display: inline-block; vertical-align: middle; } .amp-wp-byline amp-img { border: 1px solid #ff9100; border-radius: 50%; position: relative; margin-right: 6px; } .amp-wp-posted-on { text-align: right; } /* Featured image */ .amp-wp-article-featured-image { margin: 0 0 1em; } .amp-wp-article-featured-image amp-img { margin: 0 auto; } .amp-wp-article-featured-image.wp-caption .wp-caption-text { margin: 0 18px; } /* Article Content */ .amp-wp-article-content { margin: 0 16px; } .amp-wp-article-content ul, .amp-wp-article-content ol { margin-left: 1em; } .amp-wp-article-content amp-img { margin: 0 auto; } .amp-wp-article-content amp-img.alignright { margin: 0 0 1em 16px; } .amp-wp-article-content amp-img.alignleft { margin: 0 16px 1em 0; } /* Captions */ .wp-caption { padding: 0; } .wp-caption.alignleft { margin-right: 16px; } .wp-caption.alignright { margin-left: 16px; } .wp-caption .wp-caption-text { border-bottom: 1px solid #c2c2c2; color: #696969; font-size: .875em; line-height: 1.5em; margin: 0; padding: .66em 10px .75em; } /* AMP Media */ amp-carousel { background: #c2c2c2; margin: 0 -16px 1.5em; } amp-iframe, amp-youtube, amp-instagram, amp-vine { background: #c2c2c2; margin: 0 -16px 1.5em; } .amp-wp-article-content amp-carousel amp-img { border: none; } amp-carousel >
amp-img >
img { object-fit: contain; } /* Article Footer Meta */ .amp-wp-article-footer .amp-wp-meta { display: block; } .amp-wp-tax-category, .amp-wp-tax-tag { color: #696969; font-size: .875em; line-height: 1.5em; margin: 1.5em 16px; } .amp-wp-comments-link { color: #696969; font-size: .875em; line-height: 1.5em; text-align: center; margin: 2.25em 0 1.5em; } .amp-wp-comments-link a { border-style: solid; border-color: #c2c2c2; border-width: 1px 1px 2px; border-radius: 4px; background-color: transparent; color: #ff9100; cursor: pointer; display: block; font-size: 14px; font-weight: 600; line-height: 18px; margin: 0 auto; max-width: 200px; padding: 11px 16px; text-decoration: none; width: 50%; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } /* AMP Footer */ .amp-wp-footer { border-top: 1px solid #c2c2c2; margin: calc(1.5em - 1px) 0 0; } .amp-wp-footer div { margin: 0 auto; max-width: calc(840px - 32px); padding: 1.25em 16px 1.25em; position: relative; } .amp-wp-footer h2 { font-size: 1em; line-height: 1.375em; margin: 0 0 .5em; } .amp-wp-footer p { color: #696969; font-size: .8em; line-height: 1.5em; margin: 0 85px 0 0; } .amp-wp-footer a { text-decoration: none; } .back-to-top { bottom: 1.275em; font-size: .8em; font-weight: 600; line-height: 2em; position: absolute; right: 16px; } .redige{display:inline; } .illustr{text-align: center;}.illustr img{margin-bottom:40px;}</style>
</head>
<body class="">
<header id="#top" class="amp-wp-header">
<div>
<a href="#URL_SITE_SPIP">
a CGWD </a>
</div>
</header>
<article class="amp-wp-article">
<header class="amp-wp-article-header">
<h1 class="amp-wp-title">
#TITRE</h1>
<h2>
#SOUSTITRE</h2>
<p>
<small class="redige">
Rédigé par <a href="#URL_ARTICLE{110}" class="animsition-link">
CG small</a>
<time datetime="#DATE">
le [(#DATE|affdate)] </time>
</small>
</p>
</header>
<figure class="amp-wp-article-featured-image wp-caption">
<amp-img width="600" height="400" src="[(#LOGO_ARTICLE|image_passe_partout{600,400}|image_recadre{600,400,center}|extraire_attribut{src})]" class="attachment-large size-large wp-post-image amp-wp-enforced-sizes" alt="#TITRE" srcset="[(#LOGO_ARTICLE|image_passe_partout{600,400}|image_recadre{600,400,center}|extraire_attribut{src})] 600w, [(#LOGO_ARTICLE|image_passe_partout{600,400}|image_recadre{300,200,center}|extraire_attribut{src})] 300w" sizes="(min-width: 600px) 600px, 100vw">
</amp-img>
</figure>
<div class="amp-wp-article-content">
[<strong>
(#CHAPO)</strong>
] [(#TEXTE*|sans_doc)] [<div class="bouton">
<a href="#URL_SITE" target="_blank" itemprop="url" >
<strong>
Visiter le site</strong>
>
(#URL_SITE|replace{http://, }) </a>
</div>
] <p class="illustr">
<BOUCLE_portfolio(DOCUMENTS){id_article}{extension==jpg|png|gif}>
<amp-img
class="alignnone size-full amp-wp-enforced-sizes"
src="[(#FICHIER|image_passe_partout{600}|extraire_attribut{src})]"
alt="#TITRE"
width="[(#FICHIER|image_passe_partout{600}|extraire_attribut{width})]"
height="[(#FICHIER|image_passe_partout{600}|extraire_attribut{height})]"
srcset=" [(#FICHIER|image_passe_partout{600}|extraire_attribut{src})] 600w,
[(#FICHIER|image_passe_partout{150}|extraire_attribut{src})] 150w,
[(#FICHIER|image_passe_partout{300}|extraire_attribut{src})] 300w ">
</amp-img> <br/>
</BOUCLE_portfolio>
</p>
</div>
</article>
<footer class="amp-wp-footer">
<div>
<h2> h2 CG</h2>
<a href="#top" class="back-to-top">
Retour en haut</a>
</div>
</footer>
</body>
</html>
</BOUCLE_lagrossebcl>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment