Output File for Item(images) in a list

Hi all,

I'm trying to use an image slider with the output of the files_for_item function, but unfortunately, this code:

<?php $itemImage = files_for_item(array('imageSize' => 'fullsize')); ?>
		<?php if($itemImage){ ?>
		<?php echo files_for_item(array('imageSize' => 'fullsize')); ?>

outputs the images of an item in its own divs. All javascript image sliders out there rely on images being in a list, like this:

<ul>
   <li>image 1</li>
   <li>image 2</li>
</ul>

Can somebody help me with the specific function that will output the images of an item into a list? or anyone with a better idea for integration of image sliders for item's images?

You might look at the ShortcodeCarousel plugin, which does similar work via a shortcode and the jCarousel JQuery plugin. The code in the plugin's views/public/carousel.php file will give an example of the pattern you describe.

Depending on how and where you are looking to implement a slider, you might even be able to use it directly, or with some modification. See the developer docs on shortcodes and the end user docs.

Update: sorry, missed that you might actually want many files from the same item, not files from many items. In that case,

$files = $item->getFiles();

Will give you an array of the file objects. Then, something like file_display_url(File $file, $format = 'fullsize') can give you the url you need to put in an img tag, to build it as you need.

Thanks patrickmj for that quick reply! Yes, that's correct. I want many files from the same item. So, building on what you've given me, I guess I need to use foreach loop to output them into a list, like this:

<?php $files = $item->getFiles(); ?>
<ul>
<?php foreach ($files as $file){
   echo "<li><img src='" . file_display_url(File $file, $format = 'fullsize' . "'></li>";
}?>
</ul>

... right?

Haven't tried directly, and it'll vary by the JS tool you're using, but it seems right.

There will likely be some CSS work in the theme to make it as pretty as it should be.

Also note the $format parameter. A square thumbnail might make the display easier to manager.

This is awesome support patrickmj! Noted on the square thumbnail parameter. Will see if it'll fit with the whole look of the theme. Thank you very much patrickmj!

Hi, I just want to update the code block. Hopefully people will find this useful in the future.

<div class="items-main-image">
<?php $files = $item->getFiles(); ?>
<?php $numberOfFiles = count($files); ?> //just checking number of images attached to an item
<?php $itemImage = files_for_item(array('imageSize' => 'fullsize')); ?>
<?php if($itemImage && $numberOfFiles == 1){ ?>
<?php echo files_for_item(array('imageSize' => 'fullsize')); ?> //if just one image, just output normal div
<?php } elseif ($itemImage && $numberOfFiles > 1){ ?>
<?php echo "<ul>" ?>
<?php $files = $item->getFiles(); ?>
<?php foreach ($files as $file){ ?>
<?php echo "<li><img src='" . file_display_url($file, $format = 'fullsize') . "'></li>"; ?> //if multiple images, output in an unordered list
<?php } ?>
<?php echo "</ul>" ?>
<?php } else { ?>
<?php echo '<p class="noimage">There is no image for this dataset</p>' ?> //if there's no images, output this line of description
<?php } ?>
</div>

Note that I've added external jQuery slider to this. I used the Unslider jQuery image slider. Simple setup. Highly recommended.