Forum for discussing general topics related to Couch.
7 posts Page 1 of 1
I have read through the full tutorial and the various different docs available and I understand how to be able to edit current static HTML, however I don't understand at all how the user can create new content entirely.

What I am looking to do is -

Clients website is http://www.domain.tld, on that website they have .tld/portfolio.php

Within /portfolio, there are various sections for photos with a lightbox zoom in feature rather than each image leading to a separate page, the client wants to have a title, and be able to upload as many photos as they wish for such project in a grid format, such as -

TITLE
IMG IMG IMG IMG IMG
TITLE
IMG IMG IMG IMG IMG

As of now, I have been receiving images through email and writing up the HTML myself with the correct links to the images on the server, very tedious for both of us.

Now I understand how they can edit the title & images with Couch, however I don't understand how they would completely create new content such as -

NEW TITLE
IMG IMG IMG IMG IMG
TITLE
IMG IMG IMG IMG IMG
TITLE
IMG IMG IMG IMG IMG

I read about the forums and someone mentioned a hidden cloning page? Is this correct? Could I create a master page which would allow them to write the title of the new project section, and upload as many photos as they wish via the image upload and have it send that content as a new 'post' so-be-it, to /portfolio.php ?

Thank you.
hello beedu - I've been using Couch for a while now and suggest that Couch cloned pages may well be what you are looking for. See http://www.couchcms.com/docs/concepts/cloned-pages.html

Here is a link to a site I've done with Couch http://www.davidbuttphilip.com/engagements/. This page is an example of the list view of pages cloned from a single Couch template. Each engagement / date is a cloned page - listed in date order. The cloneable template could consist of more or less anything you want - including multiple images to be integrated with a lightbox and editable regions for headings, text etc

You will find the Couch tutorials http://www.couchcms.com/docs/tutorials/ really helpful - the best place to start I think!
This looks like it would be an appropriate use of dynamic folders: http://www.couchcms.com/docs/miscellaneous/dynamic-folders.html
@beedu, as @potato and @cheesypoof mentioned above, you can use cloned pages in combination of folders to easily create the kind of structure you mentioned.

If your existing website happens to be online, please paste in a link to the relevant section and I'm sure we'll be able to let you know the solution in greater detail.
EDIT 3: FIXED!

Solved it with repeatable regions on the images, therefore not defining how many the client can have, and sorting out the 'white space' at the same time. I'll leave this up incase anyone else comes across this same problem.

Thank you to everyone who helped. :)

@KK - Do you happen to know if there will ever be a yearly fee for CouchCMS, for say, a developer to buy and per-subscription can be used on 'up-to' x amount of clients, rather than buying 1 license per project.




EDIT 2: Still a problem.

I currently have this code (with 'image_x' going from image_1 up to image_10):

Code: Select all
<cms:editable name='group_img' label='Image Gallery' desc='Image Gallery' type='group' />
   <cms:editable
      name='image_1'
      label='Image 1'
      desc='Upload first image'
      group='group_img'
      type='image'
      width='800'
      height='600'
      crop='1'
   />
   
   <cms:editable
      name='image_2'
      label='Image 2'
      desc='Upload second image'
      group='group_img'
      type='image'
      width='800'
      height='600'
      crop='1'
   />


With this HTML (Going from 1-10 again):

Code: Select all
<div class="portfolioimg span3">
                      <a class="image-popup-fit-width />" href="<cms:show image_1 />" />
                     <img src="<cms:show image_1 />" />
                  </a>
               </div>
               <div class="portfolioimg span3">
                  <a class="image-popup-fit-width />" href="<cms:show image_2 />" />
                     <img src="<cms:show image_2 />" />
                  </a>
               </div>


My problem is that if the client only puts in x amount of the 10 photos, the HTML markup is still there, and due to there being styling on these images, I end up with 'empty' borders.

Is it possible to say, IF the client enters all 10 of 10, then display 10, but if they only enters x of 10, then the remaining x, set a style of display:none ?

Currently it is leaving huge empty spaces with empty borders in between the portfolio list due the HTML markup still being there spanning 3, but nothing inside of it, therefore it still displays, but really, it shouldn't.

As you can see below, I chose to only enter an image into image_10, and got this result with border: 1px solid black; set on the image.

Desktop: Image

Mobile: Image

If I remove the borders, I end up with huge white space, neither look very nice, obviously entering from 10 isn't realistic, but its an easy way to show what happens if say, 1-6 are entered, and 7,8,9,10 are left black, a huge 'gap' for 7-10 is there.

Thank you.
hi again, when you say
Solved it with repeatable regions on the images, therefore not defining how many the client can have
it doesn't appear that you have used the Couch tag cms:repeatable from the code you then show us.

I have just set up something similar for the upload of X number of images for a blog entry as follows:
Code: Select all
<cms:repeatable name='blog_images' label='UPLOADER for BLOG IMAGE(S)' >
   <cms:editable name='blog_image' label='Blog image' type='image' enforce_max='1' width='720' show_preview='1'  preview_width='50' />
</cms:repeatable>

See the docs for more info on this tag: http://www.couchcms.com/docs/concepts/repeatable-regions.html
As @potato said, you don't seem to be using 'Repeatable regions' which are a perfect fit for your requirement. With repeatable regions you won't have to pre-define a fixed number of editable regions so this problem of 'empty' regions won't occur.

However, if for some reasons, you want to continue using your original code, you can first check if an region is not empty before outputting it like this -
Code: Select all
<cms:if "<cms:not_empty image_1 />" >
    <div class="portfolioimg span3">
        <a class="image-popup-fit-width />" href="<cms:show image_1 />" />
            <img src="<cms:show image_1 />" />
        </a>
    </div>
</cms:if>

<cms:if "<cms:not_empty image_2 />" >
    <div class="portfolioimg span3">
        <a class="image-popup-fit-width />" href="<cms:show image_2 />" />
            <img src="<cms:show image_2 />" />
        </a>
    </div>
</cms:if>

Hope this helps.
7 posts Page 1 of 1