About

Text Snippets allow you to expose certain pieces of text as editable areas to content managers - right in the page! This is extremely helpful for editing one-off content that does not come from a Channel Entry.

For example, you may have text in a side bar that lives in a template.



Going the traditional routes supported by EE, you have a few options to change this text:

  1. Have a client that's comfortable editing templates to make the change.
  2. Have a developer make the change.
  3. Create a custom Channel type which can hold sidebar content and then load that specific Channel Entry into the sidebar. Then have your client edit that Channel Entry.
With Text Snippets, your client can simply navigate to a page that contains the text and edit it right in the page!



After clicking save, you'll instantly see your changes without reloading the page. Any other templates that use this snippet will also be updated.

Text Snippets take advantage of the existing snippets structure in Expression Engine. So, all Text Snippets are stored with the rest of your template snippets with the prefix txtsnp_. This way, you still have the freedom to add and edit Text Snippets through the backend - But we don't think you'll want to!

Setup

1. Copy the text_snippets folder into system/expressionengine/third_party/

2. In the admin, go to Addons > Modules. Then find Text Snippets and Install it.

3. In any page that you want to use Text Snippets, just include this tag right before your </body> closer.

{exp:text_snippets:editor}
We usually just put that in a common site footer and we're good to go.

This tag will embed JavaScript and CSS needed to edit Text Snippets in the page. If the current user does not have permission to edit, the tag will not include anything.

Using Text Snippets

Here's an example of using a Text Snippet to set the title in a site's header:

<div id="header">
	<h1>{exp:text_snippets:site_title}</h1>
</div>

Text Snippets can hold any amount of text, so longer content is fine as well.

Creating a New Text Snippet

The Fast Way
You can create Text Snippets directly from your template without having to mess around in the admin. So, let's say you have part of a header template like this:
<div class="nav-item">
	<a href="/about-us">About Us</a>
	Visit this page to learn more about our company and how we can help you!
</div>

Most likely, your header is built with a template and contains hard-coded text that your client can't change. Using Text Snippets, we can quickly turn this into editable text. With the exp:text_snippet:set tag, we can set the name and value of a snippet.

<div class="nav-item">
	<a href="/about-us">About Us</a>
	{exp:text_snippets:set name="about_us_teaser"}Visit this page to learn more 
	about our company and how we can help you!{/exp:text_snippets:set}
</div>

What's going on here? We're telling Text Snippets to set the value of a snippet named about_us_teaser. Since about_us_teaser doesn't exist, it'll automatically be created. The content within the tag is used as the value for the snippet. All we have to do now is reload this page once to invoke the tag and create the Text Snippet.

After reloading the page, replace the exp:text_snippets:set tag with the final snippet tag exp:text_snippets:about_us_teaser. For example:

<div class="nav-item">
	<a href="/about-us">About Us</a>
	{exp:text_snippets:about_us_teaser}
</div>


The Slow Way

You can also create Text Snippets through the admin. In the admin, navigate to Design > Templates > Snippets. Click the "Create a New Snippet" button. Give your snippet a name, like about_us_teaser and prefix it with txt_snp so the final name is txtsnp_about_us_teaser. Then enter a value for your snippet and click Update. You can now use this Text Snippet like so:

<div class="nav-item">
	<a href="/about-us">About Us</a>
	{exp:text_snippets:about_us_teaser}
</div>

Editing Text Snippets

If a user has permission to edit Text Snippets, they will see a yellow highlight when they mouse over editable text. Clicking on the editable text will bring up the edit window. When the user saves their changes, the page will be instantly updated. If the text snippet is used in other templates, those pages will also be updated automatically.

In the Text Snippet editor, you will see a dropdown that let's you select how to handle HTML in the snippet. There are 3 options on how to treat HTML that the user enters:

  1. Escape HTML Tags - If a user types a < or >, this will be escaped so that it shows correctly as < or >.
    e.g. "1 < 2 and 5 > 4" will show as "1 < 2 and 5 > 4".
  2. Allow HTML Tags - If a user types a < or >, this will be treated as HTML. Be aware that the person editing the text could break your page layout if they enter something like </div> or even <script>.
    e.g. "My <b>bold</b> text" will show as "My bold text".
  3. Remove HTML Tags - If a user types a < or >, it will be removed from the text.
    e.g. "My not <b>bold</b> text" will show as "My not bold text".

Who can edit snippets?
Any one in a Member Group with permission "Can access CONTENT: Edit"

Change Log

v 1.0.0

v 1.0.1


Home - Online Help - Contact Us - © 2012 Exotic Objects LLC