I've experienced that images are added more than once - a specially when closing overlays and lightboxes.

I made a small fix in cs_adaptive_image.js that seems to fix my troubles.

Comments

zenlan’s picture

I have come across the same problem in various scenarios and have whittled it down to local conflict with any other ajax that is fired off from a page with an adaptive image embedded. I created a simple and hopefully repeatable demonstration of the issue.

Your patch appears to fix the problem certainly in this test scenario and also with a Views Slideshow block that uses adaptive images.

Test prior to applying the patch:

Build a small module that declares a block that contains a simple form with an ajax callback, the form code is taken from Drupal Ajax Examples.

/**
 * Implements hook_block_info().
 */
function mytester_block_info() {
  $blocks['mytester']['info'] = t('My Tester Block');
  return $blocks;
}

/**
 * Implements hook_block_view().
 */
function mytester_block_view($delta = '') {
  if ($delta == 'mytester') {
    $block['content'] = drupal_get_form('mytester_block_form');
  }
  return $block;
}

function mytester_block_form() {
$form['box'] = array(
    '#type' => 'markup',
    '#prefix' => '<div id="box">',
    '#suffix' => '</div>',
    '#markup' => '<h1>Initial markup for box</h1>',
  );
  $form['submit'] = array(
    '#type' => 'submit',
    '#ajax' => array(
      'callback' => 'mytester_block_form_submit',
      'wrapper' => 'box',
      'name' => 'submit1',
    ),
    '#value' => t('Submit'),
  );
  return $form;;
}

function mytester_block_form_submit(&$form, $form_state) {
  $element = $form['box'];
  $element['#markup'] = "Clicked submit ({$form_state['values']['op']}): " . date('c');
  return $element;
}

Create a View with a block that contains nothing but an image, you will need some Articles with images for this particular view or you can substitute any content type that has an Image field. The Image field formatter is set to 'Image':

