How do I tell C5 that an area in my HTML/PHP code is editable?
Permalink
This is frustrating trying to find out the answer to such a question and seeing nothing in the documentation here to allow me to figure this out.
I've seen mention of this on other sites about the need to add something like the following to the code:
<div id="header">
<?php
$a = new Area('Header');
$a->display($c);
?>
</div>
But what exactly does the above mean? And where in relation to another <div> that is also labeled as an id="header" do I put the above code?
Doesn't CSS standards dictate that an ID should only be found in one place and not be found in two tags within the code?
What exactly is displayed by the above code?
Isn't there anywhere here where there is a web page explaining the above such that an analytical developer like me can get his fill of explanation?
It's frustrating having to come here to the forum and trying to piece together answers to these types of questions from the various posts I read here. I looked all over the developer documentation here and could see nothing on how to tell C5 which pieces of code are editable regions.
Any input would be appreciated.
Thanks.
Carlos
I've seen mention of this on other sites about the need to add something like the following to the code:
<div id="header">
<?php
$a = new Area('Header');
$a->display($c);
?>
</div>
But what exactly does the above mean? And where in relation to another <div> that is also labeled as an id="header" do I put the above code?
Doesn't CSS standards dictate that an ID should only be found in one place and not be found in two tags within the code?
What exactly is displayed by the above code?
Isn't there anywhere here where there is a web page explaining the above such that an analytical developer like me can get his fill of explanation?
It's frustrating having to come here to the forum and trying to piece together answers to these types of questions from the various posts I read here. I looked all over the developer documentation here and could see nothing on how to tell C5 which pieces of code are editable regions.
Any input would be appreciated.
Thanks.
Carlos
One thing I will say for this forum is that the answers here are very fast in coming. I appreciate that.
I still don't understand.
Let's say I have the following in my code...
Are you saying that if I want to be able to edit the header Title of "My Best Site" that I should make the code like so?...
Or will C5 allow me to modify the full <p>My Best Site</p> including the HTML tags within the div?
What does the display() method do? How does it know which div to display for editing?
Do I have to put the new Area stuff inside the div I want to edit?
Do you understand why this is frustrating? While I appreciate your response it didn't tell me anything other than what I knew. That the code listed was somehow responsible for telling C5 that I wanted to edit...well..something.
Isn't there an All You Want to Know about Setting Up Editable Areas around here somewhere??
Any further clarification would be appreciated.
Thanks.
Carlos
I still don't understand.
Let's say I have the following in my code...
<div id="header"> <p>My Best Site</p> </div>
Are you saying that if I want to be able to edit the header Title of "My Best Site" that I should make the code like so?...
<div id="header"> <p>My Best Site</p> </div> <?php $a = new Area('Header'); $a->display($c); ?>
Or will C5 allow me to modify the full <p>My Best Site</p> including the HTML tags within the div?
What does the display() method do? How does it know which div to display for editing?
Do I have to put the new Area stuff inside the div I want to edit?
Do you understand why this is frustrating? While I appreciate your response it didn't tell me anything other than what I knew. That the code listed was somehow responsible for telling C5 that I wanted to edit...well..something.
Isn't there an All You Want to Know about Setting Up Editable Areas around here somewhere??
Any further clarification would be appreciated.
Thanks.
Carlos
I don't think you understand how a CMS works, concrete5 stores almost all data in the database.
concrete5 is NOT a html editor.
you would not put
in your theme at all, you add that content via concrete5.
the code i mentioned above creates an editable area in concrete5 called Header. it does NOT generate any html. Blocks placed in that area via concrete5 generate HTML.
the display method displays the blocks placed in that area.
concrete5 is NOT a html editor.
you would not put
<p>My Best Site</p>
in your theme at all, you add that content via concrete5.
the code i mentioned above creates an editable area in concrete5 called Header. it does NOT generate any html. Blocks placed in that area via concrete5 generate HTML.
the display method displays the blocks placed in that area.
Of course I understand how a CMS works! I even wrote my own in PHP at one point but decided to switch over to C5 as a result of not having the time to create as full a one as C5 has become.
I am not asking about how to edit HTML from within C5 at least not as an end in itself. I am asking about what exactly gets edited by the code in question and how C5 knows what area of the code to bring up in an editing interface.
The code I listed as an example of what I wanted to edit was a sample piece of code that I would not create or put into C5 by hand. I listed that code as a basis for my questions.
Questions which I still don't have answers to.
Can you or someone else just answer my questions instead of making seemingly snide remarks about that I do or do not understand?
If you don't want to answer my questions that's fine just don't bother and ignore the thread.
Thanks.
Carlos
PS. I should add for clarification that I am not trying to create a C5 site from scratch through C5 itself. Rather I am trying to import an existing site into C5. I've done most of it already but I am trying to now figure out how to make certain parts of the content of that side editable through C5.
I am not asking about how to edit HTML from within C5 at least not as an end in itself. I am asking about what exactly gets edited by the code in question and how C5 knows what area of the code to bring up in an editing interface.
The code I listed as an example of what I wanted to edit was a sample piece of code that I would not create or put into C5 by hand. I listed that code as a basis for my questions.
Questions which I still don't have answers to.
Can you or someone else just answer my questions instead of making seemingly snide remarks about that I do or do not understand?
If you don't want to answer my questions that's fine just don't bother and ignore the thread.
Thanks.
Carlos
PS. I should add for clarification that I am not trying to create a C5 site from scratch through C5 itself. Rather I am trying to import an existing site into C5. I've done most of it already but I am trying to now figure out how to make certain parts of the content of that side editable through C5.
That code doesn't edit anything, thats just where the content is added.
Im not trying to be snide at all, im just trying to be clear,
Im not trying to be snide at all, im just trying to be clear,
So how do I make some existing text content in an html page an editable block within the C5 interface?
So for example if I have some HTML text in a file which I am importing/converting into C5 that says...
<p>
This is some text that I want to be able to edit on the page through C5.
</p>
How do I make that snippet of text editable from within the C5 interface when I tell C5 I want to edit the page containing that snippet?
C5 is making the web page in question appear just fine. I can even sign in and enter the Dashboard and otherwise tell C5 I want to edit the page I am testing. But...I cannot as yet edit any of the actual existing content of that page through the C5 interface. That's what I am after.
Carlos
PS. I apologize if I misconstrued what you said as snide remarks.
So for example if I have some HTML text in a file which I am importing/converting into C5 that says...
<p>
This is some text that I want to be able to edit on the page through C5.
</p>
How do I make that snippet of text editable from within the C5 interface when I tell C5 I want to edit the page containing that snippet?
C5 is making the web page in question appear just fine. I can even sign in and enter the Dashboard and otherwise tell C5 I want to edit the page I am testing. But...I cannot as yet edit any of the actual existing content of that page through the C5 interface. That's what I am after.
Carlos
PS. I apologize if I misconstrued what you said as snide remarks.
c5 won't import any text from the page, you have to manually add it to the page, or have a script import it into the db,
Hmm...if I understand you correctly Mnkras then the text inside the HTML page I am importing shows up in the admin interface okay but it's not editable because it's not contained within a block that is stored inside the DB.
As you say, I can create a block and copy and paste that text into that block and make it editable that way or manipulate the DB manually through a script to do the importing for me.
What does the $c inside the display($c) stand for?
No other letter seems to work there but c for some reason.
Carlos
As you say, I can create a block and copy and paste that text into that block and make it editable that way or manipulate the DB manually through a script to do the importing for me.
What does the $c inside the display($c) stand for?
No other letter seems to work there but c for some reason.
Carlos
In this case $c is the Collection Object, for example if you wanted to display an area from another page, you could do
$homepage = Page::getById('1'); $a->display($homepage);
Hmm...interesting.
Thanks for your help Mnkras.
I am going to play around with it some with the new understanding you've given me.
Carlos
Thanks for your help Mnkras.
I am going to play around with it some with the new understanding you've given me.
Carlos
Hi,
It sounds like you may be figuring this out, and Mnkras is correct about everything he said. But sometimes it helps to hear the same answer a different way, so here it goes...
The difference between <div id="header"> and $a=new Area('Header') is that the former is for html that is the SAME on every page, whereas the latter is for html that is DIFFERENT on every page. You as the site designer need to decide what is the same on every page versus what is different on every page. Things that are the same on every page get plain old html just like any other website you'd build, but things that are different on every page get this:
So in your example, the <div id="header"> and </div> are going to appear on every page (because they're plain old HTML), but the snippet of php code is how you tell the CMS "this is where I want stuff that's different on every page to go". It is just a complete coincidence that both have the word "header" in them -- in the php code that could be called anything -- $a = new Area('Main') or $a = new Area('Main Content') or $a = new Area('Sidebar') or $a = new Area('Chicken Pot Pie').
It also sounds like some of the confusion is coming from the fact that you already have a site with content that you're trying to convert, and as Mnkras noted, you can't actually "import" it in this way -- instead you want to get rid of it and then after you've built the template go into the site and add it back as content blocks (by logging in, going to the page in question, clicking "Edit Page" in the toolbar, clicking on the dotted area that says "Add to Header" [or maybe it says "Add to Main" or maybe "Add to Main Content" or maybe "Add to Sidebar" or maybe "Add to Chicken Pot Pie" -- again, the fact that it says "Add to Header" has nothing to do with <div id="header">, but rather has to do with $a = new Area('Header')], then choosing "Add Block" from the popup menu, picking "Content" from the list, and pasting it into the editor that comes up (and then saving it and clicking "Exit Edit Mode" in the toolbar and choosing "Publish Changes").
It's not really important to understand what the "$c" means -- it is just part of the incantation that lets Concrete5 do its magic. But if you do want to know, it's a variable that has been set by the Concrete5 system for you. What it has set it to is a bunch of data about the current page (in an ideal world it would be called $p or $page, but due to historical reason it is $c, because a long time ago pages were called "Collections", so a lot of the internal code still uses that, but for all intents and purposes, "collection" and "page" mean the same thing in Concrete5).
The $a variable was NOT set by concrete5, but instead is set by you. When you say "$a = new Area('Header')", you're initializing a user-editable area that will be labelled "Header" (which again, is just a coincidence that you're using the same word as the div's id, because it could be called anything you want). Then the line below it says "okay, now that I've initialized an editable area that I decided to label 'Header', please display the contents of that editable area in the browser" -- the contents of that area will be whatever blocks you or the user has added when logging in, clicking "Edit Page", and clicking "Add Block", etc.
As for why you need to put the $c in there... well, no important reason really, that's just the way the code happens to work. It could have been set up to work differently, but the creators of C5 had to pick something, so that's what it is.
Hope that clears things up a bit.
-Jordan
It sounds like you may be figuring this out, and Mnkras is correct about everything he said. But sometimes it helps to hear the same answer a different way, so here it goes...
The difference between <div id="header"> and $a=new Area('Header') is that the former is for html that is the SAME on every page, whereas the latter is for html that is DIFFERENT on every page. You as the site designer need to decide what is the same on every page versus what is different on every page. Things that are the same on every page get plain old html just like any other website you'd build, but things that are different on every page get this:
<?php $a = new Area('Header'); $a->display($c); ?>
So in your example, the <div id="header"> and </div> are going to appear on every page (because they're plain old HTML), but the snippet of php code is how you tell the CMS "this is where I want stuff that's different on every page to go". It is just a complete coincidence that both have the word "header" in them -- in the php code that could be called anything -- $a = new Area('Main') or $a = new Area('Main Content') or $a = new Area('Sidebar') or $a = new Area('Chicken Pot Pie').
It also sounds like some of the confusion is coming from the fact that you already have a site with content that you're trying to convert, and as Mnkras noted, you can't actually "import" it in this way -- instead you want to get rid of it and then after you've built the template go into the site and add it back as content blocks (by logging in, going to the page in question, clicking "Edit Page" in the toolbar, clicking on the dotted area that says "Add to Header" [or maybe it says "Add to Main" or maybe "Add to Main Content" or maybe "Add to Sidebar" or maybe "Add to Chicken Pot Pie" -- again, the fact that it says "Add to Header" has nothing to do with <div id="header">, but rather has to do with $a = new Area('Header')], then choosing "Add Block" from the popup menu, picking "Content" from the list, and pasting it into the editor that comes up (and then saving it and clicking "Exit Edit Mode" in the toolbar and choosing "Publish Changes").
It's not really important to understand what the "$c" means -- it is just part of the incantation that lets Concrete5 do its magic. But if you do want to know, it's a variable that has been set by the Concrete5 system for you. What it has set it to is a bunch of data about the current page (in an ideal world it would be called $p or $page, but due to historical reason it is $c, because a long time ago pages were called "Collections", so a lot of the internal code still uses that, but for all intents and purposes, "collection" and "page" mean the same thing in Concrete5).
The $a variable was NOT set by concrete5, but instead is set by you. When you say "$a = new Area('Header')", you're initializing a user-editable area that will be labelled "Header" (which again, is just a coincidence that you're using the same word as the div's id, because it could be called anything you want). Then the line below it says "okay, now that I've initialized an editable area that I decided to label 'Header', please display the contents of that editable area in the browser" -- the contents of that area will be whatever blocks you or the user has added when logging in, clicking "Edit Page", and clicking "Add Block", etc.
As for why you need to put the $c in there... well, no important reason really, that's just the way the code happens to work. It could have been set up to work differently, but the creators of C5 had to pick something, so that's what it is.
Hope that clears things up a bit.
-Jordan
Thanks very much Jordan.
Between what you and Mnkras shared with me things are much, much clearer!
Carlos
Between what you and Mnkras shared with me things are much, much clearer!
Carlos
about
if I have multiple of these do i keep reusing $a? or do I go on to $b..etc?AND if that is the case..what happens when I get to $c?
Thanks
<?php $a = new Area('Header'); $a->display($c); ?>
if I have multiple of these do i keep reusing $a? or do I go on to $b..etc?
<?php $b = new Area('area foo'); $b->display($c); ?>
<?php $c = new Area('area bar'); $c->display($c); ?>
Thanks
you can re-use the variables, just don't use $c, you could use
$omgwtfbbq = new Area('Main'); $omgwtfbbq->display($c);
place that where ever you want to be able to edit c5,thats it, it doesn't generate any markup, no ids or anything, blocks generate the markup.