Thread

Hi,

I’m just building my first site with EE after completing the Michael Boyink training for version 2.4 and have run into a problem that I would really appreciate some help with.

In summary it’s a fairly basic site and at the top of each page there’s an intro section and associated intro image. This will be the same for all pages except the home page where there are to be 3 images in line. Currently these are all contained in <li> elements within an un ordered list. This is just fine except that I need these images to be able to be changed within the CP.

I’m using a variable url_title=”{embed:the_url_title}” to determine if it’s the home page or not and then apply the required images solution depending using an {if} statement. The images for the n.on home pages are obtained from the articles in the misc_content channel

I’ve enclosed the code below for my embeded template page_intro… I’m sure I’m totally missing something here as a new boy and there’s a simple solution so your help really is appreciated.

Many thanks

Rob

<br /> <section id=“intro” class=“group” role=“complementary”><br />   <div class=“intro_text group”><br /> {exp:channel:entries channel="misc_content" limit="1" dynamic="no" disable="categories|member_data|pagination" url_title="{embed:the_url_title}”}<br />     <h1>{title}</h1><br />     {page_body}<br />   </div></p> <p>    <div class=“illustration group”></p> <p> {if url_title =="web-sites-with-focus"}<br />   <ul class=“home”></p> <p>      <li><a href="#">{site_url}images/interface/sample1.png</a></li><br />       <li><a href="#">{site_url}images/interface/sample13.png</a></li><br />       <li class=“last”><a href="#">{site_url}images/interface/sample3.png</a></li><br />       </ul><br /> {if:else}</p> <p>  {intro_images}<br /> <br /> {/if}</p> <p> {/exp:channel:entries}</p> <p>  </div><br /> <br />   </section><br />

Hi,

I’m just building my first site with EE after completing the Michael Boyink training for version 2.4 and have run into a problem that I would really appreciate some help with.

In summary it’s a fairly basic site and at the top of each page there’s an intro section and associated intro image. This will be the same for all pages except the home page where there are to be 3 images in line. Currently these are all contained in <li> elements within an un ordered list. This is just fine except that I need these images to be able to be changed within the CP.

I’m using a variable url_title=”{embed:the_url_title}” to determine if it’s the home page or not and then apply the required images solution depending using an {if} statement. The images for the n.on home pages are obtained from the articles in the misc_content channel

I’ve enclosed the code below for my embeded template page_intro… I’m sure I’m totally missing something here as a new boy and there’s a simple solution so your help really is appreciated.

Many thanks

Rob

<br /> <section id=“intro” class=“group” role=“complementary”><br />   <div class=“intro_text group”><br /> {exp:channel:entries channel="misc_content" limit="1" dynamic="no" disable="categories|member_data|pagination" url_title="{embed:the_url_title}”}<br />     <h1>{title}</h1><br />     {page_body}<br />   </div></p> <p>    <div class=“illustration group”></p> <p> {if url_title =="web-sites-with-focus"}<br />   <ul class=“home”></p> <p>      <li><a href="#">{site_url}images/interface/sample1.png</a></li><br />       <li><a href="#">{site_url}images/interface/sample13.png</a></li><br />       <li class=“last”><a href="#">{site_url}images/interface/sample3.png</a></li><br />       </ul><br /> {if:else}</p> <p>  {intro_images}<br /> <br /> {/if}</p> <p> {/exp:channel:entries}</p> <p>  </div><br /> <br />   </section><br />

Hi Rob - welcome to the EE community!  Here’s hoping that I am only the first to give you a helping hand along your way as you learn the ins and outs of EE.

Ok, for starters, I have a couple of questions:

1) are you using separate template groups for your internal pages or do you have your whole site in one template group?  Either way, when you’re on the “home” page (when you’re on the index template of the template group that you have set in your settings to be your “home” group) there is no first segment on the page.  So when you’re on that home, you see only your domain.com and not your domain.com/template_group, for example.  This can greatly simplify your approach in dynamically determining whether you are on the home page.  On the home page, there is no first segment.  Therefor you could use a simple conditional of:

{if segment_1 == ""}
you are on the home page
{/if}

Taking this approach, the condition is true even if you change your url title for your home page - and so then your template remains unchanged.  With your conditional being hard coded to your url title, if your URL title were to change, your condition is no longer met.

2) the embed:value_here only works when you are pulling that value from another template, passing that value in the process.  So it doesn’t apply here - which is probably why you’re not seeing the results you expect.  To give you an example, let’s say i wanted to use an embed template to pass the title of an entry into an embedded meta tags template that i use in the <head></head> if the site. In my SOURCE template I would do something like this:

