hero img improvements

Author: kaitlinnewson

_data/conf.yml

@@ -12,10 +12,11 @@ online-only-conference: false
 ###########################
 # Hero
 ###########################
-# Place hero image in /assets/img/theme-images/
+# Place hero image in /assets/img/theme-images/. Includes optional webp format.
 hero-image-filename: 'buffalo.png'
 hero-image-source: ''
-hero-image-alt: ''
+hero-image-filename-webp: 'buffalo.webp'
+hero-image-alt: 'The skyline of Buffalo, New York. White lightning bolts and stars are in the background, representing the Buffalo city flag.'
 
 image-attributions:
   - attribution:

_includes/homepage/jumbotron.html

@@ -2,7 +2,12 @@
 <div class="jumbotron">
 
     <div class="hero-image">
-        <img src="/assets/img/theme-images/{{ site.data.conf.hero-image-filename | site.data.conf.hero-image-source }}" alt="{{ site.data.conf.hero-image-alt }}">
+        <picture>
+            {% if site.data.conf.hero-image-filename-webp != empty %}
+            <source srcset="/assets/img/theme-images/{{ site.data.conf.hero-image-filename-webp }}" type="image/webp">
+            {% endif %}
+            <img src="/assets/img/theme-images/{{ site.data.conf.hero-image-filename | site.data.conf.hero-image-source }}" alt="{{ site.data.conf.hero-image-alt }}">
+        </picture>
     </div>
 
     <div class="container-fluid">

assets/_scss/_homepage.scss

@@ -70,6 +70,8 @@
 .hero-image img {
   height: 100%;
   width: auto;
+  object-fit: cover;
+  object-position: top right; 
 }
 
 /*
@@ -78,7 +80,7 @@
  2019 note: This math did not work out for a 2876x913 image, where min-width in line 152 should have, according to above math, been 1020. Instead 1160 is the number that works with this year's hero image.
  */
 
-@media (min-width: 1160px) {
+@media (min-width: 890px) {
   .hero-image img {
     width: 100%;
   }