ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Duplicating template groups for user based content

October 17, 2012 5:22pm

Subscribe [2]
  • #1 / Oct 17, 2012 5:22pm

    Doug E

    98 posts

    I am making a site that will have mini-sites for staff (some single others married couples). They will have their own main page, work (what they do in their role), story (bio), blog, and maybe more to come. I’ve made 4 templates: index, story, work, blog. I’m then using a preload-replace Low Variable to fill the templates with the correct user’s info (member_id and some custom settings). When people want their own pages, I duplicate the group, name it as they want, then make a preload-replace with their custom values (member_id, privacy settings, etc. see below for a sample). stick this in the top of each of the 4 templates and done.

    Smith (group)
    -index
    -story
    -work
    -blog

    Jones (group)
    -index
    -story
    -work
    -blog


    It is working, but does have a lot of repeating code, not very DRY. At EECI I kept hearing about Stash. It seems stash might be able to make this even more DRY and efficient. However Low pointed out that readable code is better than overly clever code.

    Any ideas to improve this or is is a good way to do this? I do plan to try and remove all markup so it only has snippets. That way I can edit the snippet to change all the templates behavior. However Stash may do this even better, but I’m still foggy on how Stash would work in this scenario. Any ideas or votes for this method are appreciated.

    Template, snippet and pre-replace code:

    index template (using Zoo visitor because of the custom fields I need in members):

    {lv-uscwm-staff-eli}
    <!DOCTYPE html>
    <html lang="en">
    {exp:zoo_visitor:details member_id="{pre_primary}"}
    {lv-uscwm-staff-html-head}
    <body class="home">
     {lv-uscwm-navbar-staff} 
     <!--Main content area-->
    <div id="wrap"> 
     <div class="container">
      <div class="row content-holder">
       <div class="span4">
        {lv-uscwm-staff-sidebar}
       </div>
       <div class="span7 offset1">
        <div class="staff-content">
         <div class="video">
          {member-cf-video}
         </div>
         <div>
          <h3>Welcome to {pre_married} page</h3>
    <p>      {member-cf-welcome}<br />
         </div><br />
         {/exp:zoo_visitor:details}<br />
        </p><h3>Our Latest Update</h3>
    <p>     {exp:channel:entries channel="uscwm-staff-updates" author_id="{pre_authors}" limit="1"}<br />
         <div class="blog-listing"><br />
          </p><h5><a href="http://{segment_1}/updates/{url_title}" class="title">{title}</a></h5>
    <p>      <div class="row"><br />
           <span class="author span2">{author}</span><span class="date span2">{entry_date format="%F %d, %Y"}</span><br />
          </div><br />
          <div class="tag-icon pull-left clear-fix"><br />
           <a href="#">tags</a><br />
          </div><br />
          <ul class="tags inline"><br />
           {exp:tag:tags backspace="2" entry_id="{entry_id}"}<br />
           <li><a href="#">{tag}</a></li>,{/exp:tag:tags}<br />
          </ul><br />
          <div class="summary"><br />
           {uscwm-cf-update-summary}<br />
          </div> <br />
         </div><br />
         {/exp:channel:entries} <br />
        </div><br />
       </div><br />
      </div>  <br />
     </div> <!-- /container --><br />
    <div id="push"></div><br />
    </div> <br />
     {lv-uscwm-footer}<br />
     {lv-uscwm-scripts}<br />
     </body><br />
    </html>

    Sidebar snippet:

    <div class="staff-sidebar textured-box">
     <div class="inset">  
       {exp:channel_images:images limit="1" orderby="random" category="active" entry_id="{entry_id}" field="member-cf-family-photo"}
       <a href="#">{image:url:medium}</a>
       {/exp:channel_images:images}
     </div>
     <h4>{pre_names}</h4>
    <p> <div class=""><br />
      {exp:channel_images:images limit="1" orderby="random" category="active" entry_id="{entry_id}" field="member_avatar"}<br />
      {image:url:small}<br />
      {/exp:channel_images:images}<br />
      {member_bio}<br />
      {exp:channel_images:images limit="1" orderby="random" category="spouse" entry_id="{entry_id}" field="member_avatar"}<br />
      {image:url:small}<br />
      {/exp:channel_images:images}<br />
      {member-cf-spouse-bio}<br />
      </p><h6>Follow Our Ministry</h6>
    <p>  <div class=""><br />
       <ul class="connect"><br />
       {if member-cf-facebook}<li><a href="http://{member-cf-facebook}class=facebook">Facebook</a></li>{/if}<br />
       {if member-cf-twitter}<li><a href="http://www.twitter/{member-cf-twitter}class=twitter">Twitter</a></li>{/if}<br />
       {if member-cf-email-form}<li><a href="http://{member-cf-email-form}class=email">Email</a></li>{/if}<br />
       {if member-cf-vimeo}<li><a href="http://{member-cf-vimeo}class=vimeo">Vimeo</a></li>{/if}<br />
       </ul><br />
      </div><br />
      {member-cf-percent}<br />
      {if member-cf-percent-switch == "public"}<br />
      <div class="support-meter small"> <br />
       Our support level is:<br />
       {member-cf-percent-value}%<br />
       <div class="progress"><br />
       {!--Can this be color coded based on level: under 50 = red, 51-75 yellow?--}<br />
        <div class="bar">/div><br />
       </div><br />
      </div><br />
      {/if}<br />
      {/member-cf-percent}<br />
     </div><br />
    </div>

    Preload_replace:

    {preload_replace:pre_names="Names To Show"}
    {preload_replace:pre_authors="1|11"}
    {preload_replace:pre_married="Our"}
    {preload_replace:pre_privacy="1"}
    {preload_replace:pre_primary="1"}
  • #2 / Oct 22, 2012 9:19pm

    Doug E

    98 posts

    I think I’ve gotten it. It might note be the most elegant use of Stash, but it sure does make things simpler. I now have the following:


    This is my ‘wrapper’ for all my “staff” pages (‘home’, story, work, blog), it uses the Low Variables for the footer, sidebar and other content that repeats on other pages.

    <!DOCTYPE html>
    <html lang="en">
    {exp:zoo_visitor:details parse="inward" member_id="{exp:stash:get name='primary'}"}
    {lv-uscwm-staff-html-head}
    <body class="home">
     {lv-uscwm-navbar-staff}
    <!--Main content area-->
    <div id="wrap"> 
     <div class="container">
      <div class="row content-holder">
       <div class="span4">
        {lv-uscwm-staff-sidebar}
       </div>
    {/exp:zoo_visitor:details}
       <div class="span7 offset1">
        <div class="staff-content">
        {exp:stash:get name='content'}
        </div>
       </div>
      </div>  
     </div> <!-- /container -->
    <div id="push"></div>
    </div> 
     {lv-uscwm-footer}
     {lv-uscwm-scripts}
     </body>
    </html>

    The template for each user (the one I’ll be duplicating for every staff member) is now this:

    {embed="wrappers/staff"}
    {lv-uscwm-staff-jones}
    {lv-uscwm-staff-content-index}

    The magic happens in {lv-uscwm-staff-jones}. This is the variable that will be created for every user. It has all the Stash Set variables:

    {exp:stash:set name="primary"}1{/exp:stash:set}
    {exp:stash:set name="authors"}1|12{/exp:stash:set}
    {exp:stash:set name="names"}first last{/exp:stash:set}
    {exp:stash:set name="private"}yes{/exp:stash:set}
    {exp:stash:set name="share"}share code here{/exp:stash:set}
    {exp:stash:set name="google-analytics"}UA-xxxxxxx{/exp:stash:set}

    If I have 50 staff with their own mini site and need to make a change, I do it in one place. Some of it is in Low Variables, others in the Stash wrapper template. MUCH more manageble than my old method. Only downside is my SQL queries did go up. 95 or so vs 85. However a lot of that can be optimized, I have not done much of that yet. I wanted to get it working first.

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases