Do the easy image tags

content/pages/home.html

@@ -23,7 +23,7 @@ <h1>
         </a>
       </div>
       <div class="grid-col-12 tablet-lg:grid-col-6 tablet-lg:display-flex flex-justify-end">
-        <img src="{{ site.baseurl }}/assets/img/home/hero-2023.svg" alt="">
+        {% image "assets/img/home/hero-2023.svg" "" %}
       </div>
     </div>
   </div>
@@ -80,7 +80,7 @@ <h2> What 18F can do</h2>
     </div>
 
     <div class="grid-row">
-      <img src="{{ site.baseurl }}/assets/img/home/cando_illo_4.svg" alt="">
+      {% image "assets/img/home/cando_illo_4.svg" "" %}
     </div>
 
     <div class="grid-row margin-top-4">

content/pages/press.html

@@ -9,34 +9,34 @@
 <section>
   <h2 id="what-18f-has-accomplished">What 18F has accomplished</h2>
   <h3 id="myuscis">MyUSCIS</h3>
-  <p><img src="/assets/img/projects/myuscis.jpg" alt="A screenshot of the MyUSCIS homepage."></p>
+  <p>{% image "assets/img/projects/myuscis.jpg" "A screenshot of the MyUSCIS homepage." %}</p>
   <p>We helped the U.S. Citizenship and Immigration Services (USCIS) launch <a href="https://my.uscis.gov">myUSCIS</a>, a platform that allows users to easily access information about the immigration process and find immigration options for which they may qualify. Re-imagining the immigration process meant moving from a form-centric website to a human-centric one. We worked closely with USCIS across multiple disciplines to create a suite of resources and tools to demystify the naturalization process, move application forms online, and design an improved account system for applicants.</p>
 
   <h3 id="betafec">BetaFEC</h3>
-  <p><img src="/assets/img/projects/beta-fec.jpg" alt="A screenshot of the betaFEC homepage"></p>
+  <p>{% image "assets/img/projects/beta-fec.jpg" "A screenshot of the betaFEC homepage" %}</p>
   <p>The <a href="https://beta.fec.gov">Federal Election Commission (FEC)</a> has long been a pioneer of open data, but 18F was able to help the FEC build its first public API and a new website on top of that API. This site helps make campaign finance information more accessible to the public, as part of a larger redesign of the FEC’s online presence. <a href="https://18f.gsa.gov/2015/10/29/welcome-to-betafec/">Read more about the site and why we’ve released it as a beta</a>.</p>
   <h3 id="college-scorecard">College Scorecard</h3>
-  <p><img src="/assets/img/projects/college-scorecard.jpg" alt="A screenshot of the college scorecard"></p>
+  <p>{% image "assets/img/projects/college-scorecard.jpg" "A screenshot of the college scorecard" %}</p>
   <p>The <a href="https://collegescorecard.ed.gov/">College Scorecard</a> site is an example of what 18F can do to help your agency provide an interactive, well-designed way for the public to access your data. We worked with the U.S. Digital Service and the Department of Education to build College Scorecard to give students and their families access to previously unreleased data about colleges and universities so they can make better decisions. The site is built on top of a public API, which also allows private individuals and companies to use the data. <a href="https://18f.gsa.gov/2015/09/14/college-scorecard-launch/">Read more about the College Scorecard project</a>.</p>
 
   <h3 id="u-s-web-design-system">U.S. Web Design System</h3>
-  <p><img src="/assets/img/projects/draft-us-web-design-standards.png" alt="A screenshot of standards.usa.gov"></p>
+  <p>{% image "assets/img/projects/draft-us-web-design-standards.png" "A screenshot of standards.usa.gov" %}</p>
   <p>In collaboration with the U.S. Digital Service, we created <a href="https://designsystem.digital.gov/">a collection of design patterns and user interface toolkits</a> to help agencies focus on building their website or application without reinventing trustable, accessible solutions to common government problems. The Design System includes typography and color recommendations that are compliant with <a href="http://www.section508.gov/">Section 508 of the Rehabilitation Act (the federal standard for accessibility)</a>, as well as a collection of foundational interface elements for government sites and the code that powers them. We have blogged about <a href="https://18f.gsa.gov/tags/web-design-standards/">our work on the Design Systems several times</a>.</p>
 
   <h3 id="analytics-usa-gov">analytics.usa.gov</h3>
