how to delete width and height attributes from image field for particular nodes

Question

I would like to strip width and height attributes from image fields for a few specific nodes.

I tried hook_preprocess_image($vars) but $vars don't have enough information. From the documentation, theme_image() won't have that information, either. I can't figure out the node from the path, because the node is used in a block. Using CSS width:auto !important; does not work, at least with Firefox 16 (and I've read IE 8 has problems with it, too). Any ideas?

Answer 1

You could implement hook_field_attach_view_alter(), which allows modules to alter the rendering array for the entity. Using the following code, I found the array structure for the image field attached to the nodes I was watching.

function code_testing_field_attach_view_alter(&$output, &$context) {
  if ($context['entity_type'] == 'node' && !empty($output['field_image'])) {
    $image = $output['field_image'];
    unset($image['#object']);
    watchdog('code_testing', 'Image: @image', array('@image' => var_export($image, TRUE)), WATCHDOG_DEBUG);
  }
}

In my case, the array had the following structure.

array (
  '#theme' => 'field', '#weight' => '2', '#title' => 'Image',
  '#access' => true, '#label_display' => 'hidden', '#view_mode' => 'full',
  '#language' => 'und', '#field_name' => 'field_image', '#field_type' => 'image',
  '#field_translatable' => '0', '#entity_type' => 'node', '#bundle' => 'article',
  '#items' => array(
    0 => array(
      'fid' => '129', 'alt' => '', 'title' => 'title',
      'width' => '235', 'height' => '568', 'uid' => '1',
      'filename' => 'imagefield_rGEXAF.png',
      'uri' => 'public://field/image/imagefield_rGEXAF.png',
      'filemime' => 'image/png', 'filesize' => '1372', 'status' => '1',
       'timestamp' => '1354109930'
    )
  ),
  '#formatter' => 'image',
  0 => array(
    '#theme' => 'image_formatter',
    '#item' => array(
      'fid' => '129', 'alt' => '',
      'title' => 'title',
      'width' => '235', 'height' => '568', 'uid' => '1',
      'filename' => 'imagefield_rGEXAF.png',
      'uri' => 'public://field/image/imagefield_rGEXAF.png',
      'filemime' => 'image/png', 'filesize' => '1372', 'status' => '1',
      'timestamp' => '1354109930'
    ),
    '#image_style' => 'large', '#path' => ''
  )
)

The code you should write in your module is similar to the following one:

function mymodule_testing_field_attach_view_alter(&$output, &$context) {
  if ($context['entity_type'] == 'node' && !empty($output['field_image'])) {
    // You can check the node ID with context['entity']->nid, and the content type
    // with context['entity']->type.

    unset($output['field_image'][0]['#item']['height']);
    unset($output['field_image'][0]['#item']['width']);
  }
}

Answer 2

You may be able to accomplish this with view modes.

Make some new image styles for these particular images. Implement a theme_image_style(), which checks for this new style name and unsets width and height as needed.

If you install/enable Entity View Modes you can create new view modes for your nodes. Clone what you have for node/teaser to your additional layouts. For the images, change the display settings to use your new styles.

Next is the part I am not sure what the best solution is. One way to use the view mode is to use a Panel page for each individual node. When you add the content, you can set the view mode to one of your new ones. Otherwise, I would try @PierreBuyle's solution at Using a different view mode with a node. This essentially overrides the menu page for node/nid to add some additional intermediate logic to set the view mode.