Formatting text in image caption

pideja · 2017-02-15 01:33:30

I am aware that, at present, Backlight does not support directly text formatting of text in image captions.
But, is it possible using CSS?

Presently I use Lightrooms metadata panel (TITLE and CAPTION) to get information concerning images in a website I am developing. For testing purposes, I only have one image using this type of caption:
http://pideja.ca/duceppe_scenographies/ … single.php

As you can see, the formating is kinda dry. I'm looking to get bold text and, possibly change the typeface.

Can this be done?

rod barbee · 2017-02-15 01:36:44

yes, it's always been possible with custom css
see: http://ttg-tips-and-tricks.barbeephoto. … ight-site/
scroll down to the last tip on that page

pideja · 2017-02-15 06:27:11

Thanks for reminding me, Rod.
Since Backlight only offers one CSS option or file, can I combine CSS instructions for different areas of the site in one CSS file? How to be sure that a specific instruction will apply to it's designated area. I created "contact.css" to have a particular design to the contact form. But, if I want to create CSS for the large image caption, can I add it to the "contact.css" file ?

Last edited by pideja (2017-02-15 06:27:45)

rod barbee · 2017-02-15 06:39:47

But, if I want to create CSS for the large image caption, can I add it to the "contact.css" file ?

Sure. I keep all my css in one file. That makes more sense than each page template needing it's own css file.

pideja · 2017-02-15 06:48:15

Following up on the previous post, here is the content of the "contact.css" :

