themetman's picture

Posted by themetman on Mon, Apr 27, 2020 - 2:04am --- Updated: Apr 27 '20 - 2:04am

I have this code to add an image to a page in a custom module.

$build[] = array(
  '#theme' => 'image',
  '#uri' => $uri_nhchart,
);

I have searched the API in Backdrop and Drupal 7 to try and find out how to add any attributes to the image, eg 'alt' or 'align' and also a caption. I cannot find out how to do it.

there must be a simple way by adding something like this into the above code....

'#attributes' => array('alt = "Northern Hemsphere Chart"'),

I would really like to be able to add a caption I have to say with the <figcaption> tag for instance.

Accepted answer

Since you're outputting a themed image, this is the API function that documents the available parameters: theme_image() That explains how to add 'alt' text and other attributes.

As for an image caption, it looks like this might be what you're looking for: theme_filter_caption() It's not as well documented, but looking at the code at the bottom of that page should give you an idea of what parameters to pass.

Hope that helps!

Comments

Mon, Apr 27, 2020 - 2:31am by BWPanda (not verified)

Since you're outputting a themed image, this is the API function that documents the available parameters: theme_image() That explains how to add 'alt' text and other attributes.

As for an image caption, it looks like this might be what you're looking for: theme_filter_caption() It's not as well documented, but looking at the code at the bottom of that page should give you an idea of what parameters to pass.

Hope that helps!

themetman's picture

Wed, Apr 29, 2020 - 3:28am by themetman

Thanks very much for that, @BWPanda I have the Alt and Title working nicely, now to checkout the Caption.

Regards

themetman's picture

Wed, Apr 29, 2020 - 5:15am by themetman

Now for the Caption from the theme_filter_caption in the API

Create the Image with a title (cool! this works)

$img =  array(
  '#theme' => 'image',
  '#uri' => $uri_nhchart,
  '#alt' => 'Sea Ice Extent Chart',
  '#title' => 'Sea Ice Extent Chart',
);

Now create the Caption Parameters

$caption_params = array(
  'item' => $img,
  'caption' => 'Sea Ice Extent Chart',
);

Now to combine using the theme_filter_caption Method

$caption = array(
  '#theme' => 'filter_caption',
  '#variables' => $caption_params,
);

Now to add them the the $build array for output

$build[] = $img;
$build[] = $caption;

But I see no caption, only the image. Also no error in the logs.

Should I be adding the $img and $caption together in some way?

Wed, Apr 29, 2020 - 5:29am by BWPanda (not verified)

If I do this:

$test = theme('filter_caption', array(
  'item' => '<p>Testing<p>',
  'caption' => 'Testing 123',
));

Then $test is: <figure><p>Testing<p><figcaption>Testing 123</figcaption></figure>

So 'item' is output as HTML, but in your case you're giving it an array. I think you should do something like this instead:

$caption_params = array(
  'item' => theme('image', array(
    '#uri' => $uri_nhchart,
    '#alt' => 'Sea Ice Extent Chart',
    '#title' => 'Sea Ice Extent Chart',
  )),
  'caption' => 'Sea Ice Extent Chart',
);

Then do the rest as normal, but just remove $build[] = $img; (otherwise you'll output a non-captioned image as well as a captioned one).

themetman's picture

Thu, Apr 30, 2020 - 1:07am by themetman

I understand what you are saying @BWPanda, but nothing is shown on the page, only an error.

I add your code above, then this line:

$build[] = $caption_params;

then these errors:

  • User error: "item" is an invalid render array key in element_children() (line 7236 of /home/francis/FG-Docs/public_html/moduledev.bd/web/core/includes/common.inc).
  • User error: "caption" is an invalid render array key in element_children() (line 7236 of /home/francis/FG-Docs/public_html/moduledev.bd/web/core/includes/common.inc)

This is strange, because I think they are the correct keys, but clearly not!

I had a look in the Examples Module at the Render bit, but could not really work out if there is a clue there?

More help would be appreciated, we are nearly there, and it might help others perhaps.

Thu, Apr 30, 2020 - 11:21am by BWPanda (not verified)

Sorry, I meant for my code to supplement yours, but I should have just given you the full code to avoid confusion. This is what you should try:

$caption_params = array(
  'item' => theme('image', array(
    '#uri' => $uri_nhchart,
    '#alt' => 'Sea Ice Extent Chart',
    '#title' => 'Sea Ice Extent Chart',
  )),
  'caption' => 'Sea Ice Extent Chart',
);

$caption = array(
  '#theme' => 'filter_caption',
  '#variables' => $caption_params,
);

$build[] = $caption;
themetman's picture

Fri, May 01, 2020 - 4:45am by themetman

@BWPanda, when I put your code into the module, I see nothing, no Image, no caption and no Errors.