0

I am trying to add Lightbox feature to images. This is the code I used in the node template.

<p>
<a class="lightbox" href="<?php echo file_create_url($node->field_images['und'][0]['uri']); ?>" data-plugin-options='{"type":"image"}'>
 <?php print render($content['field_images']); ?>
</a>
</p>

This works fine if I have the "field_image" limited to 1 value, but in my case the field_image can have several values (the user can upload several images).

For the first image $node->field_images['und'][0]['uri']) is correct; for the second image the path would be $node->field_images['und'][1]['uri']).

So how should I iterate through multiple images?

UPDATE(per @Clive feedback): Here is my updated code:

<?php if ( ($items = field_get_items('node', $node, 'field_images')) ) {
  foreach ($items as $item) {
   $uri = $item['uri']; ?>
 <p>
<a class="lightbox" href="<?php print $uri ?>" data-plugin-options='{"type":"image"}'>
<?php print render($content['field_images']); ?>
</a>
</p>
<?php 
}
}
?> 

I have 2 issues with it: The URL is not correct per my comment below. Second on every iteration it prints all images. For example if I have 2 images: it prints {img1/url1, img2/url1} and then on the next iteration it prints {img1/url2, img2/url2} instead of img1/url1 on the first iteration and then on the second iteration img2/url2.

How would I modify the 'print render($content[]);' to print partial content?

How would I modify the $uri to print the full URL path?

UPDATE2(per @Rupesh feedback): Here is my updated code:

<?php if ( ($items = field_get_items('node', $node, 'field_images')) ) {
  foreach ($items as $item) {
   $uri = $item['uri']; ?>
 <p>
<a class="lightbox" href="<?php print file_create_url($uri); ?>" data-plugin-options='{"type":"image"}'>
<?php print render($content['field_images']); ?>
</a>
</p>
<?php 
}
}
?> 

Now the only issue I have is that on every iteration it prints all images. For example if I have 2 images: it prints {img1/url1, img2/url1} and then on the next iteration it prints {img1/url2, img2/url2} instead of img1/url1 on the first iteration and then on the second iteration img2/url2.

Now I need I modify the 'print render($content[]);' to print a partial content on every iteration. For example on first iteration it will be print render($content[][0]); and on second iteration it will be print render($content[][1]); etc.

Something like that (it does not work, with a blank page )

<?php for ($i = 0; $i < count($content['field_images']); $i++):  
 print render($content['field_images'][$i]); ?>
 endfor; 
?>

The count is wrong, it outputs 17 instead of just 2 images. What would I change in in the code above to get it to work?

Thanks.

1

You're probably looking for a for loop, but Drupal has a specific function for this, field_get_items():

if ( ($items = field_get_items('node', $node, 'field_images')) ) {
  foreach ($items as $item) {
    $uri = $item['uri'];
  }
}
  • Thanks @Clive. I am closer to a solution. Now print $uri outputs the image link as public://images/circuits/image1.jpg but I want to output the full path of the image, i.e:http://domain/sites/default/files/images/circuits/image1.jpg So how would I change the code to get the Full URL? – Boutros AbiChedid Mar 13 '14 at 21:34
  • @Boutros Go throuh this link drupal.org/node/837794. This post answer your question. – Rupesh Mar 14 '14 at 2:43
  • @Rupesh, thank you. I got this one solved. file_create_url($uri); did the trick and converts it to the url path. – Boutros AbiChedid Mar 14 '14 at 9:32
0

After couple of hours of frustration. Here is my solution to my question.

<?php for ($i = 0; $i < 8; $i++):  ?>
<p>
<a class="lightbox" href="<?php echo file_create_url($node->field_images['und'][$i]['uri']); ?>" data-plugin-options='{"type":"image"}'>
<?php print render($content['field_images'][$i]); ?>
</a>
</p>
<?php endfor; ?> 

I hardcoded $i (not ideal), since I am limiting the number of images that can be uploaded. Not ideal, but it works. Also count($content['field_images']); returns 17 instead of the actual number of images of 2.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.