@media only screen and (min-width: 768px) {
    .contact-form {
    margin: 0 auto !important;
    width: 50%;
    }

.contact-form input {
  max-width: 100% !important;
}

.single_image figcaption {

font-size: 1.00em;

font-family: 'Helvetica Neue', helvetica neue, 'sans serif';
src: url (pideja.ca/duceppe_scenographies/backlight/custom/css/HelveticaNeue.ttf);
text-align: center;

color: #000000;


}

Not too sure about how to implement the chosen typeface (Helvetica Neue), so I put the typeface file within the custom folder and indicated the path in the css file at the "src" line.

It doesn't work so I must be doing something wrong.

rod barbee · 2017-02-15 07:02:50

you should probably use the @font-face rule to bring in the font. That way it's available for any class or text element.
https://www.w3schools.com/cssref/css3_p … e_rule.asp
then add the font-family to classes, etc.

Your url is wrong too. Yours is a relative url. But it should be either

http://pideja.ca/duceppe_scenographies/backlight/custom/css/HelveticaNeue.ttf

or

/pideja.ca/duceppe_scenographies/backlight/custom/css/HelveticaNeue.ttf

pideja · 2017-02-15 07:33:21

Thanks, Rod it works fine.

Now the other issue might be tricky: the text is about credits for the designers of each play illustrated by the photo. I would like the designer names to be in bold.
This text comes from Lightroom/library module/metadata/image caption just under "title".
Can the CSS modify the text style? Lightroom is no text editor but is there a way to modifythe text style within LR?

rod barbee · 2017-02-15 07:57:35

it will have to be done with css.
https://www.w3schools.com/cssref/pr_font_weight.asp

and if it needs to only be one line, you can use a child pseudo selector.
:first-child for the first line and :nth-child(2) for the second line.

pideja · 2017-02-15 22:02:11

Thanks for the tip. Trying to figure out how to implement it.

In the meantime, since I built this site over an existing structure, I'm wondering if I have "junk" files/folders...what do you think?

Folder_tree

Last edited by pideja (2017-02-15 22:02:23)

rod barbee · 2017-02-15 22:41:10

If you're not using any of your pre-Backlight site, then yes, get rid of the old stuff.
Is yous index.php file from Backlight or CE4?
This might help: http://ttg-tips-and-tricks.barbeephoto. … backlight/

On implementing custom CSS: http://backlight.theturninggate.net/doc … tylesheets

pideja · 2017-02-16 00:40:28

I "cleaned out" the site of all unnecessary files and folders...
duceppe_site-map

Site seems to display correctly.

Still trying to set styling of the title and caption of the large image. By the way, are the elements "SAISONS" , "2016-2017", "Les Héros" what is called breadcrumbs? I'm not too sure about how to style these with CSS? I guess in the same way as the image caption.

rod barbee · 2017-02-16 01:13:27

galleries.php is not part of Backlight and can be deleted.

By the way, are the elements "SAISONS" , "2016-2017", "Les Héros" what is called breadcrumbs? I'm not too sure about how to style these with CSS?

yes, those are breadcrumbs. If you need to style them outside the hyperlink settings in Backlight, the selectors are:

ul.breadcrumbs li a and .ul.breadcrumbs li a:hover for the links
and
.ul.breadcrumbs li for the text

more here: http://community.theturninggate.net/vie … 349#p44349

pideja · 2017-02-16 02:29:30

I now can control somewhat the breadcrumbs look. As for the image captions, still can't modify the type using the child pseudo selector.
:first-child for the first item ("mise en scène", "décor", "costumes"... and :nth-child(2) for the second item (names of designers).

The file is now named "duceppe.css":

@media only screen and (min-width: 768px) {
    .contact-form {
    margin: 0 auto !important;
    width: 50%;
    }

.contact-form input {
  max-width: 100% !important;
}

ul.breadcrumbs a {
	color: #001DCA;
	font-weight: bold;
	font-size: 1.20em;
}	
	ul.breadcrumbs li a:hover {
     color: red;
}

.single_image figcaption { 


	text-align: center;
    font-size: 1.00em;
    @font-face {
font-family: Helvetica Neue,'sans serif';
src: url (http://pideja.ca/duceppe_scenographies/backlight/custom/css/HelveticaNeue.ttf);

    color: #000000;

:first-child {
    font-weight: normal;
}
:nth-child(2) {
    font-weight: bold;
}

It's probably a syntax error, but I can't see it for now.

rod barbee · 2017-02-16 05:14:08

I'm sorry, for some reason I thought you meant the thumbnail metadata.

You won't be able to use bold type in just part of the large image caption, it's all on one line and you can't add html to the Lightroom metadata. Nor can you do any text formatting in Lightroom.
So I don't see an easy way to do what you want for the large image caption. However, you may be able to use LUA coding to add "" before a variable and "" after that same variable. (The html tag makes text bold)
See: http://backlight.theturninggate.net/doc … ata_tokens
Someone else would have to guide you through that though; I don't have the time or inclination to go down that rabbit hole

As to the @font-face rule, that should be by itself. And put it at the top of your custom css stylesheet (make sure that there is no space between url and the parentheses).
https://www.w3schools.com/cssref/css3_p … e_rule.asp

@font-face {
       font-family: 'Helvetica Neue';
       src: url(http://pideja.ca/duceppe_scenographies/backlight/custom/css/HelveticaNeue.ttf);
}

Then later, insert the font-family in the specific selector:

.single_image figcaption {
     font-family: 'Helvetica Neue', 'san serif';
     font-size: 1em;
     text-align: center;
     color: #000000;
}

pideja · 2017-02-16 05:50:17

Thanks again for having some time for me, Rod.
I'll try to figure it out or accept the result as it is.

rod barbee · 2017-02-16 06:16:47

As is my wont, I went down that rabbit hole anyway. I was able to use LUA coding to insert before my caption and after my caption.
The problem is that any html in that field won't work anyway, the actual text ... shows up. I even tried swapping out < and > for < and >. No go.

So it looks like there is no way of formatting only part of the text. It's all or nothing.

But I learned a little about using LUA coding with the metadata tokes. So there's that

Community @ The Turning Gate

#1 2017-02-15 01:33:30

Formatting text in image caption

#2 2017-02-15 01:36:44

Re: Formatting text in image caption

#3 2017-02-15 06:27:11

Re: Formatting text in image caption

#4 2017-02-15 06:39:47

Re: Formatting text in image caption

#5 2017-02-15 06:48:15

Re: Formatting text in image caption

#6 2017-02-15 07:02:50

Re: Formatting text in image caption

#7 2017-02-15 07:33:21

Re: Formatting text in image caption

#8 2017-02-15 07:57:35

Re: Formatting text in image caption

#9 2017-02-15 22:02:11

Re: Formatting text in image caption

#10 2017-02-15 22:41:10

Re: Formatting text in image caption

#11 2017-02-16 00:40:28

Re: Formatting text in image caption

#12 2017-02-16 01:13:27

Re: Formatting text in image caption

#13 2017-02-16 02:29:30

Re: Formatting text in image caption

#14 2017-02-16 05:14:08

Re: Formatting text in image caption

#15 2017-02-16 05:50:17

Re: Formatting text in image caption

#16 2017-02-16 06:16:47

Re: Formatting text in image caption

Board footer