Hi,

I'm not a very experienced drupal views themer or php coder...so please be patient with me.

Short background: I've created a Custom content type called "Project." Each project has a number of text fields, and then using imagefield, a number of photos attached to each project. I've created a view that will list each project page with all the corresponding text fields and images. All of this works great, and normally I'd theme the output and be done with it. HOWEVER, the client has give me some javascript code that allows you to roll over thumbnails to replace the main image. See here for an example:

http://bit.ly/15yqI5

My Drupal current NON-slideshow/ views output generates this code for the images field:

<div class="views-field-field-images-fid">
	<div class="field-content">
		<div class="field-item"> <img class="imagecache imagecache-project_image imagecache-default imagecache-project_image_default" width="580" height="508" title="" alt="" src="XXX/files/imagecache/project_image/img16_1.jpg"/> </div>
		<div class="field-item"> <img class="imagecache imagecache-project_image imagecache-default imagecache-project_image_default" width="580" height="508" title="" alt="" src="XXX/files/imagecache/project_image/img16-2.jpg"/> </div>
		<div class="field-item"> <img class="imagecache imagecache-project_image imagecache-default imagecache-project_image_default" width="580" height="508" title="" alt="" src="XXX/files/imagecache/project_image/img16-3.jpg"/> </div>
		<div class="field-item"> <img class="imagecache imagecache-project_image imagecache-default imagecache-project_image_default" width="580" height="508" title="" alt="" src="XXX/files/imagecache/project_image/img16-4.jpg"/> </div>
		<div class="field-item"> <img class="imagecache imagecache-project_image imagecache-default imagecache-project_image_default" width="580" height="508" title="" alt="" src="XXX/files/imagecache/project_image/img16-5.jpg"/> </div>
	</div>
</div>

But I would like it to generate code like this (so I can implement the already working slideshow code):

<div class="gallery">
	<div class="img-holder"> 
		<span class="illustration" style="z-index: 2;"> <img alt="image" src="images/img16.jpg"/> </span> 
		<span class="illustration"> <img alt="image" src="images/img16-2.jpg"/> </span> 
		<span class="illustration"> <img alt="image" src="images/img16-3.jpg"/> </span> 
		<span class="illustration"> <img alt="image" src="images/img16-4.jpg"/> </span> 
		<span class="illustration"> <img alt="image" src="images/img16-5.jpg"/> </span> 
	</div>
	<div class="thumbs">
		<ul>
			<li> <a class="active" href="#"> <img alt="image" src="images/img16.jpg"/> <em/> </a> </li>
			<li> <a href="#"> <img alt="image" src="images/img16-2.jpg"/> <em/> </a> </li>
			<li> <a href="#"> <img alt="image" src="images/img16-3.jpg"/> <em/> </a> </li>
			<li> <a href="#"> <img alt="image" src="images/img16-4.jpg"/> <em/> </a> </li>
			<li> <a href="#"> <img alt="image" src="images/img16-5.jpg"/> <em/> </a> </li>
		</ul>
	</div>
</div>

I know that I probably have to create a separate images field to generate the thumbnails in my view as well, but basically, I'm trying to customize the output of each image line (not just the group of images). What do you suggest?

Thank you for your help!

Comments

quicksketch’s picture

quicksketch
he/him
commented

Manually theme your content in a node-nameoftype.tpl.php file (sounds like it would be node-project.tpl.php in your case). Use the theme developer tool (part of the Devel package) to see what variables are available. You should be able to do something like:

<ul>
<?php foreach ($field_images as $image): ?>
   <li> <a href="#"> <img alt="image" src="<?php print file_create_url($image['filepath']) ?>"/> <em/> </a> </li>
<?php endif; ?>
</ul>
quicksketch’s picture

quicksketch
he/him
commented
Status: Active » Closed (fixed)
amysteen’s picture

amysteen commented

Just posting this in case it is handy for someone else, I couldn't get the snippet above to work... but this did:

<ul>
<?php foreach((array)$node->field_yourimagefield as $image) { ?>
   <li><img src="<?php print file_create_url($image['filepath']); ?>"/></li>
<?php } ?>
</ul>