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(); ?>