$view = new view;
$view->name = 'my_tester_image';
$view->description = '';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'My Tester Image';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['title'] = 'My Tester Image';
$handler->display->display_options['access']['type'] = 'none';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['query']['options']['query_comment'] = FALSE;
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['pager']['type'] = 'some';
$handler->display->display_options['pager']['options']['items_per_page'] = '1';
$handler->display->display_options['style_plugin'] = 'default';
$handler->display->display_options['row_plugin'] = 'fields';
/* Field: Content: Image */
$handler->display->display_options['fields']['field_image']['id'] = 'field_image';
$handler->display->display_options['fields']['field_image']['table'] = 'field_data_field_image';
$handler->display->display_options['fields']['field_image']['field'] = 'field_image';
$handler->display->display_options['fields']['field_image']['label'] = '';
$handler->display->display_options['fields']['field_image']['alter']['alter_text'] = 0;
$handler->display->display_options['fields']['field_image']['alter']['make_link'] = 0;
$handler->display->display_options['fields']['field_image']['alter']['absolute'] = 0;
$handler->display->display_options['fields']['field_image']['alter']['external'] = 0;
$handler->display->display_options['fields']['field_image']['alter']['replace_spaces'] = 0;
$handler->display->display_options['fields']['field_image']['alter']['trim_whitespace'] = 0;
$handler->display->display_options['fields']['field_image']['alter']['nl2br'] = 0;
$handler->display->display_options['fields']['field_image']['alter']['word_boundary'] = 1;
$handler->display->display_options['fields']['field_image']['alter']['ellipsis'] = 1;
$handler->display->display_options['fields']['field_image']['alter']['more_link'] = 0;
$handler->display->display_options['fields']['field_image']['alter']['strip_tags'] = 0;
$handler->display->display_options['fields']['field_image']['alter']['trim'] = 0;
$handler->display->display_options['fields']['field_image']['alter']['html'] = 0;
$handler->display->display_options['fields']['field_image']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_image']['element_default_classes'] = 1;
$handler->display->display_options['fields']['field_image']['hide_empty'] = 0;
$handler->display->display_options['fields']['field_image']['empty_zero'] = 0;
$handler->display->display_options['fields']['field_image']['hide_alter_empty'] = 1;
$handler->display->display_options['fields']['field_image']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_image']['type'] = 'cs_adaptive_image';
$handler->display->display_options['fields']['field_image']['settings'] = array(
  'relationship' => 'none',
  'ui_name' => '',
  'custom_label' => 0,
  'label' => '',
  'element_label_colon' => 0,
  'exclude' => 0,
  'element_type_enable' => 0,
  'element_type' => '',
  'element_class_enable' => 0,
  'element_class' => '',
  'element_label_type_enable' => 0,
  'element_label_type' => '',
  'element_label_class_enable' => 0,
  'element_label_class' => '',
  'element_wrapper_type_enable' => 0,
  'element_wrapper_type' => '',
  'element_wrapper_class_enable' => 0,
  'element_wrapper_class' => '',
  'element_default_classes' => 1,
  'alter' => array(
    'alter_text' => 0,
    'text' => '',
    'make_link' => 0,
    'path' => '',
    'absolute' => 0,
    'replace_spaces' => 0,
    'external' => 0,
    'path_case' => 'none',
    'link_class' => '',
    'alt' => '',
    'rel' => '',
    'prefix' => '',
    'suffix' => '',
    'target' => '',
    'trim' => 0,
    'max_length' => '',
    'word_boundary' => 1,
    'ellipsis' => 1,
    'more_link' => 0,
    'more_link_text' => '',
    'more_link_path' => '',
    'html' => 0,
    'strip_tags' => 0,
    'preserve_tags' => '',
    'trim_whitespace' => 0,
    'nl2br' => 0,
  ),
  'empty' => '',
  'empty_zero' => 0,
  'hide_empty' => 0,
  'hide_alter_empty' => 1,
  'click_sort_column' => 'fid',
  'type' => 'cs_adaptive_image',
  'field_api_classes' => 0,
  'image_link' => '',
  'styles' => array(
    'breakpoint_1' => '',
    'style_1' => '',
    'breakpoint_2' => '',
    'style_2' => '',
    'breakpoint_3' => '',
    'style_3' => '',
    'breakpoint_4' => '',
    'style_4' => '',
    'breakpoint_5' => '',
    'style_5' => '',
    'max_style' => '',
    'fallback_style' => '',
  ),
);
$handler->display->display_options['fields']['field_image']['field_api_classes'] = 0;
/* Sort criterion: Content: Post date */
$handler->display->display_options['sorts']['created']['id'] = 'created';
$handler->display->display_options['sorts']['created']['table'] = 'node';
$handler->display->display_options['sorts']['created']['field'] = 'created';
$handler->display->display_options['sorts']['created']['order'] = 'DESC';
/* Filter criterion: Content: Published */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 1;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
/* Filter criterion: Content: Type */
$handler->display->display_options['filters']['type']['id'] = 'type';
$handler->display->display_options['filters']['type']['table'] = 'node';
$handler->display->display_options['filters']['type']['field'] = 'type';
$handler->display->display_options['filters']['type']['value'] = array(
  'article' => 'article',
);
/* Filter criterion: Content: Image (field_image:fid) */
$handler->display->display_options['filters']['field_image_fid']['id'] = 'field_image_fid';
$handler->display->display_options['filters']['field_image_fid']['table'] = 'field_data_field_image';
$handler->display->display_options['filters']['field_image_fid']['field'] = 'field_image_fid';
$handler->display->display_options['filters']['field_image_fid']['operator'] = 'not empty';

/* Display: My Tester Image Block */
$handler = $view->new_display('block', 'My Tester Image Block', 'block');
$handler->display->display_options['block_description'] = 'My Tester Image Block';
$translatables['my_tester_image'] = array(
  t('Master'),
  t('My Tester Image'),
  t('more'),
  t('Apply'),
  t('Reset'),
  t('Sort by'),
  t('Asc'),
  t('Desc'),
  t('My Tester Image Block'),
);

Place these two blocks on a page somewhere, preferably without other form/ajax/media elements.
Click the button to submit the form. The text in that block should change, the image should be unaffected.

Go to the View and change the Image formatter to 'Adaptive image'.

Refresh the page with the blocks, click the button to submit the form. The text in that block should change, the image should be unaffected but for me 3 duplicate images appear and each time I click the button another 3 duplicate images are added.

Repeat test after applying the patch, for me it worked. Also worked when I substituted my views_slideshow block for the image block, the slideshow continued to work normally.

drew reece’s picture

Does this patch need to add the 'adaptive-image-processed' class?

I thought that was what once('adaptive-image') did?

There is another variation of this issue over at http://drupal.org/node/1667874

david lesieur’s picture

Status: Needs review » Closed (duplicate)

Thanks olemsa for the patch, and zenlan for the detailed report.

Other patches have been proposed in #1667874: Image inserted twice when ajax form submitted on page with CS adaptive images, so even though you have posted first, I'll mark this as a duplicate. You are welcome to review the solutions proposed there.