-  <p><img src="/assets/img/projects/analytics-usa-gov.png" alt="A screenshot of the analytics.usa.gov homepage."></p>
+  <p>{% image "assets/img/projects/analytics-usa-gov.png" "A screenshot of the analytics.usa.gov homepage." %}</p>
   <p>You can now view a <a href="https://analytics.usa.gov">dashboard of analytics data</a> from the websites of agencies participating in GSA&#39;s Digital Analytics Program. The basic dashboard has three views: one showing how many people are on government websites <em>right now</em>; the other two show the most popular pages on government sites in the last seven and 30 days. In 2016, we added agency-specific pages to the dashboard, allowing users to see the same data for several departments as well as across the entire government. This open source project has been <a href="https://18f.gsa.gov/2016/01/06/tips-for-adapting-analytics-usa-gov/">adapted for use in other city and state governments</a>.</p>
 
   <h3 id="cloud-gov">cloud.gov</h3>
-  <p><img src="/assets/img/projects/cloud-gov.png" alt="A screenshot of the cloud.gov homepage"></p>
+  <p>{% image "assets/img/projects/cloud-gov.png" "A screenshot of the cloud.gov homepage" %}</p>
   <p><a href="https://cloud.gov">cloud.gov</a> includes a Platform-as-a-Service (PaaS) specifically built for government, based on the open source Cloud Foundry. It provides a secure, scalable platform for teams to build and host their application or website. It can help development teams work faster and cheaper by handling much of their deployment complexity. The cloud.gov platform is currently in a small pilot program, but we will be expanding access over time.</p>
 
   <h3 id="wage-and-hour-division-field-operations-handbook">Wage and Hour Division Field Operations Handbook</h3>
-  <p><img src="/assets/img/projects/dol-handbook.jpg" alt="The 18F team working with Department of Labor staff in the GSA headquarters."></p>
+  <p>{% image "assets/img/projects/dol-handbook.jpg" "The 18F team working with Department of Labor staff in the GSA headquarters." %}</p>
   <p><a href="https://18f.gsa.gov/2015/09/09/how-a-two-day-spring-moved-an-agency-twenty-years-forward/">In two days</a>, our consulting team was able to work with a team at the Department of Labor’s Wage and Hour Division to take the four-volume, printed Field Operations Handbook and create an internal prototype of an online, searchable version. We were also able to demonstrate the power of using agile design and development methods.</p>
 
   <h3 id="rfp-ghostwriting-with-the-state-of-california">RFP Ghostwriting with the State of California</h3>
-  <p><img src="/assets/blog/ca-child-welfare/ca-team.jpg" alt="The California, Code for America, and 18F team after the workshop."></p>
+  <p>{% image "assets/blog/ca-child-welfare/ca-team.jpg" "The California, Code for America, and 18F team after the workshop." %}</p>
   <p>We partnered with the Department of Health and Human Services, the State of California, and Code for America <a href="https://18f.gsa.gov/2016/03/22/helping-california-buy-a-new-child-welfare-system/">to draft a request for proposal (RFP) to fix the state&#39;s child welfare case management system</a>. This system is used by more than 20,000 social workers to track and manage the more than 500,000 cases of child abuse and neglect that are reported in California each year. 18F&#39;s two-day RFP ghostwriting workshop got stakeholders on board with modular contracting and modern development methodologies, and helped the state trim their initial 1,500 page RFP into two 70-page documents.</p>
 
   <h3 id="every-kid-in-a-park">Every Kid in a Park</h3>

content/pages/work-with-us.html

@@ -73,9 +73,7 @@ <h2>Transform the way you work</h2>
         {{ ask-qs | markdownify }}
       </div>
       <div class="tablet-lg:grid-col-5">
-        <img src="{{ site.baseurl }}/assets/img/work-with-us/work-with-us-illo-2.svg"
-        alt=""
-        >
+        {% image "assets/img/work-with-us/work-with-us-illo-2.svg" "" %}
       </div>
     </div>
   </div>
@@ -88,9 +86,7 @@ <h2>Transform the way you work</h2>
          {{ mission-path | markdownify }}
       </div>
       <div class="tablet-lg:grid-col-5">
