I see that ImageField outputs a TABLE and uses TR's to create the moveable rows that contain the upload fields...

Is there a way to style these into a side-by-side 2x"X" grid?

I have tried using the CSS float property, but the W3C advises against "floating" TABLE rows (TRs). I can't figure out a way to deal with this appropriately.

Thanks,
Jason

CommentFileSizeAuthor
#2 imagefile upload ui.jpg79.52 KBjrosen

Comments

quicksketch’s picture

quicksketch
he/him
commented

ImageField is not responsible for creating tables anywhere. This is probably being output by Views and you should be able to configure the number of columns by editing the view.

jrosen’s picture

jrosen commented
StatusFileSize
new imagefile upload ui.jpg79.52 KB

So, I understand that Views or Drupal .tpl files are responsible for outputting the images after they are uploaded when displayed in an already saved node (or node preview)...

But, doesn't ImageField create it's own user interface for uploading the images? If not, what component creates the HTML user interface for actually uploading the image files?

I attached a screenshot portion showing the UI I am referring to.

Below is an HTML snippet of the HTML UI attached:

<table id="field_job_images_values" class="content-multiple-table sticky-enabled tabledrag-processed sticky-table content-multiple-remove-buttons-processed">
   <thead class="tableHeader-processed">
   </thead>
   <tbody>
      <tr class="draggable odd">
      </tr>
      <tr class="draggable even">
      </tr>
      <tr class="draggable odd">
         <td class="content-multiple-drag">
         </td>
         <td>
            <div id="edit-field-job-images-2-ahah-wrapper">
            <div id="edit-field-job-images-2-upload-wrapper" class="form-item">
            <div class="filefield-element clear-block">
            <div class="widget-edit">
            <input id="edit-field-job-images-2-fid" type="hidden" value="0" name="field_job_images[2][fid]"/>
            <input id="edit-field-job-images-2-list" type="hidden" value="1" name="field_job_images[2][list]"/>
            <div id="edit-field-job-images-2-upload-wrapper" class="form-item">
            <div class="filefield-upload clear-block">
            <input id="edit-field-job-images-2-upload" class="form-file" type="file" size="22" accept="png,gif,jpg,jpeg" name="files[field_job_images_2]"/>
            <input id="edit-field-job-images-2-filefield-upload" class="form-submit ahah-processed" type="submit" value="Upload" name="op"/>
            </div>
            <div class="description">
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
         </td>
         <td class="delta-order">
         </td>
      </tr>
      <tr class="draggable even">
      </tr>
   </tbody>
</table>
quicksketch’s picture

quicksketch
he/him
commented

Ah, okay the uploading UI is provided by ImageField and FileField. The rows for multiple values are actually created by CCK, since all multiple value fields are handled in the same way. You might be able to make it into a grid, but I think I'd take quite a bit of work and you'd no longer be able to order the images, since the drag and drop handles only work with complete vertical rows.

quicksketch’s picture

quicksketch
he/him
commented
Status: Active » Fixed

I'm going to mark this fixed as it's not an ImageField-specific question.

Status: Fixed » Closed (fixed)

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