A few more image tags

_includes/card-project.html

@@ -18,10 +18,7 @@
           {% endif %}
         {% endunless %}
         {% if agency_logo %} 
-        <img src= "{{ site.baseurl }}{{ agency_logo }}" 
-             class="maxw-8 margin-right-2"
-             alt=""
-        >
+        {% image_with_class agency_logo "maxw-8 margin-right-2" "" %}
         {% endif %}
         <p class="line-height-sans-2 text-bold margin-top-0">{{ project.agency }}</p>
       </div>

_includes/graphic-block.html

@@ -1,8 +1,5 @@
 <div class="border-bottom-05 border-primary-lightest">
-  <img src="{{ site.baseurl }}{{include.image_path}}" 
-       class="width-full"
-       alt="{{ include.image_alt_text }}"
-  > 
+  {% image_with_class include.image_path "width-full" include.image_alt_text %}
   <p class=" font-sans-lg line-height-sans-4 padding-bottom-3" > 
     {{ include.body_text }}
   </p>

content/posts/2018-01-30-getting-prepared-to-prototype.md

@@ -25,7 +25,7 @@ Here are a list of factors that governments should consider to become better pre
 You can create prototypes in [many different forms](https://github.com/18F?utf8=%E2%9C%93&q=prototype), and you don’t necessarily have to [write software code](https://18f.gsa.gov/2015/01/06/protosketch/). You can use prototypes as a way to get feedback from real or anticipated users, or you can use them as a way to test hypotheses or validate technology choices.
 
 <figure>
-	<img class="image-shadowed" src="{{ site.baseurl }}/assets/blog/prototype/design-prototype.png" alt="mock up of a prototype">
+	{% image_with_class "assets/blog/prototype/design-prototype.png" "image-shadowed" "mock up of a prototype" %}
 	<figcaption>A design prototype built for the State of Alaska to demonstrate a new modular product design strategy for the state’s Medicaid Eligibility System modernization project.</figcaption>
 </figure>
 
@@ -46,7 +46,7 @@ Thinking clearly ahead of time about the reasons for building a prototype, and t
 Through our work, we’ve learned firsthand that finding users to evaluate a prototype [can sometimes be a challenge](https://18f.gsa.gov/2017/11/08/four-lessons-we-learned-while-building-our-own-design-research-recruiting-tool/). Identifying users that can provide meaningful feedback and reaching out to recruit them can require multiple steps, and often prior approvals. As a general rule of thumb, the larger the call for feedback, the more hurdles you’ll have to overcome to identify and contact volunteers.
 
 <figure>
-	<img class="image-shadowed" src="{{ site.baseurl }}/assets/blog/prototype/paid-fam-leave.png" alt="A prototype for paid family leave. Top of the screen is light blue with header">
+	{% image_with_class "assets/blog/prototype/paid-fam-leave.png" "image-shadowed" "A prototype for paid family leave. Top of the screen is light blue with header" %}
 	<figcaption>An 18F prototype built to <a href="https://github.com/18F/Paid-Leave-Prototype">provide technical guidance</a> for the Department of Labor with websites for their Paid Family Medical Leave programs.</figcaption>
 </figure>
 

content/posts/2018-02-06-getting-partners-on-board-with-research-findings.md

@@ -28,7 +28,7 @@ After spending the first two weeks of a six-week project interviewing various us
 Once our partners had bought into what we had seen and heard during our research, we asked them to prioritize the findings. This request left them a bit confused. “Aren’t _you_ supposed to tell us what the priorities should be?” they asked. We told them that while we certainly had an opinion on what the highest priority issues were, especially from a user-experience perspective, it was important for us to know what _their_ organizational priorities were.  
 
 <figure>
-	<img class= "image-reduce right-aligned" src="{{ site.baseurl }}/assets/blog/user-interview/hi-med-low.jpg" alt="image of a large white butcher paper with three columns.  Each column has a header that relate to level of priority - High, medium, low. Below each header are various post-its">
+	{% image_with_class "assets/blog/user-interview/hi-med-low.jpg" "image-reduce right-aligned" "image of a large white butcher paper with three columns.  Each column has a header that relate to level of priority - High, medium, low. Below each header are various post-its" %}
 </figure>
 
 We conducted this exercise using a very low-tech approach: writing findings on sticky notes, then asking the partner to put them into low-priority, medium-priority, and high-priority groups.

content/posts/2018-02-22-new-home-for-the-federal-plain-language-community.md

@@ -17,7 +17,7 @@ redirect_from:
 The Plain Language Action and Information Network (PLAIN) is one of the longest-standing champions for great content and user experience in government. Since the 90s, this incredible community has shepherded the adoption of plain language in federal regulations and communications with the public. Last year, we were honored to partner with them to update and redesign [plainlanguage.gov](https://www.plainlanguage.gov/).
 
 <figure>
-  <img class="image-shadowed" src="{{ site.baseurl }}/assets/blog/plainlang/plainlanggov.png" alt="Screenshot of the plainlanguage.gov home page">
+  {% image_with_class "assets/blog/plainlang/plainlanggov.png" "image-shadowed" "Screenshot of the plainlanguage.gov home page" %}
   <figcaption>The new plainlanguage.gov home page.</figcaption>
 </figure>
 

content/posts/2018-04-05-ask-18f-form-design.md

@@ -51,7 +51,7 @@ You can also start off with a out-of-the-box solution like [Survey Monkey]( http
 Here is an example of a form that applies principles like text alignment, grouping, and typography hierarchy.
 
 <figure>
-  <img class="image-shadowed" src="{{ site.baseurl }}/assets/blog/advice/form.png" alt="An example of a form. Three sections all numbered from one to three. Each section has two text forms. At the bottom is a blue submit button and a cancel hyperlink that is red">
+  {% image_with_class "assets/blog/advice/form.png" "image-shadowed" "An example of a form. Three sections all numbered from one to three. Each section has two text forms. At the bottom is a blue submit button and a cancel hyperlink that is red" %}
 </figure>
 
 #### Helpful links and examples: