Migrate some image tags

_data/agencies.yml

@@ -1,144 +1,144 @@
 -
   name: U.S. Air Force
   acronym: USAF
-  logo: usaf.png
+  logo: assets/img/logos/agencies/usaf.png
   featured: true
 -
   name: U.S. Army
-  logo: us-army.png
+  logo: assets/img/logos/agencies/us-army.png
 -
   name: U.S. Marine Corps
   acronym: USMC
-  logo: usmc.png
+  logo: assets/img/logos/agencies/usmc.png
 -
   name: U.S. Navy
-  logo: us-navy.png
+  logo: assets/img/logos/agencies/us-navy.png
 -
   name: Centers for Medicare and Medicaid Services
-  logo: centers-for-medicare-and-medicaid.png
+  logo: assets/img/logos/agencies/centers-for-medicare-and-medicaid.png
 -
   name: Consumer Financial Protection Bureau
   acronym: CFPB
-  logo: cfpb.png
+  logo: assets/img/logos/agencies/cfpb.png
 -
   name: Department of Agriculture
   acronym: USDA
-  logo: USDA.svg
+  logo: assets/img/logos/agencies/USDA.svg
 -
   name: Department of Education
-  logo: USDE.png
+  logo: assets/img/logos/agencies/USDE.png
 -
   name: Department of Health and Human Services
   acronym: HHS
-  logo: USDHHS.png
+  logo: assets/img/logos/agencies/USDHHS.png
   featured: true
 -
   name: Department of the Interior
   acronym: DOI
-  logo: USDOI.svg
+  logo: assets/img/logos/agencies/USDOI.svg
   featured: true
 -
   name: Department of Justice
   acronym: DOJ
-  logo: USDOJ.png
+  logo: assets/img/logos/agencies/USDOJ.png
   featured: true
 -
   name: Department of State
-  logo: USDS.png
+  logo: assets/img/logos/agencies/USDS.png
 -
   name: Department of the Treasury
-  logo: USDT.png
+  logo: assets/img/logos/agencies/USDT.png
 -
   name: Federal Bureau of Investigation
   acronym: FBI
-  logo: fbi.png
+  logo: assets/img/logos/agencies/fbi.png
 -
   name: Federal Election Commission
   acronym: FEC
-  logo: fec.svg
+  logo: assets/img/logos/agencies/fec.svg
 -
   name: Federal Emergency Management Agency
   acronym: FEMA
-  logo: fema.png
+  logo: assets/img/logos/agencies/fema.png
 -
   name: Federal Retirement Thrift Investment Board
-  logo: frtib.png
+  logo: assets/img/logos/agencies/frtib.png
 -
   name: General Services Administration
   acronym: GSA
-  logo: gsa-logo.svg
+  logo: assets/img/logos/agencies/gsa-logo.svg
 -
   name: National Geospatial-Intelligence Agency
   acronym: NGA
-  logo: nga.png
+  logo: assets/img/logos/agencies/nga.png
 -
   name: National Institute of Standards and Technology
   acronym: NIST
-  logo: nist.png
+  logo: assets/img/logos/agencies/nist.png
 -
   name: National Oceanic and Atmospheric Administration
   acronym: NOAA
-  logo: noaa.png
+  logo: assets/img/logos/agencies/noaa.png
 -
   name: National Science Foundation
   acronym: NSF
-  logo: nsf.png
+  logo: assets/img/logos/agencies/nsf.png
 -
   name: The Library of Congress
-  logo: loc.png
+  logo: assets/img/logos/agencies/loc.png
 -
   name: U.S. Tax Court
-  logo: tax-court.png
+  logo: assets/img/logos/agencies/tax-court.png
 -
   name: Environmental Protection Agency
   acronym: EPA
-  logo: EPA.png
+  logo: assets/img/logos/agencies/EPA.png
 -
   name: National Aeronautics and Space Administration
   acronym: NASA
-  logo: NASA.svg
+  logo: assets/img/logos/agencies/NASA.svg
 -
   name: National Archives and Records Administration
   acronym: NARA
-  logo: NARA.png
+  logo: assets/img/logos/agencies/NARA.png
 -
   name: Nuclear Regulatory Commission
-  logo: NRC.svg
+  logo: assets/img/logos/agencies/NRC.svg
 -
   name: Office of Management and Budget
   acronym: OMB
-  logo: OMB.svg
+  logo: assets/img/logos/agencies/OMB.svg
   featured: true
 -
   name: Office of Personnel Management
   acronym: OPM
-  logo: OPM.svg
+  logo: assets/img/logos/agencies/OPM.svg
 -
   name: Alaska Department of Health and Social Services
-  logo: alaska-dhss.png
+  logo: assets/img/logos/agencies/alaska-dhss.png
 -
   name: California Child Welfare Digital Services
   acronym: CWDS
-  logo: cwds.png
+  logo: assets/img/logos/agencies/cwds.png
 -
   name: State of Vermont Agency of Human Services
-  logo: vermont.png
+  logo: assets/img/logos/agencies/vermont.png
 -
   name: Securities and Exchange Commission
   acronym: SEC
-  logo: SEC.svg
+  logo: assets/img/logos/agencies/SEC.svg
 -
   name: Small Business Administration
   acronym: SBA
-  logo: SBA.svg
+  logo: assets/img/logos/agencies/SBA.svg
 -
   name: Social Security Administration
-  logo: SSA.png
+  logo: assets/img/logos/agencies/SSA.png
 -
   name: State of Wisconsin
-  logo: wisconsin.svg
+  logo: assets/img/logos/agencies/wisconsin.svg
   featured: true
 -
   name: U.S. Postal Service
   acronym: USPS
-  logo: USPS.svg
+  logo: assets/img/logos/agencies/USPS.svg

_data/guides.yml

@@ -7,26 +7,26 @@
   description: "Make websites more accessible so everyone can use them."
   promoted: false
   image:
-    light: "/assets/img/guides/accessibility-lightest.svg"
-    dark: "/assets/img/guides/accessibility-darker.svg"
+    light: "assets/img/guides/accessibility-lightest.svg"
+    dark: "assets/img/guides/accessibility-darker.svg"
     hero: ""
 
 - name: "Agile"
   link: "https://guides.18f.gov/agile/"
   description: "Move toward an agile approach to stay within budget and provide value to the public."
   promoted: false
   image:
-    light: "/assets/img/guides/agile-lightest.svg"
-    dark: "/assets/img/guides/agile-darker.svg"
+    light: "assets/img/guides/agile-lightest.svg"
+    dark: "assets/img/guides/agile-darker.svg"
     hero: ""
 
 - name: "Content"
   link: "https://guides.18f.gov/content-guide/"
   description: "Create content in plain language to help the public save time and build trust."
   promoted: false
   image:
-    light: "/assets/img/guides/content-lightest.svg"
-    dark: "/assets/img/guides/content-darker.svg"
+    light: "assets/img/guides/content-lightest.svg"
+    dark: "assets/img/guides/content-darker.svg"
     hero: ""
 
 - name: "Derisking"
@@ -35,41 +35,41 @@
   promoted: true
   image:
     light: ""
-    dark: "/assets/img/guides/derisking-darker.svg"
-    hero: "/assets/img/guides/derisking-hero.svg"
+    dark: "assets/img/guides/derisking-darker.svg"
+    hero: "assets/img/guides/derisking-hero.svg"
 
 - name: "Design Methods"
   link: "https://guides.18f.gov/methods/"
   description: "Involve the people who will use your service in the design process."
   promoted: true
   image:
     light: ""
-    dark: "/assets/img/guides/design-methods-darker.svg"
-    hero: "/assets/img/guides/design-methods-hero.svg"
+    dark: "assets/img/guides/design-methods-darker.svg"
+    hero: "assets/img/guides/design-methods-hero.svg"
 
 - name: "Engineering"
   link: "https://guides.18f.gov/engineering"
   description: "Develop secure software in the cloud, which can reduce costs and scale to meet public need."
   promoted: false
   image:
     light: ""
-    dark: "/assets/img/guides/engineering-darker.svg"
+    dark: "assets/img/guides/engineering-darker.svg"
     hero: ""
 
 - name: "Product"
   link: "https://guides.18f.gov/product"
   description: "Support a team to deliver the right product to the right audience."
   promoted: false
   image:
-    light: "/assets/img/guides/product-lightest.svg"
-    dark: "/assets/img/guides/product-darker.svg"
+    light: "assets/img/guides/product-lightest.svg"
+    dark: "assets/img/guides/product-darker.svg"
     hero: ""
 
 - name: "User Experience"
   link: "https://guides.18f.gov/ux-guide/"
   description: "Make your products and services work for the people that use them."
   promoted: false
   image:
-    light: "/assets/img/guides/ux-lightest.svg"
-    dark: "/assets/img/guides/ux-darker.svg"
+    light: "assets/img/guides/ux-lightest.svg"
+    dark: "assets/img/guides/ux-darker.svg"
     hero: ""

_data/social_media.yml

@@ -2,23 +2,23 @@
   platform: GitHub
   link: https://github.com/18F
   image:
-    light: /assets/img/social-icons/svg/github-lightest.svg
-    dark: /assets/img/social-icons/svg/github-darkest.svg
+    light: assets/img/social-icons/svg/github-lightest.svg
+    dark: assets/img/social-icons/svg/github-darkest.svg
 -
   platform: Twitter
   link: https://twitter.com/18F
   image:
-    light: /assets/img/social-icons/svg/twitter-lightest.svg
-    dark: /assets/img/social-icons/svg/twitter-darkest.svg
+    light: assets/img/social-icons/svg/twitter-lightest.svg
+    dark: assets/img/social-icons/svg/twitter-darkest.svg
 -
   platform: LinkedIn
   link: https://www.linkedin.com/company/gsa18f
   image:
-    light: /assets/img/social-icons/svg/linkedin-lightest.svg
-    dark: /assets/img/social-icons/svg/linkedin-darkest.svg
+    light: assets/img/social-icons/svg/linkedin-lightest.svg
+    dark: assets/img/social-icons/svg/linkedin-darkest.svg
 -
   platform: RSS feed
   link: /feed/
   image:
