https://aekzl.netlify.app/tags/shortcodes/Recent content in shortcodes on ClarityHugo -- gohugo.iode-deCopyright © 2008–2018, Steve Francia and the Hugo Authors; all rights reserved.Sun, 10 Mar 2019 00:00:00 +0000https://aekzl.netlify.app/post/rich-content/Sun, 10 Mar 2019 00:00:00 +0000https://aekzl.netlify.app/post/rich-content/ <p>Hugo ships with several <a href="https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes">Built-in Shortcodes</a> for rich content, along with a <a href="https://gohugo.io/about/hugo-and-gdpr/">Privacy Config</a> and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.</p> <hr> <h2 id="instagram-simple-shortcode">Instagram Simple Shortcode</h2> <br> <hr> <h2 id="youtube-privacy-enhanced-shortcode">YouTube Privacy Enhanced Shortcode</h2> <div class="video"> <iframe src="https://www.youtube.com/embed/izYiDDt6d8s?controls=1&rel=0" loading="lazy"></iframe> </div> <br> <hr> <h2 id="twitter-simple-shortcode">Twitter Simple Shortcode</h2> <style type="text/css"> .twitter-tweet { font: 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; border-left: 4px solid #2b7bb9; padding-left: 1.5em; color: #555; } .twitter-tweet a { color: #2b7bb9; text-decoration: none; } blockquote.twitter-tweet a:hover, blockquote.twitter-tweet a:focus { text-decoration: underline; } </style> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”<br>— Jan Tschichold <a href="https://t.co/gcv7SrhvJb">pic.twitter.com/gcv7SrhvJb</a></p>&mdash; Graphic Design History (@DesignReviewed) <a href="https://twitter.com/DesignReviewed/status/1085870671291310081?ref_src=twsrc%5Etfw">January 17, 2019</a></blockquote> <br> <hr> <h2 id="vimeo-simple-shortcode">Vimeo Simple Shortcode</h2> <style> .__h_video { position: relative; padding-bottom: 56.23%; height: 0; overflow: hidden; width: 100%; background: #000; } .__h_video img { width: 100%; height: auto; color: #000; } .__h_video .play { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; cursor: pointer; } </style> <div class="s_video_simple __h_video"> <a href="https://vimeo.com/4.8912912e&#43;07" rel="noopener" target="_blank"> <img src="https://i.vimeocdn.com/video/337401969_640" srcset="https://i.vimeocdn.com/video/337401969_640 1x, https://i.vimeocdn.com/video/337401969_640 2x" alt="Sing Jan Swing - Kinetic Type"> <div class="play"><svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 61"><circle cx="30.5" cy="30.5" r="30.5" opacity=".8" fill="#000"></circle><path d="M25.3 19.2c-2.1-1.2-3.8-.2-3.8 2.2v18.1c0 2.4 1.7 3.4 3.8 2.2l16.6-9.1c2.1-1.2 2.1-3.2 0-4.4l-16.6-9z" fill="#fff"></path></svg></div></a></div>