Do markdown image tags

_includes/card-with-image-guides.html

@@ -25,7 +25,7 @@
   <!--Using a few inline styles here to force the hero div to respect the border radii of the card, but there might be a more elegant way of doing that-->
   {% if hero_url %}
   <div class="padding-4 display-flex flex-column bg-primary-dark" style="border-top-left-radius:inherit; border-top-right-radius: inherit;">
-    <img class="flex-align-self-center maxh-card-lg" alt="" src="{{ site.baseurl }}{{ hero_url }}">
+    {% image_with_class hero_url "flex-align-self-center maxh-card-lg" "" %}
   </div>
   {% endif %}
 

_includes/usa-banner.html

@@ -3,7 +3,7 @@
     <header class="usa-banner__header">
       <div class="usa-banner__inner">
         <div class="grid-col-auto">
-          <img class="usa-banner__header-flag" src="{{ site.baseurl }}/assets/uswds/img/us_flag_small.png" alt="U.S. flag">
+          {% image_with_class "assets/uswds/img/us_flag_small.png" "usa-banner__header-flag" "U.S. flag" %}
         </div>
         <div class="grid-col-fill tablet:grid-col-auto">
           <p class="usa-banner__header-text">An official website of the United States government</p>
@@ -23,7 +23,7 @@
       </script>
       <div class="grid-row grid-gap-lg">
         <div class="usa-banner__guidance tablet:grid-col-6">
-          <img class="usa-banner__icon usa-media-block__img" src="{{ site.baseurl }}/assets/uswds/img/icon-dot-gov.svg" role="img" alt="Dot gov">
+          {% image_with_class "assets/uswds/img/icon-dot-gov.svg" "usa-banner__icon usa-media-block__img" "Dot gov" %}
           <div class="usa-media-block__body">
             <p>
               <strong>Official websites use .gov</strong>
@@ -33,7 +33,7 @@
           </div>
         </div>
         <div class="usa-banner__guidance tablet:grid-col-6">
-          <img class="usa-banner__icon usa-media-block__img" src="{{ site.baseurl }}/assets/uswds/img/icon-https.svg" role="img" alt="Https">
+          {% image_with_class "assets/uswds/img/icon-https.svg" "usa-banner__icon usa-media-block__img" "Https" %}
           <div class="usa-media-block__body">
             <p>
               <strong>Secure .gov websites use HTTPS</strong>

content/posts/2014-09-25-design-studio-onrr.md