-    light: /assets/img/social-icons/svg/rss-lightest.svg
-    dark: /assets/img/social-icons/svg/rss25.svg
+    light: assets/img/social-icons/svg/rss-lightest.svg
+    dark: assets/img/social-icons/svg/rss25.svg

_includes/card-project.html

@@ -1,38 +1,31 @@
 {% comment %}
 This partial outputs a card that displays a project title, the associated agency logo, and an excerpt. The expected argument for this partial is the markdown file name for the project, which is in the "_services_projects" directory.
 {% endcomment %}
-
 {% assign project = collections.services | where: 'fileSlug', project_id | first %}
-
 <div class="usa-card__container">
-  <header class="usa-card__header">
-    {% comment %}
-      code smell: nil checks / timid code
-      This template is uncertain about the presence of project.data.agency, agency.logo, project.url, and project.data.title. If any of those are missing, this template doesn't work or look good.
-
-      A better way to handle would be to enforce some data guarantees in a pre-build stage, or have the
-      template error out.
-    {% endcomment %}
-    {% if project.data.agency %}
-      <div class="display-flex flex-align-center">
-        {% assign agency = agencies | where: "name", project.data.agency | first %}
-        {% if agency.logo %}
-        <img src="/assets/img/logos/agencies/{{ agency.logo }}"
-             class="maxw-8 margin-right-2"
-             alt=""
-        >
-        {% endif %}
-        <p class="line-height-sans-2 text-bold margin-top-0">{{ agency.name }}</p>
-      </div>
-    {% endif %}
-    {% if project.url and project.data.title %}
-    <a href="{{ project.url }}">
-      <h3 class="margin-top-3 text-bold">{{ project.data.title }}</h3>
-    </a>
+<header class="usa-card__header">
+  {% comment %}
+  code smell: nil checks / timid code
+  This template is uncertain about the presence of project.data.agency, agency.logo, project.url, and project.data.title. If any of those are missing, this template doesn't work or look good.
+  A better way to handle would be to enforce some data guarantees in a pre-build stage, or have the
+  template error out.
+{% endcomment %}
+{% if project.data.agency %}
+  <div class="display-flex flex-align-center">
+    {% assign agency = agencies | where: "name", project.data.agency | first %}
+    {% if agency.logo %}
+      {% image_with_class agency.logo "maxw-8 margin-right-2" "" %}
     {% endif %}
-  </header>
-
-  <div class="usa-card__body">
-    <p class="margin-top-2">{{ project.data.excerpt }}</p>
+    <p class="line-height-sans-2 text-bold margin-top-0">{{ agency.name }}</p>
   </div>
+{% endif %}
+{% if project.url and project.data.title %}
+  <a href="{{ project.url }}">
+    <h3 class="margin-top-3 text-bold">{{ project.data.title }}</h3>
+  </a>
+{% endif %}
+</header>
+<div class="usa-card__body">
+<p class="margin-top-2">{{ project.data.excerpt }}</p>
+</div>
 </div>

_includes/card-with-image-guides.html

@@ -48,18 +48,15 @@
   <!--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 %}
 
   <div class="padding-4 display-flex flex-column flex-align-stretch card-content">
     <div class="margin-bottom-2 display-flex flex-align-center {%- if image_side == "right" %} flex-justify {% endif %} height-full">
-
+      {% capture image_class %}{%- if image_size == "md" -%}maxw-8 height-8 {%- else -%} maxw-6 height-6 {%- endif %} margin-top-0 {%- unless image_side == "right" %} margin-right-2 {% endunless %}{% endcapture %}
       {% capture card_image %}
-      <img src="{{ site.baseurl }}{{image_path}}"
-          class="{%- if image_size == "md" -%}maxw-8 height-8 {%- else -%} maxw-6 height-6 {%- endif %} margin-top-0 {%- unless image_side == "right" %} margin-right-2 {% endunless %}"
-          alt="{{- image_alt_text -}}"
-      >
+        {% image_with_class image_path image_class image_alt_text %}
       {% endcapture %}
 
       {% capture card_text %}

_includes/card-with-image.html

@@ -34,11 +34,9 @@
 >
 <div class="display-flex flex-align-center {%- if image_side == "right" %} flex-justify {% endif %} height-full padding-4 radius-lg">
 
+  {% capture image_class %}{%- if image_size == "md" -%} maxw-8 height-8 {%- else -%} maxw-6 height-6 {%- endif %} margin-top-0 {%- unless image_side == "right" %} margin-right-2 {% endunless %}{% endcapture %}
   {% capture card_image %}
-  <img src="{{ site.baseurl }}{{ image_path }}"
-       class="{%- if image_size == "md" -%} maxw-8 height-8 {%- else -%} maxw-6 height-6 {%- endif %} margin-top-0 {%- unless image_side == "right" %} margin-right-2 {% endunless %}"
-       alt="{{- image_alt_text -}}"
-  >
+    {% image_with_class image_path image_class image_alt_text %}
   {% endcapture %}
 
   {% capture card_text %}