Hey!
I want to display images in a Masonry grid using a photo gallery.
So after following this guide: http://docs.couchcms.com/concepts/photo-gallery.html , I'm kinda stuck.
Every single time I add more then 1 image to the image gallery in the cms I get the following "ERROR: Tag: template Cannot make template non-clonable. Cloned pages exist.". Uploading 1 image works, not 2...
Screenshot of the CMS if needed: http://i.imgur.com/khC95Tp.png
Thanks!
I want to display images in a Masonry grid using a photo gallery.
So after following this guide: http://docs.couchcms.com/concepts/photo-gallery.html , I'm kinda stuck.
Every single time I add more then 1 image to the image gallery in the cms I get the following "ERROR: Tag: template Cannot make template non-clonable. Cloned pages exist.". Uploading 1 image works, not 2...
Screenshot of the CMS if needed: http://i.imgur.com/khC95Tp.png
Thanks!
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?> <cms:template title='Realisaties' /> <cms:template title='Gallery' clonable='1' dynamic_folders='1' gallery='1'> <cms:editable name="gg_image" label="Image" desc="Upload your main image here" width="500" show_preview='1' preview_height='200' type="image" /> <cms:editable name="gg_thumb" assoc_field="gg_image" label="Image Thumbnail" desc="Thumbnail of image above" width='115' height='115' enforce_max='1' type="thumbnail" /> </cms:template> <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="shortcut icon" type="image/png" href="img/visitekaartjes/try_1_f.png"/> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/creative.css"> <!-- Carousel --> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet"> <script src="https://use.fontawesome.com/79cd1acdc3.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>Zogefikst</title> </head> <body> <nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="top"> <div class="row_nav"> <a class="row_nav" href="lander.php"> <img src="img/logo_generic.png" class="d-inline-block align-top logo_sm logo_site" alt=""> </a> </div> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="row_nav"> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="lander.php#"><h2 class="menu-title">HOME</h2></a> </li> <li class="nav-item"> <a class="nav-link" href="lander.php#over_mezelf_scroll"><h2 class="menu-title">OVER MEZELF</h2></a> </li> <li class="nav-item"> <a class="nav-link" href="lander.php#diensten_scroll"><h2 class="menu-title">DIENSTEN</h2></a> </li> <li class="nav-item"> <a class="nav-link" href="#top"><h2 class="menu-title">REALISATIES</h2></a> </li> <li class="nav-item"> <a class="nav-link" href="lander.php#contact_scroll"><h2 class="menu-title">CONTACT</h2></a> </li> </ul> </div> </div> </nav> <div class="container-fluid no-gutters" id="realisations"> <div class="row no-gutters justify-content-center"> <h1 class="reali_title">REALISATIES</h1> </div> <div class="row no-gutters"> <div class="col-3 btn_group"> <div class="btn-group-vertical"> <button type="button" class="btn btn-secondary">Badkamer</button> <button type="button" class="btn btn-secondary">Installatie keuken</button> <button type="button" class="btn btn-secondary">Laminaat</button> <button type="button" class="btn btn-secondary">Zolder</button> <button type="button" class="btn btn-secondary">Trappen</button> <button type="button" class="btn btn-secondary">Schilderwerken</button> <button type="button" class="btn btn-secondary">Gevelbekleding</button> </div> </div> <div class="col-9 grid"> <!-- <div class="grid-item"><img class="img-fluid" src="img/realisaties/trap/DSC05475.JPG"></div> <div class="grid-item"><img class="img-fluid" src="img/realisaties/trap/DSC05484.JPG"></div> <div class="grid-item"><img class="img-fluid" src="img/realisaties/trap/DSC05618.JPG"></div> <div class="grid-item"><img class="img-fluid" src="img/realisaties/trap/DSC05622.JPG"></div> <div class="grid-item"><img class="img-fluid" src="img/realisaties/trap/DSC05717.JPG"></div> <div class="grid-item"><img class="img-fluid" src="img/realisaties/trap/DSC05782.JPG"></div> --> <cms:pages masterpage="realisations.php" include_subfolders='0' > <div class="grid-item"> <img class="img-fluid" src="<cms:show gg_image />" alt="<cms:show k_page_title />"> </div> </cms:pages> </div> </div> </div> <footer class="container-fluid"> <div class=""> <div class="row no-gutters justify-content-center"> <h1 class="col-12 text-center">Een klusje in huis?</h1> <h4 class="col-12 text-center">Laat een berichtje achter!</h4> <button type="button" class="btn btn_blue contact_btn">CONTACT</button> </div> <hr class="divider-md"> <div class="row no-gutters"> <div class="col-12 personal_info"> <i class="fa fa-mobile" aria-hidden="true"><h4>0470 00 00 00</h4></i><br> <i class="fa fa-map-o" aria-hidden="true"><h4>9890 Asper</h4></i><br> <i class="fa fa-id-card" aria-hidden="true"><h4>BE00 00 00 0000</h4></i><br> </div> </div> <div class="col-12"> <span class="float-right copyright">© 2017 Zogefikst</span> </div> </div> </footer> <!-- jQuery first, then Tether, then Bootstrap JS. --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <!-- Custom JS --> <script type="text/javascript" src="slick/slick.min.js"></script> <script type="text/javascript" src="js/slick.js"></script> <script type="text/javascript" src="js/smoothsscroll.js"></script> <script type="text/javascript" src="js/masonry.js"></script> </body> </html> <?php COUCH::invoke(); ?>