I'm trying to show attached FileFiled ImageField images in a Grid using Views but seems when the View shows the images together and not separated into each Grid space. This also happens if I choose html list. The images are all part of the first list and not a separate list item.

Now if I choose File Upload instead of image then the view will display the attached images properly in a Grid of html list.

Drupal: 6.14
CCK: 6.x-2.6\
FileField: 6.x-3.2
ImageField: 6.x-3.2
Views 6.x-2.8

Thanks

Comments

end user’s picture

end user commented

Ok well here's how the Grid html output looks like with 4 cols and 1 column. If you notice all the images from the multiple imagefile field are put into 1 column and not seperated into a seperate column for each image. I guess I could do this with a list view and then use CSS to create a grid but there's no need for that as tables will do just fine

View Grid 4 Columns

<div class="view-content">
<table class="views-view-grid">
<tbody>
<tr class="row-1 row-first">
<td class="col-1">
<span class="views-field-field-gallery-image-fid">
<div class="field-content">
<div class="field-item field-item-0"><a href="http://www.halimage.com/sites/default/files/PC020827_3.jpg" rel="lightbox[field_gallery_image][&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/gallery/test1&quot; id=&quot;node_link_text&quot;&gt;View Image Details&lt;/a&gt; - &lt;a href=&quot;/sites/default/files/PC020827_3.jpg&quot; target=&quot;_blank&quot; id=&quot;download_link_text&quot;&gt;Download Original&lt;/a&gt;]"><img src="http://www.halimage.com/sites/default/files/imagecache/gallery_image/PC020827_3.jpg" alt="" title=""  width="175" height="175" /></a></div>
<div class="field-item field-item-1"><a href="http://www.halimage.com/sites/default/files/PC020828.jpg" rel="lightbox[field_gallery_image][&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/gallery/test1&quot; id=&quot;node_link_text&quot;&gt;View Image Details&lt;/a&gt; - &lt;a href=&quot;/sites/default/files/PC020828.jpg&quot; target=&quot;_blank&quot; id=&quot;download_link_text&quot;&gt;Download Original&lt;/a&gt;]"><img src="http://www.halimage.com/sites/default/files/imagecache/gallery_image/PC020828.jpg" alt="" title=""  width="175" height="175" /></a></div>
<div class="field-item field-item-2"><a href="http://www.halimage.com/sites/default/files/PC020827_4.jpg" rel="lightbox[field_gallery_image][&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/gallery/test1&quot; id=&quot;node_link_text&quot;&gt;View Image Details&lt;/a&gt; - &lt;a href=&quot;/sites/default/files/PC020827_4.jpg&quot; target=&quot;_blank&quot; id=&quot;download_link_text&quot;&gt;Download Original&lt;/a&gt;]"><img src="http://www.halimage.com/sites/default/files/imagecache/gallery_image/PC020827_4.jpg" alt="" title=""  width="175" height="175" /></a></div>
</div>
</span>
</td>
 <td class="col-2">
</td>
<td class="col-3">
</td>
<td class="col-4">
</td>
</tr>
</tbody>
</table>
</div>

View Grid 1 Column

<div class="view-content">
<table class="views-view-grid">
<tbody>
<tr class="row-1 row-first">
<td class="col-1">
<span class="views-field-field-gallery-image-fid">
<div class="field-content">
<div class="field-item field-item-0"><a href="http://www.halimage.com/sites/default/files/PC020827_3.jpg" rel="lightbox[field_gallery_image][&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/gallery/test1&quot; id=&quot;node_link_text&quot;&gt;View Image Details&lt;/a&gt; - &lt;a href=&quot;/sites/default/files/PC020827_3.jpg&quot; target=&quot;_blank&quot; id=&quot;download_link_text&quot;&gt;Download Original&lt;/a&gt;]"><img src="http://www.halimage.com/sites/default/files/imagecache/gallery_image/PC020827_3.jpg" alt="" title=""  width="175" height="175" /></a></div>
<div class="field-item field-item-1"><a href="http://www.halimage.com/sites/default/files/PC020828.jpg" rel="lightbox[field_gallery_image][&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/gallery/test1&quot; id=&quot;node_link_text&quot;&gt;View Image Details&lt;/a&gt; - &lt;a href=&quot;/sites/default/files/PC020828.jpg&quot; target=&quot;_blank&quot; id=&quot;download_link_text&quot;&gt;Download Original&lt;/a&gt;]"><img src="http://www.halimage.com/sites/default/files/imagecache/gallery_image/PC020828.jpg" alt="" title=""  width="175" height="175" /></a></div>
<div class="field-item field-item-2"><a href="http://www.halimage.com/sites/default/files/PC020827_4.jpg" rel="lightbox[field_gallery_image][&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/gallery/test1&quot; id=&quot;node_link_text&quot;&gt;View Image Details&lt;/a&gt; - &lt;a href=&quot;/sites/default/files/PC020827_4.jpg&quot; target=&quot;_blank&quot; id=&quot;download_link_text&quot;&gt;Download Original&lt;/a&gt;]"><img src="http://www.halimage.com/sites/default/files/imagecache/gallery_image/PC020827_4.jpg" alt="" title=""  width="175" height="175" /></a></div>
</div>
</span>
</td>
</tr>
</tbody>
</table>
</div>
end user’s picture

end user commented

No one noticed this when using Grid View?

quicksketch’s picture

quicksketch
he/him
commented
Status: Active » Fixed

when the View shows the images together and not separated into each Grid space.

Edit the image field configuration within your view and uncheck the option for "Group multiple values" to get each image into a separate slot in the grid.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

end user’s picture

end user commented

Thanks will try that tomorrow.

end user’s picture

end user commented

>uncheck the option for "Group multiple values"

This was the solution. TY