Forum

Thread tagged as: Question, Problem, Configuration

How to I show more than one image on a page using RWD

I want to show different images on a page with different sizes using responsive images with text. If I add the code below more than once with different div class on the page I just get the same image being repeated numerous times.

<picture>                      
    <img src="<perch:content type="image" id="image" label="Image" help="Upload or select an image" />" alt="<perch:content type="text" id="alt" label="Description" required="true" help="Description of this image" title="true" />"
    sizes="(min-width: 850px) 60vw, 100vw"
    srcset="<perch:content type="image" id="image" label="Image" width="200" /> 200w,
            <perch:content type="image" id="image" label="Image" width="400" /> 400w,
            <perch:content type="image" id="image" label="Image" width="800" /> 800w,
            <perch:content type="image" id="image" label="Image" width="1200" /> 1200w">
    </picture>

Perch Runway: 3.0.5, PHP: 7.1.5, MySQL: 10.0.30-MariaDB, with PDO
Server OS: Linux, litespeed
Installed apps: content (3.0.5), assets (3.0.5), categories (3.0.5), perch_blog (5.5.1), perch_forms (1.9), perch_gallery (2.8.9), perch_kraken (1.1), chirp_seo (1), perch_mailchimp (3.1)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_blog', 'perch_forms', 'perch_gallery', 'perch_mailchimp', 'chirp_seo', );
PERCH_LOGINPATH: /perch
PERCH_PATH: /home/robertsd/public_html/perch
PERCH_CORE: /home/robertsd/public_html/perch/core
PERCH_RESFILEPATH: /home/robertsd/public_html/perch/resources
Image manipulation: GD Imagick
PHP limits: Max upload 256M, Max POST 32M, Memory: 256M, Total max file upload: 32M
F1: 0c66c2e1f82f9e0b7617b2cb8270f2c7
Resource folder writeable: Yes
HTTP_HOST: robertsdesign.biz
DOCUMENT_ROOT: /home/robertsd/public_html
REQUEST_URI: /perch/core/settings/diagnostics/
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php

David Roberts 0 points

4 years ago

Wayne Hooper 6 points

4 years ago

Hi David

They all have the id="image" so its just displaying the same image id. If you call each different, you can even do "image2","image3" etc.

Wayne

David Roberts 0 points

4 years ago

Thanks Wayne, I thought it might be something simple!

Just another question . You would make all the id's the same in each RWD section and then add another section with a different Id?

David Roberts 0 points

4 years ago

That's not working. If you add id=image1, I end up with 4 images in the control panel. When it should be just one.

<picture>                      
    <img src="<perch:content type="image" id="image1" label="Image" help="Upload or select an image" />" alt="<perch:content type="text" id="alt" label="Description" required="true" help="Description of this image" title="true" />"
    sizes="(min-width: 850px) 60vw, 100vw"
    srcset="<perch:content type="image" id="image1" label="Image" width="200" /> 200w,
            <perch:content type="image" id="image1" label="Image" width="400" /> 400w,
            <perch:content type="image" id="image1" label="Image" width="800" /> 800w,
            <perch:content type="image" id="image1" label="Image" width="1200" /> 1200w">
    </picture>

Wayne Hooper 6 points

4 years ago

Sorry. I thought that was what you were after... teach me to reply late on

Simon Clay 127 points

4 years ago

Hi David, here is a good resource on responsive images with perch: https://docs.grabaperch.com/perch/content/templates/how-do-i-use-responsive-images-in-perch/