How do I add a cachebreaker to a specific image style in drupal 7? I have one image style on my site that I need to add a cache breaker to. 

Ideally I just want to add . '#' . time() to the end of the src URL.

For instance everywhere the large style is shown the src url is currently something like:

/sites/default/files/styles/large/public/image.jpg?itok=kdkdFf


With cachebreaker:

/sites/default/files/styles/large/public/image.jpg?itok=kdkdFf#1398670388


How do I go about doing this? hook_node_alter?

More info:

I set up a test image editor at http://blakedesign.co.nz/editor/ via Chrome uploading an image and then editing it works fine the modified image shows up in the preview.

On Firefox or IE it actually does work but the old unedited image gets redisplayed from memory.

This can be circumvented if a unique cachebreaker is appended to the source url every time the image is viewed.
Use template_preprocess_field() to set a flag with drupal_static() when a particular style is being used. This function needs to sit in your themes template.php:

function MYTHEME_preprocess_field(&amp;$variables) {
  // Check field type is an image.
  if($variables['element']['#field_type'] == 'image') {
    // Loop over each image.
    foreach($variables['items'] as $k =&gt; $item) {
      // Check the image style is the one we want to append a timestamp to.
      if($variables['element'][$k]['#image_style'] == 'timestamp') {
        // Set a flag to say to modify this URL.
        $append_ts = &amp;drupal_static('append_ts', TRUE);
        $append_ts = TRUE;
      }
    }
  }
}

Then we can use hook_file_url_alter() to modify the URL if the flag is set. This function can live in your themes template.php or a custom module.

function MYMODULE_OR_MYTHEME_file_url_alter(&amp;$uri) {
  // Fetch our flag we set in bartik_preprocess_field.
  $append_ts = &amp;drupal_static('append_ts', FALSE);
  // Fetch an array of URI's that this function has already processed.
  $processed_uris = &amp;drupal_static(__FUNCTION__, array());
  // If the flag is true and we've not already processed this URI...
  if ($append_ts &amp;&amp; !in_array($uri, $processed_uris)) {
    // Add this URI to our processed list.
    $processed_uris[] = $uri;
    // Set flag to false so we only edit this URL.
    $append_ts = FALSE;
    // And finally create the new URL with a timestamp.
    $uri = file_create_url($uri) . '?t=' . time();
  }
}



The use of the flag in this instance is necessary as we can't check what style the image is using in hook_file_url_alter(), but it is possible in template_preprocess_field().



To append a timestamp to the image on the edit node page


Use hook_theme_registry_alter() to add a preprocess function to the image_widget:

function MYMODULE_theme_registry_alter(&amp;$theme_registry) {
  $theme_registry['image_widget']['preprocess functions'][] = 'image_widget_preproccess';
}

In the preprocess load the field instance config settings, and then check them to see which image style is being used. If the correct one then make changes to the markup to add a timestamp:

function image_widget_preproccess(&amp;$element) {

  $entity_type = $element['element']['#entity_type'];
  $field_name = $element['element']['#field_name'];
  $bundle_name = $element['element']['#bundle'];

  $field_instance_info = field_info_instance($entity_type, $field_name, $bundle_name);

  if($field_instance_info['display']['default']['settings']['image_style'] == 'timestamp' &amp;&amp; isset($element['element']['preview']['#markup'])) {
    $element['element']['preview']['#markup'] = str_replace('?itok', '?t='.time().'&amp;itok', $element['element']['preview']['#markup']);
  }

}