Forum for discussing general topics related to Couch.
3 posts Page 1 of 1
Hi,

So I'm trying to follow the tutorial. I'm on the page :

http://docs.couchcms.com/tutorials/port ... /blog.html

and am stuck. At the point "Defining the editable regions within the Template tag". I put opening and closing tags

Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Blog' />

</cms:template>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
.......


I assume it will be clear why in about.php we only did and opening tag (no closing tag). But what stumping me is in the picture below this that follows the text "Next we'll place the editable tags defining the two editable regions we identified above within this template tag -" The content of blog.php suddenly changes, but maybe
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
continues below and is just out of the picture since you added so many new lines for the image(?)...

Then between (according to the picture) you nest more another cms tags inside the title tags for I guess the image. But the image in is a gif way further down in the page. So what's up with that? What's up with nesting cms tags inside cms title tags?

I do not see the logic (programmatically speaking) and the tutorial has me confused.


.......
Hi,

I see that you are getting disoriented by the fact that the screenshots are showing only portions of the code.
This is unavoidable, I am afraid. The full template, however, is attached right on the same page so you can always scrutinize that to get the full picture.

The other point that is confusing you is how come the 'image' editable region is defined at a place that is far off from the place where the <img> tag is actually displayed.

It is explained at several places in the tutorial but I'll try here once again with a very simple template (so that I can show you the full template at every step).

Consider the following (full) template -
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<html>
    <head>
        <title>Some title</title>
    </head>
    <body>
        <img src="images/some-img.gif" />
    </body>
</html>
<?php COUCH::invoke(); ?>

As you can see, it is being managed by Couch (courtesy the two PHP statements) but we have not yet defined a single editable region in it.

The HTML happens to contain only a single image so suppose we set out to make that image editable.
I am sure you'll understand the following modification we do to the template to do just that -
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<html>
    <head>
        <title>Some title</title>
    </head>
    <body>
        <img src="<cms:editable name='blog_image' type='image' />" />
    </body>
</html>
<?php COUCH::invoke(); ?>

The code above should be easier for you to understand because we have 'defined' the editable region right at the same spot as where we are 'using' it (which is as the 'src' attribute of the img tag).

Please notice that I have emphasized the 'defined' and 'used' actions above.
Doing both at the same spot, as above, is a valid approach but this is not the only one available to us.

There is a second alternative approach where we separate the 'defined' and 'used' actions i.e. do both at separate locations in the template. Consider the following -
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template>
    <cms:editable name='blog_image' type='image' />
</cms:template>
<html>
    <head>
        <title>Some title</title>
    </head>
    <body>
        <img src="<cms:show blog_image />" />
    </body>
</html>
<?php COUCH::invoke(); ?>

As you can see, here we are 'defining' the editable region at the top of the template (between the <cms:template> tags) but are 'using' its value lower down in the body (as the 'src' parameter of img tag). The 'using' part is being done by the <cms:show> tag.

This second variation will work *exactly* the same as the first version.

The reason why we prefer to use the second variation is because in this method we can place *all* the editable regions used by the template at a single spot. This makes them manageable in complex templates (and most 'clonable' template will be complex) as we can see all of the regions at one place and won't have to hunt for them in HTML code.

Ultimately, the choice is yours - you can either place the <cms:editable> tag right at the spot where you want to use the value contained within it or place the <cms:editable> above within the <cms:template> tag block and use the value contained within it through <cms:show> tag.

Hope this makes things a bit clearer.
I am beginning to understand it, thanks :))
3 posts Page 1 of 1
cron