Extract image from page to use as hero image at the top with parallax effect in the #Brooklyn theme

page with hero image.md

What you have

What you want

See animation: http://take.ms/xtntP

How to get it

1. Go to your Template Editor page.

2. Create a new page template called page.hero-image.

3. Copy to it the content of the file below.

4. Assign the template to your page.

   

How does that work?

The template will extract the first image in your page content, remove its suffix so that it is as large as can be, and position the image at the top of your page, as hero image.

As you scroll down the page, you will experience the parallax effect, just like you do with your hero slideshow.

The template will not touch other images in your page content.

page.hero-image.liquid

<!-- /templates/page.hero-image.liquid -->

{% if page.content contains '<img' %}
  {% assign src = page.content | split: 'src="' %}
  {% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' | replace: '_1024x1024.', '.' | replace: '_grande.', '.' | replace: '_large.', '.' | replace: '_compact.', '.' | replace: '_small.', '.' %}
{% endif %}

{% comment %}
  If the page contains an image:
  Close wrapper, insert featured image, then open it back up
{% endcomment %}

{% if src %}

  <div class="collection-hero">
    <div class="collection-hero__image" style="background-image: url({{ src }});"></div>
  </div>

{% endif %}

{% comment %}Page content here{% endcomment %}

{% if src %}
<script>
  $('.rte img').first().remove();
</script>
{% endif %}