{exp:channel:entries channel="my_channel" limit="1" orderby="date" sort="desc" disable="categories|member_data|pagination" dynamic="no"}

{embed="my_embedded_template_group/dynamic_meta_template" the_entry_meta_title="{title}"}

{/exp:channel:entries}

Then in the template I embedded, which I named for demonstration purposes as “dynamic_meta_template”:

<title>{embed:the_entry_meta_title} | {site_name}</title>

So in the fashion that you’ve used it, the embed just doesn’t have any info to insert because it hasn’t been declared in another template prior to being brought into your usage.

3) I might also suggest, while the use of {site_url} is functional, it’s strictly speaking not necessary.  As a global variable, you’re not likely taking a performance hit in EE rendering that in place within the template unless you have a massive number of images in the template, but you can achieve the same thing by using a relative path - so instead of “{site_url}/images/interface/photo1.jpg” you can use the simpler “/images/interface/photo1.jpg”

Anyway, i hope these ideas are useful to you.  Having gotten yourself started with Boyink’s materials on trainee.com you’re well on your way.  I was just relating to someone on Twitter yesterday that his “building a small business site” was my first hand-on experience with EE in late 2008.  Been loving it ever since and trying top help out in the forums when i can because so many in the community kindly answered my questions when i got started with it.

Enjoy, and best of luck!

Hi John,

Thanks for getting back to me so quickly. I agree with your change to the if statement and have made the change so the {if} now looks at the url_segment to determine where you currently are.

I’m using different template groups rather than having everything in the “site” group.

I’m still left with my other question of how I can pull the three images in the <ul> in allowing the client to change the images in the control panel. How would I go about doing this? Do I need to create a seperate channel and then post articles in the channel that just have images and no text? I’m thinking there’s an nice clean way to do this?

<br /> <ul class=“home”></p> <p>    <li>{site_url}images/interface/sample1.png</li><br />     <li>{site_url}images/interface/sample13.png</li><br />     <li class=“last”>{site_url}images/interface/sample3.png</li><br />     </ul><br />

The book is a good into to the topic and I’d be totally lost without it. I just need some solid hands on experience now!!

Look forward to hearing from you soon.

Regards

Rob

Well, fundamentally two ways, each with pros and cons.

1) set up a channel for these heading graphics.  I know it seems like overkill, but you also get tremendous control this way and you keep the editing experience the same as the rest of the site, with full access to the entire array of field types and functionality - so image manipulations, for example, become an available tool - particularly useful to protect the client from themselves while keeping performance high, since the resizing of the image is done at the time of upload rather than on first load of the template (as is the case with front-end resizing tools like the amazing CE Image - which certainly has its place if you not more than just standard crop or constraint resizing).

2) Set them up as global variables, but do so using Low Variables add-on rather than native EE global variables - the reason is simple - keep the client out of the templates area.  If you use EE’s native global variables, they can only be accessed through the templates menu - which you likely want to keep your client away from - not to mention EE global variables lack any sophistication - no “file chooser” or anything like that.  But with Low Variables, which is seriously way more powerful a tool than this example would suggest, you can set up the header images as variables, and when a variable is defined, you get access to many standard EE field types, including the file manager.  The caveat though it, at least as of the time of my writing this, file manipulations are NOT accessible when using Low Variables.  So if you ned to protect your client from uploading an image to that spot that is not already the right dimensions, this wouldn’t be the right option for you, unless you were to employ a front-end resizing add-on like CE Image.  And as you might have guessed, Low Variables is accessible WITHOUT giving your client access to the templates area - you just give them access to the Low Variables module and set their permissions in the module accordingly.

Hope that helps. Fire more questions at will. 😊

Just thought of one more option for you - if the images in question are tied to the intro message itself - then they could just be fields in that misc channel.  And if, as in the case with the home page, you need more than one image, but in other cases you don’t, a really flexible way to achieve this without having to create a predictive number of file fields within the channel, many of which would never be used with pages that require only one image, would be to make your images a part of a Matrix field.  Matrix turns on field into a spreadsheet, within with you define the columns and the editor add rows as necessary - giving them the ability to easily have 3 images tied to your home message, and only 1 tied to other page intros, all with the same field.  It certainly involves a cost, but Matrix is one of those field types where once you get ahold of it, you’ll invariably find many other ways to use it to provide flexibility to the client while maintaining your own sanity as the DB designer.

