TTG Tips and Tricks

In the past I’ve seen a number of queries in the forum about how to have text both above and below the thumbnails in an album. This is actually pretty easy to accomplish using jQuery. First you add a bit of script via phplugins, using the ttg_scripts hook (in Backlight 1, see updates below), that will place an element with a specific class where you direct it. Then, when you write your album text, wrap the part that will be moved in a div with that specific class.

The following assumes you’re placing your main copy text before the gallery grid.

First, the script. In Backlight 1, create a function using the ttg_scripts hook in your phplugins file. (Update for Backlight 2 and 3: use the scripts hook in Backlight 2 & 3, see below.) See the phplugins documentation for how to do this.

Add this script after the echo statement.

<!-- Use the .after-text class to move album text below a gallery or slide show, after the .the__gallery div -->
<script>$(".after-text").insertAfter($(".the__gallery"));</script>

The full function  in Backlight 1 looks like this:

function ttg_scripts( $style, $path ) { 
	echo '<!-- Use the .after-text class to move album text below a gallery or slide show, after the .the__gallery div -->
<script>$(".after-text").insertAfter($(".the__gallery"));</script>
';	
} // END

Update for Backlight 2 & 3:

function scripts() { 
	echo '<!-- Use the .after-text class to move album text below a gallery or slide show, after the .the__gallery div -->
<script>$(".after-text").insertAfter($(".the__gallery"));</script>
';	
} // END

When you add text to either the album template or the album itself (or page, if inserting an album into a page), use html and wrap the text with a div that has the class “after-text”. Like so:

<div class="after-text">
<h3>A heading</h3>
<p>Your text.....</p>
<p>Another paragraph...</p>
</div>

See this page for an example.

You can use this same technique to place text above the gallery grid as well. Just use the .insertBefore method instead and wrap your text in a differently named class. Here I’m going to use the class “before-text.”

The script:

<!-- Use the .before-text class to move album text above a gallery or slide show, before the .the__gallery div -->
<script>$(".before-text").insertBefore($(".the__gallery"));</script>

The html:

<div class="before-text">
<h3>A heading</h3>
<p>Your text.....</p>
<p>Another paragraph...</p>
</div>

And another example page with an album and a contact form inserted. The album is set to appear before content so normal page text and the contact form appear beneath the album. The text div wrapped in the “before-text” class appears above the album.

You can then style the text as needed using the .after-text class. For example, adding some left and right padding so the text will line up with other text on the page:

.after-text, .before-text {
padding: 0 24px;
}