Thumblie Title/Description Text Justification

Exhibeo
1

Exhibit 2.0.13 using Thumblie theme. I’ve used Thumblie for a long time and its behavior hasn’t changed but just noticed that if the Title is shorter than the Description, the Title is centered over the description but if the Title is longer than the Description, they are left justified. For consistency, it would be nice to have the option to always have them left justified.

2

Hi Fred,

They always seem to be left-aligned for me. Do you have an example where the title is centred?

3

See this page <https://photos.kotler.org/Patagonia/buenos-aires.html> built with Exhibio Thimblie and X-Way back in 2019. Clicking the first photo shows a centered Title as does the 10th photo. Photos 2 and 6 show left alignment. There are probably other examples in this set. The same behavior is present in the current versions of X-Way and Exhibio but I never noticed it before.

Fred

4

Update so as not to confuse you. The page was originally built with Freeway in 2019 but I converted it to X-Way in 2021.

5

Thanks for the example!

The reason this is happening for you, but didn’t previously happen for me, is because you have set a default page style for h1 (Heading 1) elements to be centre-aligned, and titles are added as h1 elements by the Thumblie JavaScript code. The descriptions, by contrast, are added as p (Paragraph) elements, which aren’t centre-aligned - and you probably don’t want to add a default page style that does this! [*]

However, you can get this to happen by adding the following CSS style in the CSS Markup section of the Page Inspector in Xway:

.item1-thumblie_caption h1, .item1-thumblie_caption p { text-align: center }

What this does is to center any h1 or p element that is a descendant of an element of the class .item1-thumblie_caption (which is the class Thumblie gives to the box that contains the title and description). Note that the class name uses the ID that you give to the container box (in Xway or Freeway), so this presupposes that the box ID is item1 (as is currently the case on your page). If you change the box ID in future, you would also need to change the CSS markup.

If you want the titles and descriptions to be consistently aligned left or right, you can do this by changing text-align: center (above) to text-align: left or text-align: right

[*] You might think that you could add a default paragraph style to the box that contains the gallery, but that doesn’t work. This is because the gallery javascript adds the full-size image container to the page rather than to the box.

6

P.S. Looking back at your original post, I see that you actually want the titles and captions to be left-aligned. The CSS Markup for doing that is:

.item1-thumblie_caption h1, .item1-thumblie_caption p { text-align: left }

7

Thanks very much. That worked great. Especially thanks for the note about the name of the box containing the exhibio output. Since I have multiple similar pages, they, of course, all had different item names. I changed them all to photos and modified the CSS accordingly so everything would be consistent.

Fred

8

If you have one gallery per page, you could use the same markup on each page by changing the ID of the gallery boxes in Xway (e.g. to “gallery”).

9

I’ve logged an issue that Thumblie should specify left alignment by default.