<style>
    @media screen and (max-width: 768px) {
        .ph-p {
            background-image: url(https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_mobile_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok&#x3D;XzPWArjL&amp;amp;timestamp&#x3D;1469541909);
        }
    }
    
    @media screen and (min-width: 768px) {
        .ph-p {
            background-image: url(https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_tablet_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok&#x3D;g19HCDkD&amp;amp;timestamp&#x3D;1469541909);
        }
    }
    
    @media screen and (min-width: 1024px) {
        .ph-p {
            background-image: url(https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_desktop_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok&#x3D;GJmuhNoE&amp;amp;timestamp&#x3D;1469541909);
        }
    }
    
    @media screen and (min-width: 1200px) {
        .ph-p {
            background-image: url(https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_wide_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok&#x3D;nWpQdSFD&amp;amp;timestamp&#x3D;1469541909);
        }
    }
</style>

<div class="b b--fw">
    <div class="ph ph--wc">
        <div class="ph-p"></div>
        <div class="ph-c">
            <div class="h2 tt-u m-b200">This is the title</div>
            <div class="t--info m-b200">Here&#x27;s a caption of the photo</div>
            <div class="t--legal tt-u">Photo Credit: The Digital Team</div>
        </div>
    </div>
</div>
{{#if image}}
  <style>
    @media screen and (max-width: 768px) {
      .ph-p {
        background-image: url({{image.mobile1x}});
      }
    }

    @media screen and (min-width: 768px) {
      .ph-p {
        background-image: url({{image.tablet1x}});
      }
    }

    @media screen and (min-width: 1024px) {
      .ph-p {
        background-image: url({{image.desktop1x}});
      }
    }

    @media screen and (min-width: 1200px) {
      .ph-p {
        background-image: url({{image.wide1x}});
      }
    }
  </style>
{{/if}}

<div class="b b--fw">
  <div class="ph{{#if has_caption}} ph--wc{{/if}}">
    <div class="ph-p"></div>
    {{#if has_caption}}
      <div class="ph-c">
        <div class="h2 tt-u m-b200">{{ title }}</div>
        <div class="t--info m-b200">{{ caption }}</div>
        <div class="t--legal tt-u">Photo Credit: {{ credit }}</div>
      </div>
    {{/if}}
  </div>
</div>
{
  "short_title": "Love your block",
  "cta": {
    "text": "Here's a link",
    "link": "https://www.boston.gov"
  },
  "image": {
    "wide1x": "https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_wide_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok=nWpQdSFD&amp;timestamp=1469541909",
    "desktop1x": "https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_desktop_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok=GJmuhNoE&amp;timestamp=1469541909",
    "tablet1x": "https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_tablet_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok=g19HCDkD&amp;timestamp=1469541909",
    "mobile1x": "https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_mobile_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok=XzPWArjL&amp;timestamp=1469541909"
  },
  "has_caption": true,
  "title": "This is the title",
  "caption": "Here's a caption of the photo",
  "credit": "The Digital Team"
}

There are no notes for this item.