jshimko / telescope-plugin-hero

A plugin to add a customizable hero banner to your Telescope site.
15 stars 3 forks source link

Setting to hide hero section when user not logged in #3

Open GQAdonis opened 9 years ago

GQAdonis commented 9 years ago

I would like to request that a setting be added to allow the "hero" section to only be visible if there is no logged in user (or vice versa).

In most cases, I would only want users to see this section when not logged in, and this section introduces the site to the user.

Thoughts?

jshimko commented 9 years ago

I'm not sure that's a common enough use case to add it to the plugin for everyone, but you definitely have a few reasonably easy options for adding that behavior yourself. Pretty much all of the customization options you see in the Telescope docs will also work on my plugin (custom templates, custom fields in the HeroSettings collection, etc.).

The easiest would probably be to replace the hero template with a custom version. (http://telescope.readme.io/v0.20/docs/custom-templates)

For example, you could override the current hero template:

<template name="hero">
  {{#if showHero}}
    {{#with heroData}}
      <style type="text/css">
        {{extraCss}}
      </style>
      <section class="hero" style="background-image: url('{{heroImage}}')">
        <div class="hero-inner">
          <div class="copy">
            <h1>{{title}}</h1>
            <h3>{{subheading}}</h3>
            {{{extraHtml}}}
          </div>
        </div>
      </section>
    {{/with}}
  {{/if}}
  {{#if isAdmin}}
    {{> hero_config_overlay}}
  {{/if}}
</template>

with this instead...

<template name="custom_hero">
  {{#if showHero}}
    {{#if currentUser}}
      <!-- if user is logged in, show nothing -->
    {{else}}
      {{#with heroData}}
        <style type="text/css">
          {{extraCss}}
        </style>
        <section class="hero" style="background-image: url('{{heroImage}}')">
          <div class="hero-inner">
            <div class="copy">
              <h1>{{title}}</h1>
              <h3>{{subheading}}</h3>
              {{{extraHtml}}}
            </div>
          </div>
        </section>
      {{/with}}
    {{/if}}
  {{/if}}
  {{#if isAdmin}}
    {{> hero_config_overlay}}
  {{/if}}
</template>

That would show the hero only for users that aren't logged in. Switching the behavior to the opposite would just require moving the hero content to the other side of the {{else}}. Make sense?

The customization above is just implemented with Meteor's built-in {{currentUser}} template helper which returns true if the user is logged in. The logic essentially works like this...

{{#if currentUser}}
  <!-- if user is logged in, show this -->
{{else}}
  <!-- if user is NOT logged in, show this -->
{{/if}}