Maybe it's just my old eyes, but I can't figure out how to add a <figcaption> to an image in SD.
I'd appreciate direction on how this is done. Thanks!
How to add a figcaption?
Marty
Registered User
49 posts
Inger
Senior Advisor
14,461 posts
Online Now
Well, it seems to me that there is no such thing in SD. If I need a figcaption, I use a simple container div and give it some appropriate class name. But I see the need, so should we suggest that they add the option of a figcaption to the list on the element properties tab where it says 'Change Tag'?
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Marty
Registered User
49 posts
Thanks Inger for confirming that. I agree that this is something that should be available as a property of an image.
Wayan Jaya
Registered User
4,817 posts
Online Now
The <figcaption> tag cannot be added as an attribute or a tag to a picture
Not sure that they will be able to add it as a 'tag' thingy, but it would be great if they could
The only way I have ever found to be able to do it is with a container -tag = figure
and with a background image
then using 'custom' CSS to set the attributes
<div class="container container-2">
<figure class="container text-1">
<figcaption>BABY SITTING</figcaption>
</figure>
</div>
The css for the <head> section
<style>
.text-1 {
width: 100%;
background-color: #000;
color: #fff;
text-align: center;
font-weight: 600;
font-size: 22px;
}
</style>
The tag for the 'content' section
<figcaption>BABY SITTING</figcaption>
result
Not sure that they will be able to add it as a 'tag' thingy, but it would be great if they could
The only way I have ever found to be able to do it is with a container -tag = figure
and with a background image
then using 'custom' CSS to set the attributes
<div class="container container-2">
<figure class="container text-1">
<figcaption>BABY SITTING</figcaption>
</figure>
</div>
The css for the <head> section
<style>
.text-1 {
width: 100%;
background-color: #000;
color: #fff;
text-align: center;
font-weight: 600;
font-size: 22px;
}
</style>
The tag for the 'content' section
<figcaption>BABY SITTING</figcaption>
result
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
Wayan Jaya
Registered User
4,817 posts
Online Now
By the way
when I say the only way,, I mean the only way to do it and to have it pass w3c validation
when I say the only way,, I mean the only way to do it and to have it pass w3c validation
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
Marty
Registered User
49 posts
Hey thanks Wayan, great info as always.
Wayan Jaya
Registered User
4,817 posts
Online Now
Marty wrote:
Hey thanks Wayan, great info as always.
Hey thanks Wayan, great info as always.
By the way
If it's because of "Accessibility" (in other words for partially sighted, users or for people who use "assistive technology' then the image title can suffice (almost it the same as 'imageCaption") giving it a meaningful description that will be read out to the user (as in the example shown previously if it was an image then the title would be "baby sitting' the assistive technology then identifies the container as being a 'figure' containing an image s(peaking out loud image=babysitting) then any other text etc that happens to be in the "figure" element)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … uman-lina/
Frank Cook
Registered User
1,536 posts
The 'figcaption' element can, of course, be added manually to a 'figure' container in SD using the Content switching box as follows.
1. Put the picture element in a container for which the Change Tag has been set to 'figure' in the Element panel.
2. Right-click on the picture element and select Copy HTML.
3. Paste what has just been copied into the Content box of the 'figure' container, adding
That will show in 'Preview on...' but not on the SD canvas or Preview. Since 'figcaption' is an element, and not an attribute or a container, but needs positioning within what is created by the picture element as above, perhaps the programmers could put a new box (Add Figcaption) between the Picture and Alt boxes in the Element panel.
Frank
1. Put the picture element in a container for which the Change Tag has been set to 'figure' in the Element panel.
2. Right-click on the picture element and select Copy HTML.
3. Paste what has just been copied into the Content box of the 'figure' container, adding
<figcaption>caption text</figcaption>
between the closing </picture> and the closing </div> tags.That will show in 'Preview on...' but not on the SD canvas or Preview. Since 'figcaption' is an element, and not an attribute or a container, but needs positioning within what is created by the picture element as above, perhaps the programmers could put a new box (Add Figcaption) between the Picture and Alt boxes in the Element panel.
Frank
Frank Cook
Registered User
1,536 posts
Thanks. It worked in SD where I put it, but being able to put it before or after the picture element is even better, because it means the programmers could simply put it as an extra element in Content > Media.
Frank
Frank
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
