jQuery to output image title / description not working?

Question

I am a novice coder. I'm using Wordpress. I use this working snippet to display image captions below the image:

<script>
  jQuery('.ce-image').find('img').after(function(){
    return jQuery('<p class="image-caption">').text(jQuery (this).attr('caption')); }
);

I would like to also display the title and description fields from my images. But when I plug in title and description into (this.attr('FIELD HERE')) it's not working. I am stuck as to why. The title and description fields do have data in them, but it can't seem to grab it.

For example, this snippet of code doesn't return anything:

<script> jQuery('.ce-image').find('img').after(function() { return jQuery('<p class="image-caption">').text(jQuery (this).attr('title')); }); </script>

Is the syntax different for the title and description fields? Using the alt field is working for me, caption is working, but title and description fields are not. Is there another, similar approach I could be trying? Thanks in advance for any help.

I gave you an answer. Try it out and give me feedback so I can help you. — Razvan Zamfir

Razvan Zamfir Razvan Zamfir · Accepted Answer · 2018-05-19T20:39:58

Try this for title:

<script>
 jQuery('.ce-image').find('img').after(function() {
   return jQuery('<p class="image-title">').text(jQuery (this).attr('title'));
 });
</script>

And this for description:

<script>
 jQuery('.ce-image').find('img').after(function() {
   return jQuery('<p class="image-description">').text(jQuery (this).attr('description'));
 });
</script>

Or, for all of them (caption, description and title):

var $ceImage = jQuery('.ce-image').find('img');
$ceImage.each(function(){
   var image_caption= $(this).attr('caption');
   var image_title = $(this).attr('title');
   var image_description = $(this).attr('description');
   $(this).after('<p class="image-title">' + image_title + '</p><p class="image-caption">' + image_caption + '</p><p class="image-description">' + image_description + '</p>');
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ce-image">
  <img src="https://placeimg.com/300/200/people" caption="Caption 1" title="Title 1" description="Description 1">
</div>
<div class="ce-image">
  <img src="https://placeimg.com/300/200/people" caption="Caption 2" title="Title 2" description="Description 2">
</div>

jQuery to output image title / description not working?

2 Answers