Gallery app or Perch Content?

Perch: 3.1.2, PHP: 7.0.31, MySQL: mysqlnd 5.0.12-dev - 20150407 - $Id: b5c5906d452ec590732a93b051f3827e02749b83 $, with PDO
Server OS: Linux, cgi-fcgi
Installed apps: content (3.1.2), assets (3.1.2), categories (3.1.2)
App runtimes: <?php $apps_list = [ ];
PERCH_LOGINPATH: /perch
PERCH_PATH: /home/mathodesig/domains/mathodesign.be/public_html/perch
PERCH_CORE: /home/mathodesig/domains/mathodesign.be/public_html/perch/core
PERCH_RESFILEPATH: /home/mathodesig/domains/mathodesign.be/public_html/perch/resources
Image manipulation: GD
PHP limits: Max upload 64M, Max POST 64M, Memory: 128M, Total max file upload: 64M
F1: 3b606135b33e6a102526838f4152a807
Resource folder writeable: Yes
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
REQUEST_URI: /perch/core/settings/diagnostics/
DOCUMENT_ROOT: /home/mathodesig/domains/mathodesign.be/private_html
HTTP_HOST: www.mathodesign.be

I want to translate a html page into perch CMS, so my customer can add images, portrait or landscape: https://www.mathodesign.be/realisaties-B2B-meubelen.html

.php page would be:

<ul id="portfolio-filter" class="portfolio-filter clearfix" data-container="#portfolio">
                        <li class="activeFilter"><a href="#" data-filter="*">Show all references</a></li>
                        <li><a href="#" data-filter=".pf-zorg">Care</a></li>
                        <li><a href="#" data-filter=".pf-horeca">Horeca</a></li>
                        <li><a href="#" data-filter=".pf-allround">Allround</a></li>
                    </ul>
                    <div id="portfolio-shuffle" class="portfolio-shuffle" data-container="#portfolio">
                        <i class="icon-random"></i>
                    </div>
                    <div id="section-portfolio" class="page-section">
                        <div id="portfolio" class="portfolio grid-container portfolio-nomargin portfolio-full portfolio-3 portfolio-masonry mixed-masonry clearfix">


                        <?php perch_content('ENG-add-references'); ?>


                        </div>
                    </div>

eng-add-references.html page (something like this, how can i do the choice between portrait or landscape?)

<article class="portfolio-item <perch:content id="type-referentie" type="select" label="Type referentie"
options="Zorg|pf-zorg, Horeca|pf-horeca, Allround|pf-allround" allowempty="false" required>">
                                <div class="portfolio-image imagescale">
                                        <img <perch:if exists="portrait"> <portrait src="<perch:content id="image" type="image" label="Portrait" />" height="540" width="400" crop="true"> </portrait> <perch:else /> <img src="<perch:content id="image" type="image" label="Image" height="380" width="600" crop="true" />" /> </perch:if> >
                                    <div class="i-overlay on-hover" style="background: rgba(255,255,255,0.4);">
                                        <a href="images/..." title="..." class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i></a>
                                    </div>
                                </div>
</article>

How can I fix this? With Gallery app or via Perch content?