Hello, I am new here, first of all...what a great CMS! I have spent a month looking for one that has a decent tut on how to hook the CMS to a fully working HTML/CSS/JS website, but all of them only explain how to built a new site once you installed the CMS. The only one that has a great tutorial (made by user), was ProcessWire, but the admin of that would looks like a Star Trek engineer dashboard to any client So in that regard, thanks for creating the tut on your site.

Of course, the noobie questions. *I have experimented a bit, changing html to php, but cleared that so that my client has the html version to review:

Check out my WIP: http://www.rinaldi.nl/projects/nina/

About page
http://www.rinaldi.nl/projects/nina/aboutContact.html

With your tut I was able to make the text region editable, but has some issues with the image (your tut only explain images in the blog and portfolio, but not as part of the about). When I made it editable, it both showed the image I uploaded in the CMS, but also the source code as an inline line on the page. The other thing, what parameter do I need to add if I want the image to have 100% width and height according to it's container? I use Foundation as framework and the about image is contained by the max-width of my grid.

The portfolio overview and pages
http://www.rinaldi.nl/projects/nina/index.html
http://www.rinaldi.nl/projects/nina/single-page.html

My overview uses a javascript grid. Ideally, my client can add single-page's herself, and then Couch automatically uses the first/only image of the single-page also as overview image, and adds the title to the menu. But I like to limit it to around 20 in the overview.

Alternatively (and this would mean more to me than to her, to learn couch step by step), is to separate the overview pages and the single-page's in terms of templates. Yes it would mean double work, but the chance of breaking stuff is lower. If this would be a site with hundreds of pages, it would be insane, but 30 pages in total max. I can live with.

Any advice, help, tips are welcome. Cheers.

PS: maybe offer a 10 license bundle for 300 bucks

[KK]

Hello and welcome, ambiroa
Thank you for your kind words. I'm glad you liked Couch.

I'll try to answer your queries -

your tut only explain images in the blog and portfolio, but not as part of the about

Nothing in the tutorial was template specific. Everything from blog or portfolio can be equally well applied to any other template.

When I made it editable, it both showed the image I uploaded in the CMS, but also the source code as an inline line on the page

There are two ways of handling this -
1. Add a hidden='1' parameter to the image region definition or
2. Define the image region within cms:template block (like we did in blog and portfolio) and use <cms:show whatever_image_name /> to output the image.

what parameter do I need to add if I want the image to have 100% width and height according to it's container?

For responsive images, I've seen people use enforce_max='1' and set width an height to some reasonably large value (e.g. 1400px). This way the uploaded images never exceed the dimensions and the CSS handles the width they get eventually shown.

Point is, it is only you who can decide what width you want the uploaded image to be. Leave off the width and height parameter and Couch will not try to resize the images at all.

my client can add single-page's herself, and then Couch automatically uses the first/only image of the single-page also as overview image, and adds the title to the menu. But I like to limit it to around 20 in the overview.

You can create the grid of 20 by looping through the single-pages like this -

Code: Select all

<cms:pages masterpage='portfolio.php' limit='20'>
   ...
</cms:pages>

Within the loop, you have access to all editable regions of the single pages. You can show the first image, title etc. here. This technique is a staple one in Couch and you see it being used in both blog and portfolio in the tutorial. Or have I misunderstood the question? Please let me know.

Alternatively (and this would mean more to me than to her, to learn couch step by step), is to separate the overview pages and the single-page's in terms of templates. Yes it would mean double work, but the chance of breaking stuff is lower. If this would be a site with hundreds of pages, it would be insane, but 30 pages in total max. I can live with.

Not sure if I got you here. Did you mean using e.g. uncloned portfolio.php for listing only and another template, say items.php, for creating the inner pages? Even that is not a problem - the 'masterpage' parameter of cms:pages dictates which template is used to get the pages from.

If this would be a site with hundreds of pages, it would be insane, but 30 pages in total max. I can live with.

this is what confused me in the statement above. If we use clonable template, it does not matter if there are 2 or 20000 pages. If you meant using a separate 'physical' uncloned template for each inner page, I'd say, it can be done but do you really have to do it? It would be cumbersome for the client to 'add' anew page as then it would involve placing a physical file on the server.

Hope this helps.
Do let me know if something is not clear.

Hi KK,

Thanks. To start with last part, I did indeed meant having all portfolio single pages unclonable, yes it would be cumbersome, but then I think it would decrease the chance of something breaking the website. Of course, if I can wrap my head around the loop thing, that would be great.

I just received feedback from my client, some wishes:

She wants the overview (the grid you see on the index page), coming back at each single-page (and not use a navigation for single pages), so on any given single-page the visitor can go to another one without going to index.

This would mean I need to create a snippet from that grid, so I can reload it on the single-pages, correct?

About the loop

To give the client control of the number of single-pages (with a limit), I basically remove all but one in the HTML of the grid, and have that single one looped? So when she adds a new page, that loop will pull the caption and the first/only image and use it on the overview? What happens if she adds a new page while already on the loop limit, does the cms gives a warning/error, or simply not show on the front end?

Lastly, uploading images, where are those stored? Can I for example choose to link an image that is stored somewhere else?

[KK]

To give the client control of the number of single-pages (with a limit), I basically remove all but one in the HTML of the grid, and have that single one looped?

Right. Just as shown in the tutorial.

What happens if she adds a new page while already on the loop limit, does the cms gives a warning/error, or simply not show on the front end?

It simply does not show any more pages after the limit is reached. This is the point where you might want to use 'pagination' (http://www.couchcms.com/docs/concepts/pagination.html).

Lastly, uploading images, where are those stored? Can I for example choose to link an image that is stored somewhere else?

Uploaded assets are stored within 'couch/uploads folder (this location can be changed from config file). You can also paste links to external images.

While we are at it, may I suggest that you use the new filemanager (viewtopic.php?f=6&t=7712). It'd be more intuitive for the client to use.

Thanks

Thanks KK,

I bookmarked the kcfinder page, going to focus on the essentials first. I started learning code 2 months ago, and making websites with a framework last month. So not only is PHP new to me, so is the logic of all of this

I printed the tutorial so I can make notes on it, that should help me understand what exactly I am doing, and why.

[KK]

Oh then I must say you are doing great
Feel free to let us know if you are stuck at anything.