{% capture img_attrs %}
?nf_resize={{ include.mode | default: 'fit' }}
&w={{ include.w | default: 790 }}
{% if include.h %}&h={{ include.h }}{% endif %}
{% endcapture %}
<div class="responsive-image">
  <figure class="image{{ include.res | default: 'is-3by2' | prepend: ' ' }}">
    <img 
      data-src="{{ include.src | default: '/assets/img/ph.png' }}{{ img_attrs | strip }}" 
      data-lowsrc="{{ include.src | default: '/assets/img/ph.png' }}?nf_resize={{ include.mode | default: 'fit' }}&w=100"
      alt="{{ include.alt | default: page.title }}"
      class="lazyload blur-up">
  </figure>
  <span class="is-size-7 mb-5 is-block img_caption">Image by&nbsp;<a href="{{ include.img_source_url }}">{{ include.img_author }}</a>&nbsp;from&nbsp;<a href="{{ include.img_source_url }}">{{ include.img_source }}</a></span>
</div>