changelog.com/posts - new layout options

show.html.eex

<!-- Image w/caption, full-width -->
<figure class="richtext-figure richtext-figure--full">
  <img src="https://via.placeholder.com/1200x600.png" alt="[image alt]">
  <figcaption>This independent workforce survey reveals new insights into freelancing in America. Key findings: Freelancers earned an estimated $1 trillion this year, are highly motivated, growing.</figcaption>
</figure>

<!-- Image w/caption, pull left -->
<figure class="richtext-figure richtext-figure--left">
  <img src="https://via.placeholder.com/1200x600.png" alt="[image alt]">
  <figcaption>This independent workforce survey reveals new insights into freelancing in America. Key findings: Freelancers earned an estimated $1 trillion this year, are highly motivated, growing.</figcaption>
</figure>

<!-- Image w/caption, pull right -->
<figure class="richtext-figure richtext-figure--right">
  <img src="https://via.placeholder.com/1200x600.png" alt="[image alt]">
  <figcaption>This independent workforce survey reveals new insights into freelancing in America. Key findings: Freelancers earned an estimated $1 trillion this year, are highly motivated, growing.</figcaption>
</figure>

<!-- Image w/caption, inset -->
<figure class="richtext-figure">
  <img src="https://via.placeholder.com/1200x600.png" alt="[image alt]">
  <figcaption>This independent workforce survey reveals new insights into freelancing in America. Key findings: Freelancers earned an estimated $1 trillion this year, are highly motivated, growing.</figcaption>
</figure>

<!-- Image w/o caption, pull right -->
<figure class="richtext-figure richtext-figure--right">
  <img src="https://via.placeholder.com/1200x600.png" alt="[image alt]">
  <figcaption></figcaption>
</figure>

<!-- Image w/o caption, full-width -->
<figure class="richtext-figure richtext-figure--full">
  <img src="https://via.placeholder.com/1200x600.png" alt="[image alt]">
</figure>

<!-- Full-width video w/optional caption -->
<figure class="richtext-figure richtext-figure--full">
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/BVeZnsuY7Vc?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
  <figcaption>This independent workforce survey reveals new insights into freelancing in America. Key findings: Freelancers earned an estimated $1 trillion this year, are highly motivated, growing.</figcaption>
</figure>

<!-- Video inset w/o caption -->
<figure class="richtext-figure">
  <div class="video-container">
    <iframe src="https://player.vimeo.com/video/164461434?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</figure>

<!-- Video w/caption, pull left -->
<figure class="richtext-figure richtext-figure--left">
  <div class="richtext-figure-video">
    <div class="video-container">
      <iframe src="https://player.vimeo.com/video/164461434?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
  </div>
  <figcaption>This independent workforce survey reveals new insights into freelancing in America. Key findings: Freelancers earned an estimated $1 trillion this year, are highly motivated, growing.</figcaption>
</figure>

<!-- Twitter embed -->
<figure class="richtext-figure">
  <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Of course you should be rushing over to <a href="https://twitter.com/amazon?ref_src=twsrc%5Etfw">@Amazon</a> to buy my new Christmas Album &quot;Shatner Claus&quot; in LP or CD format!  Go now!  I&#39;ll be right here waiting...😝  <a href="https://t.co/jpCJ9ft6bL">https://t.co/jpCJ9ft6bL</a>  <a href="https://twitter.com/hashtag/ppt?src=hash&amp;ref_src=twsrc%5Etfw">#ppt</a> <a href="https://t.co/EiRwZcOJh4">pic.twitter.com/EiRwZcOJh4</a></p>&mdash; William Shatner (@WilliamShatner) <a href="https://twitter.com/WilliamShatner/status/1055807507770171392?ref_src=twsrc%5Etfw">October 26, 2018</a></blockquote>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  <figcaption class="twitter-tweet-caption">William Shatner sings your favorite Christmas songs.</figcaption>
</figure>

@ericrowan @codyjames one thing we need to make sure on this is that the images all work with an optional anchor wrapped around them. For example:

<figure class="richtext-figure richtext-figure--full">
  <a href="https://changelog.com" title="link title">
    <img src="https://via.placeholder.com/1200x600.png" alt="[image alt]">
  </a>
  <figcaption>This independent workforce survey reveals new insights into freelancing in America. Key findings: Freelancers earned an estimated $1 trillion this year, are highly motivated, growing.</figcaption>
</figure>