Hi John,

Thanks again!

Option 1 sounds appealing as it’s quite simple. Just so I’m clear I’d set up a new channel called “Images” for example and the just give it one custom field, for example “site_images” and have this field as a “file” type and then upload the three images into this channel via the the file manager. Then in my code pull in the images into the respective list items using the {site_images} variable between the channel entries pair that would limit the entries to 3. Is that sounding right to you?

With option one a question I have is how would I say pull just the 3rd image into one of the other pages? Would I use the offset parameter given I’d know the order the images were stored in or is there a better way?

The 3rd Option also looks interesting and I looked at the Matrix section in the Boyink training book but would need to understand it further so will look into this as well. I’m trying to keep just to core EE functionality with this site but am trying very hard to make sure I do things correctly so not to develop bad habits. I’m happy to invest in Matrix if it’s the best tool for the job.

Look forward to hearing from you soon.

Regards

Rob

Again, thanks to EE, there’s at least a few ways to do it.  Generally what you’ve described would work.  However, because you’re bringing your intro text in with an entries tag pair, and your conditional and therein the images needs to be inside that tag pair, you have a problem - you can’t really do that.  You can’t next one entries tag pair inside another.  The way around this would be to use an embed - one of the few instances they come in particularly handy.  You would put the images channel tag pair in a separate embedded template in place of where the code for the images would go.

But that being said, I’m getting a sense that a variation of option 3 - even without matrix - may suit you better.  You’ve already got your misc_content channel.  And it sounds like the choice of image for display in the template is tied to what that intro text is.  So in my mind, adding the image field to that channel group would be a bit simpler and more efficient than having the images locked away in their own channel.  All it means is that without an add-on like matrix, you can’t handle the images with a single field - because for the home page at least, you need three.  So with purely native EE setup, you would add three image fields to the field group you are using for misc_content - you know, image1, image2, image 3.  Then in the template, you have a simply conditional already determining if you’re on the home template, in which case you insert all three.  And when you’re not, you just insert the third.

In my mind that would give you a simpler management process than the separate channel, if only because then the relationship between the intro text and the image (or images) is already set in the same channel, rather than your having to get creative in bridging the two channel with a relationship field or hard-coded conditionals.

That make sense? Hope that helps.

Hi John,

I’ve had a stab at option one and have everything up and running with the home_images channel option. I was left with the challenge of the 3rd image needing no right-hand margin so have used the {switch="left|middle|last"} option to cycle through and remove the right-hand margin on the last column. I hope this seems like an efficient solution to you?

Here is my code starting with the page_intro embed:

