{"authorId":1,"title":{"title":{}},"slug":"setting-body-ids-in-expression-engine","postDate":1233731337,"expiryDate":null,"enabled":1,"fields":{"2":"<p><a href=\"http:\/\/expressionengine.com\/\">Expression Engine<\/a> has become a popular choice to power many sites. I have just begun experimenting with it, and I have been very impressed. One thing that I have been interested in determining was to figure out if I could set an id on the body like I do when building other sites. I have already written one article showing how to do this in <a href=\"http:\/\/trevordavis.net\/blog\/tutorial\/set-a-body-id\/\">PHP and WordPress<\/a>, but this will show how to do it dynamically in Expression Engine.<\/p>\n<!--more-->\n<h2>Why are Body Ids Useful?<\/h2>\n<p>Body ids can be useful for styling sections differently, displaying certain parts of a dynamic template, displaying current navigation states, and many other things.<\/p>\n\n<h3>A Simple Example<\/h3>\n<p>Let&rsquo;s say that I want to have my font size be 14 pixels, <strong>except on the homepage<\/strong>. It would be as easy as this:<\/p>\n\n<div class=\"codeblock\"><code>\nbody&nbsp;&#123;&nbsp;font-size:&nbsp;14px;&nbsp;&#125;<br \/>body#home&nbsp;&#123;&nbsp;font-size:&nbsp;12px;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p><strong>Pretty useful.<\/strong> By using body ids, we now have a unique hook for each section of the website.<\/p>\n\n<h2>Why not Body Classes?<\/h2>\n<p>I do utilize body classes as well. I typically use the body id to indicate the section, then other various items for the body classes.<\/p>\n\n<h3>For Example<\/h3>\n<p>For my own blog, I have some pages that I want to have a left gutter on it so that I can push images, quotes, etc. into the column. I also have another class that indicates when it is a blog article page. So, I can just continue to use multiple classes on the body to help me control the width and layout of the page.<\/p>\n\n<p>Here is what the body element looks like on a blog article on my site:<\/p>\n\n<div class=\"codeblock\"><code>\n&lt;body&nbsp;id=\"blog\"&nbsp;class=\"subpage&nbsp;leftGutter&nbsp;article\"&gt;&nbsp;\n\n<\/code><\/div>\n\n<p>The <strong>subpage class<\/strong> just indicates that it is not the homepage. Not completely necessary since I already have a specific id on the homepage, but it can sometimes become useful.<\/p>\n\n<p>The <strong>leftGutter class<\/strong> is used to push the content area to the right and make it narrower. Then, I can pull elements into the left-hand gutter as well.<\/p>\n\n<p>The <strong>article class<\/strong> is useful because some of the markup for the blog entry information is the same as the homepage and archive pages. Using this class, I can be more specific with my styles to change the way that these elements are displayed on the blog article page.<\/p>\n\n<p>I always try and add classes and id attributes as high up in the tree as possible. This let&rsquo;s me utilize descendant selectors in the CSS without having to add additional classes and ids lower down.<\/p>\n\n<h2>Setting the Body Id in Expression Engine<\/h2>\n<p>I want to have complete control over the body id, so I want to be able to have it set dynamically and also be able to set it statically.<\/p>\n\n<p>So my thought behind this is that first, I want to check to see if the body id was set statically. When I say statically, I mean passing the variable in as an attribute on my embed statement. Next, I will then set the body id dynamically.<\/p>\n\n<h3>Setting the Id Statically<\/h3>\n<p>In order to make changes to the overall website structure simpler, I have a header template the sits in the includes template group. So in all of the other template groups, I embed the header on the page:<\/p>\n\n<div class=\"codeblock\"><code>\n&#123;embed=\"includes\/header\"&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>Then, if for some reason I want to specifically pass in a body id, I can just change it to this:<\/p>\n\n<pre><code>&#123;embed=\"includes\/header\" <strong>body_id=\"contact-us\"<\/strong>&#125;<\/code><\/pre>\n\n<p>So the first step in the header is to check to see if the <strong>embed:body_id<\/strong> variable is set:<\/p>\n<div class=\"codeblock\"><code>\n&lt;body<br \/>&#123;if&nbsp;embed:body_id&#125;<br \/>&nbsp;id=\"&#123;embed:body_id&#125;\"<br \/>&#123;\/if&#125;<br \/>&gt;&nbsp;\n\n<\/code><\/div>\n<p class=\"note\"><em>Note: Line wrapping added for readability.<\/em><\/p>\n\n<h3>Dynamically Setting the Id<\/h3>\n<p>If we are not statically setting the body id, we want to then do it dynamically. My thinking is that I will take advantage of Expression Engine&rsquo;s <a href=\"http:\/\/expressionengine.com\/docs\/templates\/globals\/url_segments.html\">URL segments<\/a> to determine which section we are in.<\/p>\n\n<p>Here is an example of URL segments using the following URL:<\/p>\n\n<div class=\"codeblock\"><code>\nhttp:\/\/ee.trevordavis.net\/index.php\/about\/me\/education\/&nbsp;\n\n<\/code><\/div>\n\n<ul>\n <li>Segment 1 = <strong>about<\/strong><\/li>\n <li>Segment 2 = <strong>me<\/strong><\/li>\n <li>Segment 3 = <strong>education<\/strong><\/li>\n<\/ul>\n\n<p>Then, we can reference each segment like so:<\/p>\n\n<ul>\n <li>Segment 1 = <strong>{segment_1}<\/strong><\/li>\n <li>Segment 2 = <strong>{segment_2}<\/strong><\/li>\n <li>Segment 3 = <strong>{segment_3}<\/strong><\/li>\n<\/ul>\n\n<p>So basically what we want to do is assign the body id the value of <strong>{segment_1}<\/strong> if it is not empty. So continuing on our example:<\/p>\n\n<div class=\"codeblock\"><code>\n&lt;body<br \/>&#123;if&nbsp;embed:body_id&#125;<br \/>&nbsp;id=\"&#123;embed:body_id&#125;\"<br \/>&#123;if:elseif&nbsp;segment_1&#125;<br \/>&nbsp;id=\"&#123;segment_1&#125;\"<br \/>&#123;\/if&#125;<br \/>&gt;&nbsp;\n\n<\/code><\/div>\n\n<p class=\"note\"><em>Note: Line wrapping added for readability.<\/em><\/p>\n\n<p><strong>But wait, what about the homepage?<\/strong> The homepage will have nothing for the value of <strong>{segment_1}<\/strong>, so we can just put in an else statement:<\/p>\n\n<div class=\"codeblock\"><code>\n&lt;body<br \/>&#123;if&nbsp;embed:body_id&#125;<br \/>&nbsp;id=\"&#123;embed:body_id&#125;\"<br \/>&#123;if:elseif&nbsp;segment_1&#125;<br \/>&nbsp;id=\"&#123;segment_1&#125;\"<br \/>&#123;if:else&#125;<br \/>&nbsp;id=\"home\"<br \/>&#123;\/if&#125;<br \/>&gt;&nbsp;\n\n<\/code><\/div>\n\n<p class=\"note\"><em>Note: Line wrapping added for readability.<\/em><\/p>\n\n<p>Here is the line of code without any line wrapping:<\/p>\n<div class=\"codeblock\"><code>\n&lt;body&#123;if&nbsp;embed:body_id&#125;&nbsp;id=\"&#123;embed:body_id&#125;\"&#123;if:elseif&nbsp;segment_1&#125;&nbsp;id=\"&#123;segment_1&#125;\"&#123;if:else&#125;&nbsp;id=\"home\"&#123;\/if&#125;&gt;&nbsp;\n\n<\/code><\/div>\n\n<p>I created a <a href=\"http:\/\/ee.trevordavis.net\/index.php\/\">demo Expression Engine site<\/a> to test this functionality.<\/p>\n\n<p><a href=\"http:\/\/ee.trevordavis.net\/index.php\/\" class=\"more-link\">View Demo Site<\/a><\/p>\n\n<h2>Walking Through the Demo Site<\/h2>\n<p>Since we have body ids for each section and an id on each list item in the navigation, I have created the current state for the navigation with a few simple line of CSS:<\/p>\n<div class=\"codeblock\"><code>\nbody#home&nbsp;ul#primaryNav&nbsp;li#homeNav&nbsp;a,<br \/>body#about&nbsp;ul#primaryNav&nbsp;li#aboutNav&nbsp;a,<br \/>body#services&nbsp;ul#primaryNav&nbsp;li#servicesNav&nbsp;a,<br \/>body#contact-us&nbsp;ul#primaryNav&nbsp;li#contactNav&nbsp;a&nbsp;&#123;<br \/>&nbsp;background:&nbsp;#B3602D;<br \/>&nbsp;border-top-color:&nbsp;#B3602D;<br \/>&nbsp;color:&nbsp;#fff;<br \/>&#125;&nbsp;\n\n<\/code><\/div>\n<p class=\"note\"><em>Note: Line wrapping added for readability.<\/em><\/p>\n\n<p>I also want to show the sidebar on all of the subpages, so I just need 1 more conditional:<\/p>\n<div class=\"codeblock\"><code>\n&#123;if&nbsp;embed:body_id&nbsp;||&nbsp;segment_1&#125;<br \/>&nbsp;&lt;div&nbsp;id=\"sidebar\"&gt;<br \/>&nbsp;&lt;\/div&gt;<br \/>&#123;\/if&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>This is checking to see if {embed:body_id} or {segment_1} are not empty, and displaying the sidebar if one or both are set.<\/p>\n\n<p>These are just a few examples of using a body id in Expression Engine, but the possibilities are endless.<\/p>\n\n<h2>One More Thing<\/h2>\n<p>Another thing that I was trying to figure out was how to create a variable that I could reuse in multiple embed files. So what I want to do is in my conditional statement, determine that the body id should be and assign it to a variable. Then, I want to be able to access that variable in the footer without have to use the same conditional statement.<\/p>\n\n<p><strong>Is this possible?<\/strong> I was messing around with the <strong>{assign_variable}<\/strong> tag, but that didn&rsquo;t seem to do the job because it can only be used in the same template. <strong>Anyone know how to do this?<\/strong> I&rsquo;m relatively new to Expression Engine, so I am still learning. <\/p>","4":{"website":{}}}}