• Registered: 2021-10-26
  • Posts: 8

Topic: Gallery Text

Is it possible to change the location of the gallery text? Currently it defaults to under the gallery and visitors have to scroll down to view the text. I would rather have the text at the top and have them scroll down to fully see the gallery. Thanks.

  • Registered: 2012-12-16
  • Posts: 950

Re: Gallery Text

There is no interface option to move the body text from below the gallery to above the gallery in a Juicebox gallery page but it can be done by editing a Showkase source file.

Open the 'showkase/_themes/base/pagetypes/juicebox.tpl' in a plain text editor.
Cut lines 32-37 inclusive:

      <section class="page-body">
        <h2 class="page-title">{$ss_pageTitle}</h2>
        <div class="body-content {$pageBodyLayout}">
          {$ss_pageBody}
        </div>
      </section>

.. and paste them to immediately below line 16:

{block "content"}

Please note that the line numbers above refer to the current version of Showkase (v1.7.6).

Just republish your site after making this change (log into your Showkase admin and click the 'Publish' button) and the body text in all Juicebox gallery pages will appear above the gallery. (If you don't see this immediately, then try clearing your browser's cache to ensure that your browser is fetching the most recent files from your web server.)

I hope this helps.

  • Registered: 2021-10-26
  • Posts: 8

Re: Gallery Text

Thanks Steven that worked! Now not to be a bother but this changes all the galleries on my website. Is it possible to make the text change only for a specific gallery?

Thanks again!

  • Registered: 2012-12-16
  • Posts: 950

Re: Gallery Text

That's a little more difficult to do as all Juicebox gallery pages use the same template.
Being that a modification of the template won't help in this scenario, the first thing to do is to revert the changes I suggested above and just use the stock juicebox.tpl file.

One possible solution would be to use JavaScript to effectively cut and paste the text to a different area of the page. (The suggestion below actually uses jQuery but that's fine as the jQuery JavaScript library is already automatically loaded into each and every Showkase page.)

Try the following:

(1) Make sure you use the stock, unmodified juicebox.tpl file.

(2) Check the id of the page that you want to change. View the source of the page in a web browser, scroll down to the opening <body> tag and it'll look something like this:

<body class="dark type-juicebox page-2 group-0  body-arial headings-bebas ">

The id (CSS class selector) you'll need to remember from this would be 'page-2'.

(3) Now,you'll need to find your theme's custom.js file.
If you use the Kosel theme (for example), then the file you'll need to modify is showkase/_themes/kosel/js/custom.js.
If you use a different theme, just replace 'kosel' in the path with the name of your theme to find the relevant file.

(4) Here's a one-liner which should be added to the file in #3 above to shift the text from below the gallery to above the gallery (but only on the specified page).

$('.page-2 .page-body').detach().prependTo('.content');

Just change 'page-2' to whatever the id of your own page happens to be.

(5) There's no need to republish your site after making this change but you might need to clear your browser's cache before reloading your site.

  • Registered: 2021-10-26
  • Posts: 8

Re: Gallery Text

Thanks Steven that worked perfectly! Now, I actually have two separate gallery pages that I want the text above on. So what I did was just copy the code to a second line and change the page number. It seems to have worked but I know nothing about coding, is this correct and okay to do?

$('.page-6 .page-body').detach().prependTo('.content');
$('.page-8 .page-body').detach().prependTo('.content');

Thanks again for all your help!

  • Registered: 2012-12-16
  • Posts: 950

Re: Gallery Text

Thanks Steven that worked perfectly!

That's great! Thank you for letting me know.

... is this correct and okay to do?

Yes, that's absolutely fine.

You could also use the following one-liner (separating the selectors with a comma):

$('.page-6 .page-body, .page-8 .page-body').detach().prependTo('.content');

... but I actually prefer your two-line approach. It's easier to see at a glance what is going on and is easier to maintain.

It seems to have worked but I know nothing about coding...

The code basically uses the jQuery detach() function to cut the body text (the page-body CSS class) from its regular position on the web page and then uses the jQuery prependTo() function to paste the detached content to the beginning of the page's content section. Adding page-6 to the selector (for example) ensures that this happens only on the page which includes the page-6 CSS class.

Therefore, the first line of your code will have an effect only on page 6 of your site whereas the second line will have an effect only on page 8.
As the same thing is happening to both pages, you can condense the code by combining both selectors (and separating them with a comma) if you like, as I've done with the one-liner above. I'd stick with the two separate lines for readability, though.

Thanks again for all your help!

You're welcome!