-        <img src="{{ site.baseurl }}/assets/img/work-with-us/work-with-us-illo-1.svg"
-        alt=""
-        >
+        {% image "assets/img/work-with-us/work-with-us-illo-1.svg" "" %}
       </div>
     </div>
     <h3 class="text-normal"> Feel empowered to continue with our guides</h3>
@@ -126,9 +122,7 @@ <h3 class="text-normal"> Feel empowered to continue with our guides</h3>
          {{ tech-adapt | markdownify }}
       </div>
       <div class="tablet-lg:grid-col-5">
-        <img src="{{ site.baseurl }}/assets/img/work-with-us/work-with-us-illo-3.svg"
-        alt=""
-        >
+        {% image "assets/img/work-with-us/work-with-us-illo-3.svg" "" %}
       </div>
     </div>
     <h3 class="text-normal">Read related case studies</h3>

content/posts/2014-09-04-a-new-look-at-the-freedom-of-information-act.md

@@ -5,8 +5,6 @@ tumblr_url: http://18fblog.tumblr.com/post/96625804492/a-new-look-at-the-freedom
 
 title: "A new look at the Freedom of Information Act"
 
-image: /assets/blog/foia/in-hand.jpg
-
 description: "As demand for information continues to grow, it is important to continue iterating the ways we refine the FOIA request process. Our effort is one of a number of commitments towards creating a more open, transparent government. We will explore how to supplement the work that has already been done by creating tools to improve the online FOIA requests process by designing for the user."
 excerpt: "As demand for information continues to grow, it is important to continue iterating the ways we refine the FOIA request process. Our effort is one of a number of commitments towards creating a more open, transparent government. We will explore how to supplement the work that has already been done by creating tools to improve the online FOIA requests process by designing for the user."
 
