Forum

Thread tagged as: Question, Problem, Runway

Responsive images in collections and multiple templates

Hey there,

I have a collection called Projects, which has its primary template as project.html. I've set up responsive images using a single image content field, and this works fine in any page pulling in the project.html main template. It's marked up as such:

<picture>
    <source
        media="(min-width: 990px)"
        srcset='<perch:content id="image" type="image" bucket="Project" label="Image" width="800" height="400" crop="true" />'>
    <source
        media="(min-width: 768px)"
        srcset='<perch:content id="image" type="image" bucket="Project" label="Image" width="400" height="250" crop="true" />'>
    <source
        media="(min-width: 480px)"
        srcset='<perch:content id="image" type="image" bucket="Project" label="Image" width="500" height="300" crop="true" />'>
    <img
        src='<perch:content id="image" type="image" bucket="Project" label="Image" width="350" height="250" crop="true" />'>
</picture>

Now, I pull this collection into multiple templates for different contexts. But when I include the exact snippet as above in any of these other templates, the responsive images don't work. Instead, all the source fields reference the same file with no cropping involved, as such:

<picture>
    <source media="(min-width: 990px)" srcset="/perch/resources/Project/header.jpg">
    <source media="(min-width: 768px)" srcset="/perch/resources/Project/header.jpg">
    <source media="(min-width: 480px)" srcset="/perch/resources/Project/header.jpg">
    <img src="/perch/resources/Project/header.jpg">
</picture>

Is there anywhere I'm going wrong here?

Thanks!
Gareth Parry

Gareth Parry 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

If the code is exactly the same there shouldn't be an issue at all. Is it's exactly the same, or just similar?
Gareth Parry

Gareth Parry 0 points

5 years ago

Edit: I just checked, and it wasn't exactly the same. I'd left off the 'type=image' attribute in the template. Didn't expect that to kill it! I've made sure they're exactly the same now, and it's working flawlessly. Thanks for pointing this idiot in the right direction!

It's exactly the same. I'll post the relevant code for you.

Recent projects layout:

<section class="o-panel">
    <div class="o-wrapper">
        <h1 class="o-panel__title">Recent projects</h1>

        <ul class="c-project-list">
            <?php perch_collection('projects', [
                'template' => 'project_thumb_primary.html',
                'count' => 4
            ]); ?>
        </ul>

        <section class="c-cta">
            <a href="/portfolio" class="c-button">View full portfolio</a>
        </section>
    </div>
</section>

Which loads in project_thumb_primary.html template:

<li class="c-project-list__item--primary">
    <a href='/portfolio/client/<perch:content id="company" />'>
        <picture>
        <source
            media="(min-width: 990px)"
            srcset='<perch:content id="image" bucket="Project" label="Image" width="800" height="400" crop="true" />'>
        <source
            media="(min-width: 768px)"
            srcset='<perch:content id="image"  bucket="Project" label="Image" width="400" height="250" crop="true" />'>
        <source
            media="(min-width: 480px)"
            srcset='<perch:content id="image"  bucket="Project" label="Image" width="500" height="300" crop="true" />'>
        <img
            src='<perch:content id="image" bucket="Project" label="Image" width="350" height="250" crop="true" />'>
    </picture>

        <header class="c-project-list__title">
            <h1><perch:content id="company" /></h1>
        </header>
    </a>
</li>

With the output:

<picture>
    <source media="(min-width: 990px)" srcset="/perch/resources/Project/header.jpg">
    <source media="(min-width: 768px)" srcset="/perch/resources/Project/header.jpg">
    <source media="(min-width: 480px)" srcset="/perch/resources/Project/header.jpg">
    <img src="/perch/resources/Project/header.jpg">
</picture>

And now here's the individual project page:

<?php perch_layout('global/head'); ?>

<?php echo perch_get('postslug'); ?>

<?php perch_collection('projects', array(
    'template' => 'project.html',
    'filter' => 'company',
    'match' => 'eq',
    'value' => perch_get('postslug')
)); ?>

<?php perch_layout('global/foot'); ?>

Which loads the project.html template:

<article>
    <header>
        <h1>
            <perch:content id="company" type="text" label="Company" title="true" />
            <perch:content id="name" type="text" label="Project name" />
        </h1>
    </header>

    <picture>
        <source
            media="(min-width: 990px)"
            srcset='<perch:content id="image" type="image" bucket="Project" label="Image" width="800" height="400" crop="true" />'>
        <source
            media="(min-width: 768px)"
            srcset='<perch:content id="image" type="image" bucket="Project" label="Image" width="400" height="250" crop="true" />'>
        <source
            media="(min-width: 480px)"
            srcset='<perch:content id="image" type="image" bucket="Project" label="Image" width="500" height="300" crop="true" />'>
        <img
            src='<perch:content id="image" type="image" bucket="Project" label="Image" width="350" height="250" crop="true" />'>
    </picture>

    <perch:content id="intro" type="textarea" label="Intro" markdown="true" />

    <perch:content id="body" type="textarea" label="Text" editor="markitup" markdown="true" />

    <perch:content id="details" type="textarea" label="Details" markdown="true" />
</article>

With the output:

<picture>
    <source media="(min-width: 990px)" srcset="/perch/resources/Project/header-w800h400.jpg">
    <source media="(min-width: 768px)" srcset="/perch/resources/Project/header-w400h250.jpg">
    <source media="(min-width: 480px)" srcset="/perch/resources/Project/header-w500h300.jpg">
    <img src="/perch/resources/Project/header-w350h250.jpg">
</picture>

All of the images are successfully created in the resources/Project bucket folder.

Thanks for your help on this!