Log in Sign Up

Showing and Hiding Stuff

In addition to markers, you can use the power of ClearLake to show and hide things based on various criteria. Suppose that you only want something to show up on the page if the user is logged in? Or you don't want an image to appear unless the content manager has actually added it. This is where cl_visible comes into play.

cl_visible and the Administrator

Once upon a time there was an administrator who didn't want just anyone to see her content. She only wanted this content to be visible when she was logged into her website, so that the prying eyes of the public wouldn't see behind the scenes! One day, a magician taught her a simple spell: cl_visible.

Enough of that. The ClearLake syntax for checking if the current user is an administrator is pretty straightforward:

  <div cl_visible="=CLManager.activeAccount:isAdmin">
    <p>NOTE: Be sure to log out when you finish editing!</p>
  </div>

Now, that particular DIV will not show up unless an administrator is logged in.

NOTE: Believe it or not, this is a shortcut. The full version of the method is:
cl_visible="=CLManager.activeSession.account:isAdmin"
Both methods are equally valid.

Hiding Unedited Content

There are times that you don't want content to appear until the user has actually added something. Having "lorem ipsum" on a live site can be slightly embarrassing, and a blank image where a person's face should be can be off-putting. You can use cl_visible to show or hide things that have not been edited by taking advantage of the fact that if they have not been edited they are not yet in the database. You can check to see if an item is in the database, and then show it if it is. This is usually combined with some logic so that it DOES appear when an administrator has logged in, so the admin can actually add the content when they want.So how is this done? It's pretty much like the above cl_visible="=CLManager.activeAccount:isAdmin, with one minor update. We also want to show it if something exists and the user is NOT logged in. We'll use the logical OR operator, ||, here (that's two vertical pipes):

  <div cl_visible="=CLManager.activeAccount:isAdmin||$monkey">
    <magicedit me_name="monkey">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </magicedit>
  </div>

In plain English this would be like saying, "Show this DIV when an administrator is logged in, or when monkey exists."

Note that this also works for images:

  <div cl_visible="=CLManager.activeAccount:isAdmin||$monkey">
    <img magicedit me_name="monkey" src="placeholder.gif" />
  </div>

Notes on cl_visible

Note that cl_visible will work on any block level HTML element, including HTML5 elements!

If you don't want to wrap your content in a particular tag, you can use a special ClearLake element called a cl_block. When in doubt, just use it. This tag tells ClearLake what to do with the code inside it, and the tag itself is always stripped out before the page is sent to the browser. Here's an example:

  <cl_block cl_visible="=CLManager.activeAccount:isAdmin||$monkey">
    <h1>Primates</h1>
    <magicedit me_name="monkey">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </magicedit>
  </cl_block>

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top