How about text above and below a gallery?

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, 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. Create a function using the ttg_scripts hook in your phplugins file. 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 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

When you add text to the 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;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight Versions

Backlight 1.2.3
Pages module 1.2.3
Cart Add-on 4.1.5
Client Response Add-on 7.1.2
Theater Add-on 1.2.5
WordPress Add-on 1.2.5
Publisher 3.2.3

CE4 Versions

note: CE4 is no longer being developed or sold. See this post.

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.10
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2

Subscribe to new posts