Forum Discussion

JillianB's avatar
JillianB
Genius
11 years ago

Header with Category IF Statement?

After quite a bit of research, community breaking, and hair pulling I've determined that created a separate header for a sub-community in my larger community domain just isn't going to work. I won't go into all the various aspects that aren't cooperating - but trust me, they are extensive. Eek!

 

What I am curious to know is if there is a way of creating a header with an image component (community logo) that can display a different image depending on category. I'll break it down:

 

Category: Livelihood-Talk (Main Community - Visible by all visitors, registered and non-registered) - Display "The Community" logo

Category: Instructor (Sub-Community - Visible to only those with VIC role) - Display "Virtual Instructor Community" logo

 

Is there any way at all to make this work? I know I can make components themselves visible by role, but this time I have two images that need to look at the category in which the page falls and display the correct logo instead.

 

Thank you for any help at all. It is unbelievably appreciated.

  • MoniqueL's avatar
    MoniqueL
    11 years ago

    Hey Jillian,

     

    Sorry, rather than use category.id, you should try using coreNode.id, e.g. something like

    <#if coreNode.id == "Instructor">
<div class='VIC_community_logo'>
    <a href="/t5/custom/page/page-id/VIC" class="VICcommunityLogo" title="Virtual Instructor Community">Virtual Instructor Community</a>
  <span class="tagline">Looking at life through tax.</span>
</div>

<#else>
<div class='hrb_community_logo'>
      <a href="/" class="communityLogo" title="The Community">The Community</a>
  <span class="tagline">Looking at life through tax.</span>
</div>

</#if>

     

     

  • VarunGrazitti's avatar
    VarunGrazitti
    Boss
    11 years ago

    The better and easier approach here would be the second approach @MoniqueL mentioned, rather than creating and then managing a seperate skin.

    • nathan's avatar
      nathan
      Executive
      11 years ago

      The advantage of the skin approach is that it avoids hard-coding category IDs, and doesn't require a code change if you want to change the categories it applies to later.

       

      Skins can inherit from other skins, which will avoid the need for duplication. So I would suggest creating a new skin 'based on' your existing skin, and then overwriting the images/CSS as appropriate.

    • JillianB's avatar
      JillianB
      Genius
      11 years ago

      Thank you all for your input! Due to time constraints and experience, I think I'm going to try and go with the second solution (IF statement). In the future (and with more time) I know a custom skin would be super helpful and my team has already starting discussing it as a plan.

       

      With that being said, I understand the principle behind the IF statement, but I'm a little fuzzy on how to incorporate it into my existing header logo component. Right now, I have two different logo components which will ideally be combined into one.

       

      Here's the main community logo:

      <div class='hrb_community_logo<#if page.name == "CommunityPage"> hidelogo</#if>'>
  <a href="/" class="communityLogo" title="The Community">The Community</a>
  <span class="tagline">Looking at life through tax.</span>
</div>

       

      And here's the sub-community logo:

      <div class='VIC_community_logo<#if page.name == "CommunityPage"> hidelogo</#if>'>
  <a href="/t5/custom/page/page-id/VIC" class="VICcommunityLogo" title="Virtual Instructor Community">Virtual Instructor Community</a>
</div>

       

      I see how to use IF with <img src>, but I'm unsure where to put it when I'm dealing with <div class>. The only part of the CSS file that I need to change for each image is just the file location itself. They can be the exact same size, alignment, etc.

       

      Thank you all SO much for your help. If I ever meet you at LiNC in the future, I owe you all drinks. :smileyvery-happy:

      • MoniqueL's avatar
        MoniqueL
        Lithium Alumni (Retired)
        11 years ago

        I dont know what your category id is or the rest of your header code, so this is just an example.

         

         

        <#if page.name == "CommunityPage"> hidelogo</#if>

        <#if category.id == "WHATEVER-YOUR-CATEGORY-ID-IS">
<div class='VIC_community_logo'>
            <a href="/t5/custom/page/page-id/VIC" class="VICcommunityLogo" title="Virtual Instructor Community">Virtual Instructor Community</a>
          <span class="tagline">Looking at life through tax.</span>
        </div>
<#else>
        <div class='hrb_community_logo'>
              <a href="/" class="communityLogo" title="The Community">The Community</a>
  <span class="tagline">Looking at life through tax.</span>
</div>
        </#if>

         

  • MoniqueL's avatar
    MoniqueL
    Lithium Alumni (Retired)
    11 years ago

    The easiest way would to be to just create a new custom "child" skin, based on the global community skin, change the logo image in the desktop/mobile wrapper, then through the community admin, apply that child skin to that specific community.

     

    If you dont want to create another skin, you could edit your header code to something like

    <#if category.id == "Instructor">
<img src="/html/assets/instructor-logo.jpg"/>
<#else>
<img src="/html/assets/community-logo.jpg"/>
</#if>