By Zazoustof on

Hello,

I developed a module that is a simple form.
I recover data from my database and I set my options with "'#options' => $list" on my form.
So far, I was recovering just the ID of my objects.

Now, I want to display in addition to ID the image of the object in the form.
Objects are products Drupal Commerce, and they obviously have an "image" field.

Is it possible to display images in my form ?

I'm still stuck, thank you very much if you can help me.

⋅ Categories: Drupal 7.x

Comments

da_solver’s picture

da_solver commented

Hi,
The #markup element allows you to add html elements (I.E. like image) to a Drupal form. Details here;
http://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7#markup-attribute

Hope that helps :)
Good Luck

Zazoustof’s picture

Zazoustof commented

Hi,

Thank you, but i can't use the #markup element with my form, because it's a selection list.
#markup element would have been perfect, but i must use a selection list.

$form['Form']['Form_type'] = array(
  '#required' => '0',
  '#weight' => '0',
  '#type' => 'radios',
  '#options' => $liste,
);

How can i add a picture in the display of every element of $liste ?

rommelxcastro’s picture

rommelxcastro commented

can you show me what are you saving in $liste;

Regards!

Zazoustof’s picture

Zazoustof commented

So, i would like to know if it's possible to display an image in a radios form...

I would have a selection list of radios buttons witch the objects are images...

da_solver’s picture

da_solver commented

Hi,
When you want to add html to your content, Drupal refers to that as "theming" (I am generalizing and summarizing). That means if you want to add image markup, you call the Drupal function theme("image") (AKA theme_image) http://api.drupal.org/api/drupal/includes!theme.inc/function/theme_image/7

If you want a radio button group themed with images, create an array of themed images (keyed by whatever your business requirements are).

I found example here:
http://public-action.org/content/drupal-7-field-api-drupal-7-field-api-simple-example-digging-deeper. Look at Figure 3:

$element['container']['background']['image'] = array(
        '#type' => 'radios',
        '#title' => 'Choose Background Image',
        '#default_value' => $settings['container']['background']['image'],
        '#options' => my_date_field_image_options(),
 );

Source code for my_date_field_image_options() is located here:
http://public-action.org/content/source-code-my-date-module-listing

Note the use of theme("image") in the source code for my_date_field_image_options().

Hope that helps.
Good Luck

bojanz’s picture

bojanz commented

There's an issue around that in the Commerce queue: #1180016: Attributes (colors e.g.) as images in product display ?
Plenty of examples too.

The solution I helped write is http://drupal.org/sandbox/Artusamak/1559106, so you can take a look at the code to see how radios can be replaced with images (taken from the imagefield from the term represented by the option) and how it can degrade.

miksha’s picture

miksha commented

It can be done by adding #prefix (for showing HTML content before the form) or #suffix (for showing HTML content after the form). Just add img tag, class and then use css to position.

From: https://www.drupal.org/node/268072

Form API provides an easy way to add arbitrary html immediately before or after a specific form element. You do so like this:

<?php
$form['form_item'] = array(
  '#type' => 'textfield',
  '#title' => t('My Form Item'),
  '#prefix' => '<a name="my_form_item"></a>', // Add markup before form item
);

?>
and

<?php
$form['form_item'] = array(
  '#type' => 'textfield',
  '#title' => t('My Form Item'),
  '#suffix' => '<hr />', // Add markup after form item
);

?>
Warning

While this approach works, and can be useful please note that it mixes content and design. The Form API array describes the structure of the form, and the visual look of the form should be handled by theme functions. See the section on theming for details of how to add markup to your forms properly.

sonu.raj.chauhan’s picture

sonu.raj.chauhan commented

You can store the image in the value of the $list array while keeping id of the object in the key of $list array.

eg 

$list = array();
$list['id1'] = theme('image', 'uri of the image related to first object');
$list['id2'] = theme('image', 'uri of the image related to second object');

then you can use the $list array as the option of form radios.