Add Caption to Single Image Integrated into a Page

TBC · 2018-03-27 07:41:23

I have searched, but cannot find something that I am sure is really easy. There are Backlight pages in which I want just a smaller image integrated into the text. I would like to add a caption underneath, but when I try to do it using the old Dreamweaver tactics (yeah, yeah, I know it doesn't work). I get a band across 100% of the Page Copy area with the image and the caption side by side, not what I had in mind.

I would like it to look like this with the caption under the image:

http://www.bcphotoadventures.com/TESTSI … ographers/

I know I am missing it, but where can I add a 1px line around the Page Copy area?

Thanks, as always to the great supporting team...

Take care,

rod barbee · 2018-03-27 08:23:50

I would like to add a caption underneath, but when I try to do it using the old Dreamweaver tactics (yeah, yeah, I know it doesn't work). I get a band across 100% of the Page Copy area with the image and the caption side by side, not what I had in mind.

use <figure> and <figcaption>
https://www.w3schools.com/tags/tag_figcaption.asp

I know I am missing it, but where can I add a 1px line around the Page Copy area?

You'll need to use custom css.
From the inspector, it looks like the selector can be .the__copy or .the__copy .content depending on where you want the border in relation to the copy (which also depends on the Main Copy max-width versus the page width).
You may need to add some padding to the copy area too. That can be done in the page template.
(assuming you mean the main copy and not copy inside pallet 01 or pallet 02)

Otherwise, you can just use box-shadow in the page template's Main Copy area.

TBC · 2018-03-28 04:01:25

As always, thank you, Rod. After some tweaking, I got the <figure> to behave as I wanted. I am still working on the line spacing, but that will come.

For those who want to place a single image inline with text AND a caption, as shown at http://www.bcphotoadventures.com/TESTSI … ographers/

This is the code I adapted from Rod's link. The class HTMLs come from my css style sheet that is linked to the template:

<figure class="alignright">
<img src="http://www.BCphotoadventures.com/BacklightSingles/HenriCartier-Bresson.jpg" class="alignright" alt="Magnum photographer Henri Cartier-Presson in Paris" width="374" height="244" /><br />
<figcaption align="center" class="CaptionItal">Henri Cartier-Bresson<br />
Used with permission of Magnum Photos</figcaption>
</figure>

There is one glitch, however, and I did something wrong, because now The Turning Gate has invaded the template in three places:

The menu at the top (ignore those xx before many of the menu items that are just reminders for me to work on those pages);
The Social Media area; and
The masthead that used to show not only our logo (uploaded to Backlight) but our tag line!

HELP!

Meanwhile, thanks again, and

Take care,

Last edited by TBC (2018-03-28 04:09:09)

rod barbee · 2018-03-28 04:27:40

what phplugins file are you using on that page template?

TBC · 2018-03-28 04:36:28

None, because I have not yet been able to figure out the phplugins for Backlight with our busy schedule! We are away far more than we are home! Unless... ... I added ttg's in error, not knowing what it would do ... Yup, I knew I had done something terribly wrong. After all, I give ttg credit in the footer along with a link.

You never cease to amaze me at how quickly you target the issue.

Now, to get my tag line to indent more.

Take care, and thanks!

rod barbee · 2018-03-28 04:46:37

Take a look at your page template under Advanced Setup. My guess is that you've enabled phplugins and are using the theturninggate.php file.

TBC · 2018-03-28 04:47:26

Just in case I didn't make it clear, that was the issue.

BTW, did the indent with the old-fashioned  !

Again, thanks

Last edited by TBC (2018-03-28 04:51:20)

rod barbee · 2018-03-28 04:50:40

you could have also used custom css and add padding-left.

TBC · 2018-03-28 04:52:11

More mark-up knowledge to add to my old html and php. This was easy and worked just as well.

Community @ The Turning Gate

#1 2018-03-27 07:41:23

Add Caption to Single Image Integrated into a Page

#2 2018-03-27 08:23:50

Re: Add Caption to Single Image Integrated into a Page

#3 2018-03-28 04:01:25

Re: Add Caption to Single Image Integrated into a Page

#4 2018-03-28 04:27:40

Re: Add Caption to Single Image Integrated into a Page

#5 2018-03-28 04:36:28

Re: Add Caption to Single Image Integrated into a Page

#6 2018-03-28 04:46:37

Re: Add Caption to Single Image Integrated into a Page

#7 2018-03-28 04:47:26

Re: Add Caption to Single Image Integrated into a Page

#8 2018-03-28 04:50:40

Re: Add Caption to Single Image Integrated into a Page

#9 2018-03-28 04:52:11

Re: Add Caption to Single Image Integrated into a Page

Board footer