149 Posts
10 years ago
6
Topic
Wondering if anyone has any ideas on how to display/render an image caption by pulling the verbiage from the "title" attribute of the image.
I'm using the Image field with the Advanced Mode - so when users are uploading their image, they can also enter the title.
When rendering the content, I'd like to use the verbiage in the "title" image attribute as the caption for the image. I'm using the "Image" variant/size in the content (not a thumb + lightbox combination).
Is there a JS snippet that can be included in the field setup?
I tried playing with CSS and things like img:before {content: attr(title);} but with no success.
Any ideas will be much appreciated. thanks a lot
I'm using the Image field with the Advanced Mode - so when users are uploading their image, they can also enter the title.
When rendering the content, I'd like to use the verbiage in the "title" image attribute as the caption for the image. I'm using the "Image" variant/size in the content (not a thumb + lightbox combination).
Is there a JS snippet that can be included in the field setup?
I tried playing with CSS and things like img:before {content: attr(title);} but with no success.
Any ideas will be much appreciated. thanks a lot
118 Posts
10 years ago
0
Level 1
Hi,
You could use a variation or position override for this. Place your image field alone in a position and in the position override (or variation), you could get the field information (title & alt) through a sql query (or maybe directly thought a $cck->get... call but I'm not sure the img title & alt values can be retrieved directly like this). Doing this, you could customize the code fo your image with your own html and css.
There would be another solution (maybe) with the HTML typo plugin but again, I'm not sur img title & alt can be directly retrieved from the $cck object.
Olivier
You could use a variation or position override for this. Place your image field alone in a position and in the position override (or variation), you could get the field information (title & alt) through a sql query (or maybe directly thought a $cck->get... call but I'm not sure the img title & alt values can be retrieved directly like this). Doing this, you could customize the code fo your image with your own html and css.
There would be another solution (maybe) with the HTML typo plugin but again, I'm not sur img title & alt can be directly retrieved from the $cck object.
Olivier
149 Posts
10 years ago
0
Level 1
Thank you, Olivier, for the tip. This site may end up being maintained by someone else so I'm trying to avoid Position overrides. I'd be OK with creating a new variation but am not sure how that would help me in this case.
If I can't figure out anything else, I'll probably end up with position override but was hoping there are some creative folks who could suggest a thing or two with e.g. the HTML Typo as you mentioned.
Another option, of course, is to create a separate field for the image caption/title but I was trying to keep things simple and avoid GroupX + FieldX (as there's a need for multiple images), especially because the title is already a standard part of the IMG tag.
Anyone has any other ideas re how one could easily pull the title attribute from the image and render it?
If I can't figure out anything else, I'll probably end up with position override but was hoping there are some creative folks who could suggest a thing or two with e.g. the HTML Typo as you mentioned.
Another option, of course, is to create a separate field for the image caption/title but I was trying to keep things simple and avoid GroupX + FieldX (as there's a need for multiple images), especially because the title is already a standard part of the IMG tag.
Anyone has any other ideas re how one could easily pull the title attribute from the image and render it?
98 Posts
10 years ago
0
Level 1
Hi all
I'd like to know this as well as I've been grappling with it for some time now, without any success
I'd like to know this as well as I've been grappling with it for some time now, without any success
10 years ago
0
Level 1
Hello,
I had the same problem. Since there is yet no support of css:after pseudo-elements on image tags, I solved this with jQuery:
This will put out after all images of a document their "title" attribute. This may work until the css solution comes:
I hope this can help you.
I had the same problem. Since there is yet no support of css:after pseudo-elements on image tags, I solved this with jQuery:
This will put out after all images of a document their "title" attribute. This may work until the css solution comes:
I hope this can help you.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('.hascaption').each(function() {
$(this).after( $(this).attr('title') );
});
</script>
</head>
<body>
<img class="hascaption" title="Hello World" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Svg_example_marker_Inkscape.png/128px-Svg_example_marker_Inkscape.png" />
</body>
</html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('.hascaption').each(function() {
$(this).after( $(this).attr('title') );
});
</script>
</head>
<body>
<img class="hascaption" title="Hello World" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Svg_example_marker_Inkscape.png/128px-Svg_example_marker_Inkscape.png" />
</body>
</html>
10 years ago
0
Level 1
Hello MtnPavlas,
this is a very interesting approach to image captions. I would also like to know how to get this to work without position override.
Where did you put this code {content: attr(title);} and did it retrieve anything?
And where did you get the syntax for that?
I know that in Typo HTML we can retrieve field values with *value*. I don't know about retrieving custom attributes, though.
Would be great if someone more knowledgable could enlighten us here.
this is a very interesting approach to image captions. I would also like to know how to get this to work without position override.
Where did you put this code {content: attr(title);} and did it retrieve anything?
And where did you get the syntax for that?
I know that in Typo HTML we can retrieve field values with *value*. I don't know about retrieving custom attributes, though.
Would be great if someone more knowledgable could enlighten us here.
10 years ago
0
Level 1
Ok, jQuery. Thanks for clarifying this, Zwergo.
So MtnPavlas mixed some jQuery syntax into a CSS declaration. That's why it looked so unfamiliar to me.
I'm aware of jQuery and what you can do with it, but thanks for the info anyways.
OliSchwarz's solution works only if you have the desired caption text in the title attribute of .hasCaption elements already. But it doesn't help in this particular case because the problem that the OP was facing is that he doesn't know how to retrieve the image caption text from the cck object. It gets stored in JSON format because he uses the Advanced Mode for images.
So the point of his question is how to get the image caption value from the cck object. It should be there somewhere, I guess. If you'd do some var_dump in a custom template or with the Coding plugin you could find out where the required value lives. Once you know this and can retrieve it, you could do all kinds of fancy stuff with jQuery, also.
So MtnPavlas mixed some jQuery syntax into a CSS declaration. That's why it looked so unfamiliar to me.
I'm aware of jQuery and what you can do with it, but thanks for the info anyways.
OliSchwarz's solution works only if you have the desired caption text in the title attribute of .hasCaption elements already. But it doesn't help in this particular case because the problem that the OP was facing is that he doesn't know how to retrieve the image caption text from the cck object. It gets stored in JSON format because he uses the Advanced Mode for images.
So the point of his question is how to get the image caption value from the cck object. It should be there somewhere, I guess. If you'd do some var_dump in a custom template or with the Coding plugin you could find out where the required value lives. Once you know this and can retrieve it, you could do all kinds of fancy stuff with jQuery, also.