</p> <p><section id=“intro” class=“group” role=“complementary”><br />   <div class=“intro_text group”><br /> {exp:channel:entries channel="misc_content" limit="1" dynamic="no" disable="categories|member_data|pagination" url_title="{embed:the_url_title}”}<br />     <h1>{title}</h1><br />     {page_body}<br />   </div><br />     <div class=“illustration group”><br /> {if segment_1 ==""}</p> <p>  <ul class=“home”><br />   {embed="embeds/home_images"}<br />       </ul><br />   <br /> {if:else}</p> <p>  {intro_images}<br /> <br /> {/if}<br /> <br /> {/exp:channel:entries}</p> <p>  </div><br /> <br />   </section><br />

and then the new “home_images” embed containing the images just for the home page:
<br /> {exp:channel:entries channel="home_images" limit="3" dynamic="no" disable="categories|member_data|pagination"}<br />   <br />   <li id=”{switch="lcol|mcol|last"}”><a href="#">{home_images}</a></li><br />   <br /> {/exp:channel:entries}<br />

The reason I didn’t go with option 3 (please tell me if I’m wrong with this) is that by adding the images to the misc_content channel I thought my clients would see the {body} entry field as well as the option to change the images which could be confusing? In addition I’m also a little concerned about the multi level embed, it seems sensible to do this but should I repeat this approach in future? Will this have be a performance hit on a bigger site?

Regards

Rob

Hi Rob.  I’ll answer your last question with a resounding “yes”. Embeds do represent a performance issue because they actually run through EE’s template parsing system, whereas something like a global variable or a snippet to not.  This is why you’ll find a lot of the discussion around embeds is largely “avoid unless you have no choice”.  The no choice angle is key - there are times when an embed actually is the most sensible solution.  When you’re in a position of needing to put an entries loop inside another entries loop, and/or pass a variable from one template into another, an embed is a handy way to do this.  Embeds used to be the go-to way to avoid repeating yourself constantly and still have EE’s tags available to you.  Now snippets serve that role for most applications because they’re not as resource intensive.  Certainly when you can avoid an embed, it’s preferable.  I tend to use one main embed in my deployments - and I’m certainly far from the model here, but just sharing what i do - and my main embed is for meta data for an entry being passed from my viewing template into my <head></head> area.  For most other things, I do my damnedest to find a way to make the snippet work for me.  I used to pass my “current location” from my template into my nav template as an embed - which is a technique from train-ee’s tutorials (not sure if it still is given that Mike has updated his book to include snippets, etc). But since my template groups are tied to nav areas anyway, I just instead use a conditional on the basis of the first segment to determine my current location and set the appropriate nav link to “active” status.  That way I can do my nav with a snippet instead of an embed.

So the way you have it now, intro_images is a field in the misc_content channel field group?  And home images are a separate channel?  But aren’t the home images still associated with a specific entry in misc_content?

If one of the entries in misc_content is the home intro message, then tying the images to the message, in the same fashion as you have with the interior images, would keep the client thinking the same way no matter what intro message they’re editing.  The only difference is that for home, all three image fields would be relevant, whereas for all others, only one, is that the right interpretation?

To avoid confusion, you could implement Rob Sanchez’s “entry type” add-on.  It’s free, and give you the ability to create a “type” field that is then used to hide/show fields in your channel’s entry screen.  So for “home” you could display 3 image fields, and for “inside” you could show only the first one.  Just an idea, but it would save the nested embed.

Hi John,

I thought so. I will try to minimise in the future as well. The technique you describe for the active state is still in Mikes updated book for version 2.4 so I have been using that on the two training sites I build plus the current project.

On your second point that’s a yes, the home page will have a slightly different method of updating the images that are associated with the text, I think in this instance it’s okay as I want to be able to have the 3 images updated in the same place.

I have a question re the snippets. When I replace the embed shown here:

{if segment_1 ==”“}

  <ul class=“home”>
  {embed=“embeds/home_images”}
    </ul>

{if:else}

with a snippet that includes the following:

{exp:channel:entries channel="home_images" limit="3" dynamic="no" disable="categories|member_data|pagination"}
 
<li id=”{switch="lcol|mcol|last"}”>{home_images}</li>
 
{/exp:channel:entries}

I get an error. Am I not allowed to use a snippet inside of a conditional?

Thanks for the tip on the entry-type add-on, it could well be helpful. I guess it’s a trade off between the over head of the nested embed and the add on 😊

Regards

Rob

Actually, the error is because the snippet contains an entries tag pair, and you have that nested inside another tag pair in the “parent” template.  So unfortunately when you want to use a snippet, you can’t do that because EE tries to parse the tags within both at the same time since the snippet doesn’t go through the tempting engine separately (while in an embed, the tempting engine is used to parse the embedded template, effectively walling its parsing off from what’s around it).

So in the way you have your template set up, you can’t rely on a snippet to do the work for you - at least not while it is between the entries loop.  However, if you move some things around, like so:

<section id=“intro” class=“group” role=“complementary”>
  <div class=“intro_text group”>
{exp:channel:entries channel=“misc_content” limit=“1” dynamic=“no” disable=“categories|member_data|pagination” url_title=”{embed:the_url_title}”}
    <h1>{title}</h1>
    {page_body}
  </div>
    <div class=“illustration group”>
{if segment_1 != ""}

   {intro_images}

{/if}

{/exp:channel:entries}

{if segment_1 == ""}

  <ul class=“home”>
  {sn_home_images}
      </ul>

{/if}

  </div>

  </section>

This way you can do it.  The conditional inside the entries loop will only be met when you are on something other than the home page - so we’re looking for the opposite of what you were looking for before.  Instead of looking for segment_1 to be empty, we’re looking for when it’s NOT empty.  A simple conditional like this runs faster than a conditional that includes if:else.  I then close the entries loop BEFORE running the conditional looking for segment_1 to be empty.

Because the snippet is now entirely outside the entries loop, it can be used and thus run faster.  And again because it’s inserted using a simple conditional, its performance will be very good.

Make sense?