Forum for discussing general topics related to Couch.
15 posts Page 1 of 2
I am having bit of a nightmare with the photos on a gallery page, I want the thumbnail images to be 320px in width and 300px in height and the larger images when clicked on the thumbnail to be the original size

The coding I have is below

Code: Select all
<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"
      enforce_max='1'
      width='320'
      height='300'
      type="thumbnail"
   />


I am uploading the original sized images and was thinking the width and height set in the coding just above to 320 and 300 would make the thumbnails that size and the enlarged images the original size but the thumbnail images are displaying as the original image sizes

UPDATE: I have gone back to uploading the smaller sized photos and they are ok as thumbnails but the enlarged images are the same size as the thumbnails, is there a way to make the enlarged images bigger or the original size that I have them in before resizing them for thumbnail size, my updated coding is below

Code: Select all
<cms:editable
      name='gg_image'
      label='Image'
      desc='Upload your main image here'
      show_preview='1'
      preview_height='400'
      type='image'
      order='1'
      required='1'
   />

   <cms:editable
      name="gg_thumb"
      label="Image Thumbnail"
      desc="Thumbnail of image above"
     width='320'
      height='300'
      enforce_max='1'
      assoc_field="gg_image"
      show_preview='1'
      type="thumbnail"
      order='2'
   />


the url is http://www.plymouthjudoclub.org/photos.php

Am I missing something, can anyone help please?

Thank you in advance
enlarged images are the same size as the thumbnails

In admin you can hide the thumbnail completely via cms:config_form_view. Therefore only original image will be visible and preview-able.

Code: Select all
<cms:config_form_view>
    <cms:field 'gg_thumb' hide='1' />
</cms:config_form_view>
Sorry bit confused by that as I need the thumbnails to show on the frontend but needs to be the size of 320px width and 300px height and the enlarged image on the front end to be the original size of the image
ianhaney50 wrote: Sorry bit confused by that as I need the thumbnails to show on the frontend but needs to be the size of 320px width and 300px height and the enlarged image on the front end to be the original size of the image

Ok, if that is for the front-end, please post your HTML code.
No probs, my front end coding is below

Code: Select all
<?php require_once( 'cms/cms.php' ); ?>

<cms:template title='Photos' clonable='1' dynamic_folders='1' gallery='1'>

<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>

<div class="about" id="about">
      <div class="container">
         <h3 class="title">Gallery</h3>
           
            <cms:pages masterpage="photos.php" include_subfolders='0' >
            <a href="<cms:show gg_image />" data-toggle="lightbox" data-gallery="example-gallery">
                <img src="<cms:show gg_thumb />" class="img-responsive">
            </a>
         </cms:pages>
           
      </div>   
   </div>
<?php COUCH::invoke(); ?>
Your Couch code is okay both in frontend and backend and It's working for me as expected (I used css/js resourses available to me).
Code: Select all
<script src="<cms:show k_site_link />assets/js/main/jquery.min.js"></script>
<script src="<cms:show k_site_link />assets/js/main/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet">

<div class="about" id="about">
    <div class="container">
    <h3 class="title">Gallery</h3>

    <cms:pages masterpage="photos.php" include_subfolders='0' >
        <a href="<cms:show gg_image />" data-toggle="lightbox" data-gallery="example-gallery">
            <img src="<cms:show gg_thumb />" class="img-responsive">
        </a>
    </cms:pages>

    </div>
</div>

<script>
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});
</script>



EDIT: in view-source my generated HTML looks like this:
Code: Select all
<div class="container">
<h3 class="title">Gallery</h3>

    <a href="http://my.couchcms.pro/uploads/image/2018-06-05-004.png" data-toggle="lightbox" data-gallery="example-gallery">
        <img src="http://my.couchcms.pro/uploads/image/2018-06-05-004-320x158.png" class="img-responsive">
    </a>

</div>
Could it be that I am using bootstrap v3.3.4 instead of bootstrap 4 as noticed your using bootstrap 4

UPDATE: I have used the same coding as you regarding the css and js for ekko-lightbox and added the js coding to the photos.php file but uploading the original images sizes, it's a mess, below is the coding I have

Code: Select all
<div class="about" id="about">
      <div class="container">
         <h3 class="title">Gallery</h3>
           
            <cms:pages masterpage="photos.php" include_subfolders='0' >
            <a href="<cms:show gg_image />" data-toggle="lightbox" data-gallery="example-gallery">
                <img src="<cms:show gg_thumb />" class="img-responsive">
            </a>
         </cms:pages>
           
      </div>
   </div>
   
    <script>
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});
</script>


In includes/header.php I have the following coding

Code: Select all
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet">

Attachments

ianhaney50 wrote: Could it be that I am using bootstrap v3.3.4 instead of bootstrap 4 as noticed your using bootstrap 4

Google for the lightbox plugin for your bootstrap version.. If generated HTML is as expected, then CouchCMS is out of the equation. A good advice - Always Retrofit CouchCMS to Working HTML!

I used this resource and followed the instructions: http://ashleydw.github.io/lightbox/
UPDATE: I have used the same coding as you regarding the css and js for ekko-lightbox and added the js coding to the photos.php file but uploading the original images sizes, it's a mess, below is the coding I have


I tested lightbox only on a single image and my front-end skills are very limited. Maybe someone knowledgeable could help you build the HTML design..
it does seem to work on bootstrap 3 but it's just the images are not being resized to 320px x 300px for the thumbnails, the enlarged images are the right size but if I upload the small images that are 320px by 300px, the enlarged images are also 320px by 300px
15 posts Page 1 of 2