@@ -60,17 +60,17 @@ Next, following a round of introductions, we dove right into the collaborative d
 
 **Creating user personas.** Based on the participants’ previous research on users, the group developed [user personas](http://www.usability.gov/how-to-and-tools/methods/personas.html) to serve as examples of the types of people who would interact with the website. We did this by brainstorming possible user goals, behavior patterns, skills, attitudes and environments, and then condensing these into representative groups through [affinity mapping](https://en.wikipedia.org/wiki/Affinity_diagram). The resulting personas give users actual characteristics — names, faces and narratives. This helps our design studio participants (and our 18F team designers!) shift focus away from meeting specific requirements and deliverables, and onto meeting the needs of the users.
 
-![photo: team creating personas]({{site.baseurl}}/assets/blog/eiti/eiti1.jpg)
+{% image "assets/blog/eiti/eiti1.jpg" "photo: team creating personas" %}
 _Building user personas_
 
 **Sketching.** Next came rapid rounds of sketching. Participants chose a specific user persona to design for, and each individual was asked to produce 5 sketches in 8 minutes depicting how to meet that user’s needs. After the buzzer told everyone to put their pens down, all participants presented and critiqued each other’s sketches. To do this, we focused on: “Does the design satisfy the goals of the user persona?” and “What assumptions does the design make that we want or need to test?”
 
-![photo: critiquing sketches]({{site.baseurl}}/assets/blog/eiti/eiti2.jpg)
+{% image "assets/blog/eiti/eiti2.jpg" "photo: critiquing sketches" %}
 _Critiquing the first round of sketches_
 
 We didn’t focus on whether the design was pretty or technically feasible; we simply wanted to generate ideas we knew would delight our user personas. This process — sketching, presenting, and critiquing — was repeated until the group converged on a clear set of winning designs.
 
-![photo: wall of sketches]({{site.baseurl}}/assets/blog/eiti/eiti3.jpg)
+{% image "assets/blog/eiti/eiti3.jpg" "photo: wall of sketches" %}
 _Second round of sketches producing some clear winners!_
 
 ## What’s next?

content/posts/2014-11-13-why-we-use-https-in-every-gov-website-we-make.md

@@ -20,7 +20,7 @@ On today's Internet, in today's web browsers, **HTTPS** (`https://`) offers the
 
 That's why 18F's policy is to **use HTTPS for every .gov website we make**.  18F is an in-house government technology team that builds things for the rest of the U.S. federal government, and we're committed to deploying HTTPS across all of our released websites.
 
-![HTTPS URL on desktop]({{site.baseurl}}/assets/blog/https-everywhere/18f-https-desktop.png)
+{% image "assets/blog/https-everywhere/18f-https-desktop.png" "HTTPS URL on desktop" %}
 
 Deciding to use HTTPS everywhere was not difficult. Strong encryption benefits our visitors and our government partners by providing:
 

content/posts/2014-11-17-taking-control-of-our-website-with-jekyll-and-webhooks.md

@@ -15,7 +15,7 @@ tags:
   - jekyll
 
 ---
-[![Our website running with Jekyll]({{site.baseurl}}/assets/blog/new-jekyll-site/header.png)](https://github.com/18F/18f.gsa.gov/pull/235)
+[{% image "assets/blog/new-jekyll-site/header.png" "Our website running with Jekyll" %}](https://github.com/18F/18f.gsa.gov/pull/235)
 
 A few of us here recently took a bit of time to drastically rework 18F's main [website and blog](https://18f.gsa.gov) — what you're reading right now — and take it fully into our own hands.
 
@@ -128,7 +128,7 @@ We made this work using **[GitHub's webhooks](https://github.com/blog/1778-webho
 
 We created two webhooks for [our website's main repository](https://github.com/18f/18f.gsa.gov), pointed at our staging and live URLs:
 
-![18F site webhooks]({{site.baseurl}}/assets/blog/new-jekyll-site/webhooks.png)
+{% image "assets/blog/new-jekyll-site/webhooks.png" "18F site webhooks" %}
 
 Each is configured to notify the webhook when changes are made to the files in the repository, either directly or through a pull request.
 

content/posts/2015-01-08-an-open-source-tool-for-easier-database-testing.md

@@ -34,7 +34,7 @@ of foreign key relationships between tables can make extracting a limited
 yet valid subset of its tuples feel like trying to cut a little sweater
 out of a big sweater without snipping any yarns.
 
-![Don't break any yarns.]({{site.baseurl}}/assets/blog/db-testing-tool/cut_sweater.jpg)
+{% image "assets/blog/db-testing-tool/cut_sweater.jpg" "Don't break any yarns." %}
 
 So we've written a new utility,
 [rdbms-subsetter](https://github.com/18F/rdbms-subsetter),
@@ -46,7 +46,7 @@ Populating a test database can be as simple as
 rdbms-subsetter postgresql://:@/proddb postgresql://:@/testdb 0.001
 ```
 
-![rdbms-subsetter in action]({{site.baseurl}}/assets/blog/db-testing-tool/subsetter.png)
+{% image "assets/blog/db-testing-tool/subsetter.png" "rdbms-subsetter in action" %}
 
 It should work against
 [any database that SQLAlchemy supports](http://docs.sqlalchemy.org/en/rel_0_9/core/engines.html#supported-databases).

content/posts/2015-02-10-a-story-of-an-agile-workshop.md

@@ -83,7 +83,7 @@ been hastily brought in. Their bank of workstations was divided by a big
 projector — the “stage” upon which the demos would be shown. Other
 observers sat in the back of the room.
 
-![The room: developers on left, the demo area, and product owners on right.]({{site.baseurl}}/assets/blog/agile-workshop/workshop3.JPG)
+{% image "assets/blog/agile-workshop/workshop3.JPG" "The room: developers on left, the demo area, and product owners on right." %}
 
 ## The first sprint brought a quick win
 

content/posts/2015-02-17-three-18f-products-that-will-help-your-workplace.md

@@ -44,7 +44,7 @@ like — in fact, I recommend it.
 
 The Hub is just what it sounds like — a centralized place where team members share project documentation and more general information about how 18F works.
 
-![A screenshot of The Hub]({{site.baseurl}}/assets/blog/three-products/hub.png)
+{% image "assets/blog/three-products/hub.png" "A screenshot of The Hub" %}
 
 The Hub is really easy to navigate, and it’s equally easy to update
 — anyone can add new information in seconds. Yesterday, for example, I
@@ -68,7 +68,7 @@ Opportunities](https://www.digitalgov.gov/join-digitalgov/open-opportunities-in-
 which connects people from across and within government agencies to
 collaborate on projects. So far, over 100 projects have been completed.
 
-![A screenshot of Midas]({{site.baseurl}}/assets/blog/three-products/midas.png)
+{% image "assets/blog/three-products/midas.png" "A screenshot of Midas" %}
 
 Midas can benefit all organizations, but it’s especially useful for
 those with distributed teams and whose employees have diverse skill
@@ -89,7 +89,7 @@ designated person collects these Snippets in a CSV file and sends out a
 weekly email digest. Snippets subscribers can learn, at a glance, what
 all of their colleagues are up to.
 
- ![A snippet from Mike Bland, describing his workflow]({{site.baseurl}}/assets/blog/snippets/20141215-mbland.jpg)
+{% image "assets/blog/snippets/20141215-mbland.jpg" "A snippet from Mike Bland, describing his workflow" %}
 
 If you don’t have the technical know-how to collect this data in a CSV,
 you can have people fill out Snippets via email or on a blog — the point