@@ -34,7 +32,7 @@ Since 1966, the [Freedom of Information Act](http://www.foia.gov/about.html), FO
 As demand for information continues to grow, it is important to continue iterating the ways we refine the FOIA request process. Our effort is one of a number of [commitments (PDF)](https://obamawhitehouse.archives.gov/sites/default/files/docs/us_national_action_plan_6p.pdf) towards creating a more open, transparent government. We will explore how to supplement the work that has already been done by creating tools to improve the online FOIA requests process by designing for the user.
 
 <figure>
-  <img src="{{ site.baseurl }}/assets/blog/foia/in-hand.jpg" alt="a mockup of our app on an iPhone">
+  {% image "assets/blog/foia/in-hand.jpg" "A mockup of our app on an iPhone" %}
   <figcaption>An illustrative prototype running on a mobile device (the logo in the photo is not a live URL)</figcaption>
 </figure>
 

content/posts/2014-09-18-getting-to-work-for-the-american-people.md

@@ -94,7 +94,7 @@ Attracting great digital talent
 -------------------------------
 
 <figure>
-  <img src="{{ site.baseurl }}/assets/blog/getting-to-work/18fdc-pif.jpg" alt="18F's DC troop">
+  {% image "assets/blog/getting-to-work/18fdc-pif.jpg" "18F's DC troop" %}
   <figcaption>The DC team at GSA HQ</figcaption>
 </figure>
 

content/posts/2014-12-18-a-complete-list-of-gov-domains.md

@@ -19,7 +19,7 @@ tags:
 ---
 
 <figure>
-  <img src="{{site.baseurl}}/assets/blog/dotgovs/dot-govs-screen.png" alt="A section of a spreadsheet of the .gov domain list">
+  {% image "assets/blog/dotgovs/dot-govs-screen.png" "A section of the .gov domain list in a spreadsheet" %}
   <figcaption>Excerpt of the <a href="https://github.com/GSA/data/blob/master/dotgov-domains/current-full.csv">.gov domain list (CSV)</a></figcaption>
 </figure>
 

content/posts/2015-01-16-open-source-for-good-government.md

@@ -2,7 +2,6 @@
 title: Open source for good government
 date: '2015-01-16'
 layout: post
-image: /assets/blog/join-us/18f_govuk.png
 hero: false
 tags:
 - open source
@@ -16,7 +15,7 @@ description: 'Organizations like 18F and the U.K.’s Government Digital Service
 
 excerpt: 'Organizations like 18F and the U.K.’s Government Digital Service (GDS) fully embrace open source, and their combined commitment to openness and transparency is transforming the delivery of government digital services in both countries.'
 ---
-<img src="{{ site.baseurl }}/assets/blog/join-us/18f_govuk.png" alt="18F and GDS logos">
+{% image "assets/blog/join-us/18f_govuk.png" "18F and GDS logos" %}
 
 A common misconception of open source is that it is just a licence for using software. For individuals and organizations involved with open source projects, it is a philosophy of openness and collaboration embedded in the project from idea to launch. Whether it’s designing an interface, or deploying an application, open source is fundamental to everything we do. Organizations like 18F and the U.K.’s Government Digital Service (GDS) fully embrace open source, and this commitment to openness and transparency is transforming the delivery of government digital services in both countries.
 

content/posts/2015-05-19-five-questions-with-dan-brown.md

@@ -19,7 +19,9 @@ image: /assets/blog/speaker-series/d-brown.jpg
 hero: false
 ---
 
-<div class="align-left"><img alt="Dan Brown" src="/assets/blog/speaker-series/d-brown.jpg"></div>
+<div class="align-left">
+  {% image "assets/blog/speaker-series/d-brown.jpg" "Dan Brown" %}
+</div>
 
 Dan Brown, co-founder of D.C.-based design firm [EightShapes](http://eightshapes.com/) and author of “[Communicating Design](http://www.amazon.com/Communicating-Design-Developing-Documentation-Planning/dp/0321712463)” and “[Designing Together](http://www.amazon.com/Designing-Together-collaboration-management-professionals/dp/0321918630/ref=sr_1_1?s=books&ie=UTF8&qid=1431552817&sr=1-1&keywords=Designing+Together+Dan+Brown),” is fascinated by conflict — but not in the way you might think. Brown has spent years studying how and why conflict arises in the workplace, its centrality to good design, the differences between healthy and unhealthy conflict, and more.
 

content/posts/2015-08-31-how-playing-with-legos-taught-executives-agile.md

@@ -56,7 +56,7 @@ what agile is. One must experience it for oneself. It was time for the
 red pill.
 
 <div style="text-align:center">
-<img src="{{ site.baseurl }}/assets/blog/lego-workshop/red-pill.gif" alt="The red and blue pill from The Matrix">
+{% image "assets/blog/lego-workshop/red-pill.gif" "The red and blue pill from The Matrix" %}
 </div>
 
 We split the group into two teams and told them that, in the next 90

content/posts/2015-12-03-power-of-mindset-normatives-matthew-milan.md

@@ -20,7 +20,9 @@ What changed?
 
 In short, *how* Engelbart’s unique mindset was presented shifted his colleagues’ opinion of him. Stewart Brand, editor of the Whole Earth Catalog and co-founder of the Long Now Foundation, helped to shape Engelbart’s raw material into a presentation that was direct, convincing, and easy to comprehend.
 
-<div style="float: right; margin-left: 10px;"><img src="{{ site.baseurl }}/assets/blog/speaker-series/matthew-milan.jpg" alt="Matthew Milan"></div>
+<div style="float: right; margin-left: 10px;">
+  {% image "assets/blog/speaker-series/matthew-milan.jpg" "Matthew Milan" %}
+</div>
 
 This concept — the transformative power of shared mindset — was the focus of Matthew Milan’s recent talk for the 18F Design Presents speaker series. Milan, founder of and design leader at software design firm [Normative](http://www.normative.com/), has fifteen years’ experience in the domain of emerging technologies, and he excels at translating complex information into compelling user experiences.
 

content/posts/2016-02-29-informing-the-future-of-the-federal-front-door.md

@@ -154,7 +154,10 @@ websites and services.
 
 
 <div style="float: right; margin-left: 10px; margin-bottom: 10px;">
-  <img src="{{site.baseurl}}/assets/blog/federal-front-door/image01.jpg" alt="A two-by-two grid showing how people think when confidence is plotted against resilience. When confidence and resilience are both high, people &ldquo;will keep trying until a goal is achieved.&rdquo; When confidence is high but resilience is low, people may apply once but will give up if it doesn't go well. With resilience high and low confidence, people may try a few times but will doubt themselves. And when both resilience and confidence are low, they probably won't apply at all.">
+<figure>
+{% image "assets/blog/federal-front-door/image01.jpg" "A two-by-two grid showing how people think when confidence is plotted against resilience." %}
+<figcaption> When confidence and resilience are both high, people &ldquo;will keep trying until a goal is achieved.&rdquo; When confidence is high but resilience is low, people may apply once but will give up if it doesn't go well. With resilience high and low confidence, people may try a few times but will doubt themselves. And when both resilience and confidence are low, they probably won't apply at all.</figcaption>
+</figure>
 </div>
 
 Before using a government service or applying for benefits, people

content/posts/2016-07-14-elaine-kamlley-a-developer-commited-diversity.md

@@ -11,11 +11,10 @@ front-end developer and a member of our Outreach Team"
 description: "All throughout the summer, we’ll be profiling members
 across the 18F team. We’re starting with Elaine Kamlley, who is both a
 front-end developer and a member of our Outreach Team*.*"
-image: /assets/img/team/elaine.jpg
 hero: false
 ---
 <figure class="align-right">
-	<img src="{{site.baseurl}}{{page.image}}" alt="Profile photo for Elaine Kamlley.">
+	{% image "assets/img/team/elaine.jpg" "Elaine Kamlley." %}
 	<figcaption class="align-center">Elaine Kamlley, 18F team member</figcaption>
 </figure>
 

content/posts/2016-07-19-strategies-for-starting-your-own-writing-lab.md

@@ -14,7 +14,7 @@ hero: false
 ---
 
 <figure>
-	<img src="{{site.baseurl}}/assets/blog/writing-lab/writing-lab-screenshot.png" alt="Screen shot of writing lab GitHub page">
+	{% image "assets/blog/writing-lab/writing-lab-screenshot.png" "Screenshot of a GitHub page" %}
 	<figcaption>The internal README of the 18F Writing Lab</figcaption>
 </figure>
 <br>

content/posts/2016-07-21-buying-better-digital-products-part-1-proto-personas-and-understanding-the-problem.md

@@ -68,7 +68,7 @@ strategic planning internally but should not be viewed as a substitute
 for talking with actual users.
 
 <figure>
-	<img src="{{site.baseurl}}/assets/blog/digital-acquisition-accelerator/persona-template.jpg" alt="A persona template for participants.">
+	{% image "assets/blog/digital-acquisition-accelerator/persona-template.jpg" "A card-shaped template with blanks for name, age, role, goals & objectives, behaviors, and traits." %}
 	<figcaption>Example of template used by participants to fill out key traits of users.</figcaption>
 </figure><br>
 
@@ -78,7 +78,7 @@ they were asked to create a name then outline that user’s demographic
 information, needs, and goals as well as behaviors and beliefs, like
 below:
 
-<img alt="A template for sketching personas to give to participants." src="{{site.baseurl}}/assets/blog/digital-acquisition-accelerator/persona-sketch.jpg"><br>
+{% image "assets/blog/digital-acquisition-accelerator/persona-sketch.jpg" "A template with four quadrants: demographic information; name and sketch; needs and goals; and behaviors and beliefs." %}<br>
 
 Then, agency teams determined a series of 5-7 traits to compare across
 proto-personas. Using these traits, teams narrowed down their options
@@ -92,7 +92,7 @@ for the solicitation in the coming weeks. Here’s an example of a
 completed persona:
 
 <figure>
-	<img src="{{site.baseurl}}/assets/blog/digital-acquisition-accelerator/complete-persona.jpg" alt="A completed proto-persona" />
+	{% image "assets/blog/digital-acquisition-accelerator/complete-persona.jpg" "A proto-persona card for Susan Kennedy, 36, Director of Accounts, with a photo and completed sections for goals & objectives, behaviors, and traits." %}
 	<figcaption>Example of proto-persona</figcaption>
 </figure>
 

content/posts/2016-07-26-buying-better-digital-products-part-2-setting-the-product-vision-and-strategy.md

@@ -62,7 +62,7 @@ product. As the sticky notes piled up, the teams clustered similar ideas
 together and labeled those groups.
 
 <figure>
-	<img src="{{ site.baseurl }}/assets/blog/digital-acquisition-accelerator/combining-labeling.jpg" alt="A diagram of culstered post-its.">
+	{% image "assets/blog/digital-acquisition-accelerator/combining-labeling.jpg" "A diagram of culstered post-its." %}
 	<figcaption>Example of combining and labeling clusters</figcaption>
 </figure><br>