looping an image field with multiple values? alt or text?

Question

I am about to implement a img gallery in a node template. The gallery has the usual HTML markup (a span with bgimage, wrapped by a div...) I do not have any knowledge on php, but - in the last 24h - i was able to modify some code snippets i found:

    <?php
$node = node_load($nid);
$image = field_get_items('node', $node, 'field_project_image');
$image_url =file_create_url($node->field_project_image['und'][0]['uri']);
foreach ($image as $key=>$value) {
$output = field_view_value('node', $node, 'field_project_image', $image[$key], array(
  'type' => 'image',
  'settings' => array(
    'image_style' => 'thumbnail', //place your image style here

  ),
));

print '<div class="singleswipe">';
print '<span id="swipe_bg_image" role="img" style="background-image:url(\'' .$image_url. '\'); background-size:100%; background-position: 50% 50%; background-repeat:no-repeat">';


print '<span class="inner"></span>';

print '</span>';


print '<span class"title">title of the img???</span>';

print '</div>';


}
?>

This works somehow. BUT: it always shows the same picture. (Apparently it is always the same image_url), plus: I don't have any idea how to implement the "title" or "alt" text for every single image. Please, I am in a serious need for help now...

Answer 1

You can follow the below code. Please change 'field_flexslider_example_image' with your field name in content type.

<?php
$node = node_load($nid);

$image = field_get_items('node', $node, 'field_flexslider_example_image');

foreach ($image as $key => $value) {
$output = field_view_value('node', $node, 'field_flexslider_example_image', $image[$key], array(
  'type' => 'image',
  'settings' => array(
    'image_style' => 'thumbnail', //place your image style here

  ),
));

$image_url = file_create_url($value['uri']);
$alt = $value['alt'];
$title = $value['title'];

print '<div class="singleswipe">';
print '<span id="swipe_bg_image" role="img" style="background-image:url(\'' .$image_url. '\'); background-size:100%; background-position: 50% 50%; background-repeat:no-repeat">';


print '<span class="inner"></span>';

print '</span>';


print '<span class"title">' . $title . '</span>';

print '</div>';


}
?>