Hi
I am winning with the demo site of couchcms and got quite a few good features integrated and learning it properly as I do each feature and study it to make sure I understand how it works, the one bit I have got stuck on is a bootstrap lightbox photo gallery
I am using this one: https://www.codeply.com/go/84yMeticox/b ... s-lightbox
It works if I use the coding with no couchcms tags integrated, below is the coding with no couchcms tags integrated
If I integrated the couchcms tags in and upload photos from the cms admin side, it looks like the photos don't seem to upload correctly. I have attached a screenshot of the issue. Below is the coding with couchcms integrated
Thank you in advance
UPDATE: Sorry sorted it, so stupid, I forgot to include the couchcms template tag coding below
I am winning with the demo site of couchcms and got quite a few good features integrated and learning it properly as I do each feature and study it to make sure I understand how it works, the one bit I have got stuck on is a bootstrap lightbox photo gallery
I am using this one: https://www.codeply.com/go/84yMeticox/b ... s-lightbox
It works if I use the coding with no couchcms tags integrated, below is the coding with no couchcms tags integrated
- Code: Select all
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-lg-3 col-md-4 col-6 my-3">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid card">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-lg-3 col-md-4 col-6 my-3">
<img src="https://unsplash.it/600.jpg?image=252" class="img-fluid card">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-lg-3 col-md-4 col-6 my-3">
<img src="https://unsplash.it/600.jpg?image=253" class="img-fluid card">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="example-gallery" class="col-lg-3 col-md-4 col-6 my-3">
<img src="https://unsplash.it/600.jpg?image=254" class="img-fluid card">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="example-gallery" class="col-lg-3 col-md-4 col-6 my-3">
<img src="https://unsplash.it/600.jpg?image=255" class="img-fluid card">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="example-gallery" class="col-lg-3 col-md-4 col-6 my-3">
<img src="https://unsplash.it/600.jpg?image=256" class="img-fluid card">
</a>
</div>
</div>
</div>
</div>
If I integrated the couchcms tags in and upload photos from the cms admin side, it looks like the photos don't seem to upload correctly. I have attached a screenshot of the issue. Below is the coding with couchcms integrated
- Code: Select all
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="page-title">Projects</h1>
<h3 class="gallery-title">Gallery 1</h3>
<div class="row">
<cms:pages masterpage="gallery.php" include_subfolders='0' >
<a href="<cms:show gg_image />" data-toggle="lightbox" data-gallery="example-gallery" class="col-lg-3 col-md-4 col-6 my-3">
<img src="<cms:show gg_thumb />" class="img-fluid card">
</a>
</cms:pages>
</div>
</div>
</div>
</div>
Thank you in advance
UPDATE: Sorry sorted it, so stupid, I forgot to include the couchcms template tag coding below
- Code: Select all
<cms:template title='Gallery' clonable='1' dynamic_folders='1' gallery='1' order='6'>
<cms:editable
name="gg_image"
label="Image"
desc="Upload your main image here"
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='400'
height='400'
enforce_max='1'
type="thumbnail"
/>
</cms:template>