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 (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;
}

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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.

Subscribe to new posts

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  4 & 5

See the Backlight Modules page on your site for latest Backlight and module versions and changelogs.

You’ll also find the latest version number and download link for the Lightroom Publisher plugin.
(BL 3 and later)

 

Backlight 1 Versions

Backlight 1.2.4
Pages module 1.2.4
Cart Add-on 4.1.7
Client Response Add-on 7.1.3
Theater Add-on 1.2.6
Galleria Add-on 1.0.0
WordPress Add-on 1.2.6
Publisher 3.2.3

Backlight 1 has seen its end of life. See this post.

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