Responsive Images (picture tag)


I am trying to create 2 placeholders for my images in the admin backend, I want to upload 2 images that look almost the same but have different sizes, 1 for desktop 1 for the mobile, this is the code in my homehtml.php

                <div class="content" <?php echo ($this->editmode) ? 'style="min-height:230px"' : ''; ?>>
                  <source media="(min-width: 1050px)" srcset="<?=$this->image("homeOffers1Image")->getSrc();?>">
                  <source media="(min-width: 165px)" srcset="<?=$this->image("homeOffers1-1Image")->getSrc();?>">
                  <?=$this->image("homeOffers1Image", ['class' => '', 'title' => 'Car image 610x339px image', 'reload' => false]);?>                      
                <?=$this->link("homeOffers1CTA", ["placeholder" => "CTA button"]);?>
                <h3><?=$this->input("homeOffers1Title", ["width" => 350, "placeholder" => "Headline"]);?></h3>

My issue is that this generates only 1 placeholder in the backend (in edit mode) and I can only update 1 image, how should I do this proper to upload as many images as I want?


Use ImageThumbnail config with media queries. Pimcore handles the rest for you: