diff --git a/flexslider_picture/flexslider_picture.module b/flexslider_picture/flexslider_picture.module index 921ba14..92043f0 100644 --- a/flexslider_picture/flexslider_picture.module +++ b/flexslider_picture/flexslider_picture.module @@ -12,6 +12,8 @@ function flexslider_picture_theme_registry_alter(&$registry) { $registry['flexslider_list']['file'] = 'flexslider_picture.theme.inc'; $registry['flexslider_list']['theme_path'] = drupal_get_path('module', 'flexslider_picture') . '/theme'; $registry['flexslider_list']['function'] = 'theme_flexslider_picture_list'; + $default_preprocessor = array_search('template_preprocess_flexslider_list', $registry['flexslider_list']['preprocess functions']); + $registry['flexslider_list']['preprocess functions'][(int) $default_preprocessor] = 'template_preprocess_flexslider_picture_list'; $registry['flexslider_list']['includes'][] = $registry['flexslider_list']['theme_path'] . '/' . $registry['flexslider_list']['file']; } @@ -126,6 +128,25 @@ function flexslider_picture_form_ctools_export_ui_edit_item_form_alter(&$form, & ); } + // Colorbox support. + $form['image_style']['colorboxEnabled'] = array( + '#title' => t('Enable colorbox'), + '#type' => 'checkbox', + '#default_value' => (!empty($form_state['item']->options['colorboxEnabled'])) ? $form_state['item']->options['colorboxEnabled'] : '', + ); + $form['image_style']['colorboxImageStyle'] = array( + '#title' => t('Colorbox group'), + '#type' => 'select', + '#default_value' => (!empty($form_state['item']->options['colorboxImageStyle'])) ? $form_state['item']->options['colorboxImageStyle'] : '', + '#required' => FALSE, + '#options' => $options, + '#states' => array( + 'visible' => array( + ':input[name$="image_style[colorboxEnabled]"]' => array('checked' => TRUE), + ), + ), + ); + $form['#submit'][] = '_flexslider_picture_ctools_export_ui_edit_item_form_submit'; } } @@ -140,6 +161,13 @@ function _flexslider_picture_ctools_export_ui_edit_item_form_submit($form, &$for ->key(array('flexslider_optionset' => $form_state['values']['name'])) ->fields($fields); $q->execute(); + + // Add the colorbox options into the generic options field. + // @todo Should we move it into our own table or how likely is it that + // flexslider itself will add colorbox support and thus add "similar" options? + $optionset = &$form_state['optionset']; + $optionset->options['colorboxEnabled'] = !empty($form_state['values']['image_style']['colorboxEnabled']); + $optionset->options['colorboxImageStyle'] = !empty($form_state['values']['image_style']['colorboxImageStyle']) ? $form_state['values']['image_style']['colorboxImageStyle'] : ''; } /** diff --git a/flexslider_picture/theme/flexslider_picture.theme.inc b/flexslider_picture/theme/flexslider_picture.theme.inc index 75c5579..060b09e 100644 --- a/flexslider_picture/theme/flexslider_picture.theme.inc +++ b/flexslider_picture/theme/flexslider_picture.theme.inc @@ -5,64 +5,105 @@ * Picture formatter with flexslider support. */ + /** - * Theme callback. + * Preprocess the items and prepare the item slides to be rendered. + * + * @param $vars */ -function theme_flexslider_picture_list(&$vars) { +function template_preprocess_flexslider_picture_list(&$vars) { + // Call default preprocessor first. + template_preprocess_flexslider_list($vars); + $optionset = &$vars['settings']['optionset']; - if (isset($optionset->imagestyle_type) && !empty($optionset->imagestyle_type) && $optionset->imagestyle_type == 'picture_mapping') { - // Reference configuration variables + + // Check if this is a picture optionset. + $vars['picture_formatter_enabled'] = (isset($optionset->imagestyle_type) && !empty($optionset->imagestyle_type) && $optionset->imagestyle_type == 'picture_mapping'); + + if ($vars['picture_formatter_enabled']) { $items = &$vars['items']; - $attributes = &$vars['settings']['attributes']; - $type = &$vars['settings']['type']; - $output = ''; - // Get the breakpoints based on the mapping - $breakpoint_styles = array(); - $group_name = $optionset->mapping; - $mappings = picture_mapping_load($group_name); - if ($mappings) { - foreach ($mappings->mapping as $breakpoint_name => $multipliers) { - if (!empty($multipliers)) { - foreach ($multipliers as $multiplier => $image_style) { - if (!empty($image_style)) { - if (!isset($breakpoint_styles[$breakpoint_name])) { - $breakpoint_styles[$breakpoint_name] = array(); - } - $breakpoint_styles[$breakpoint_name][$multiplier] = $image_style; - } - } + // Get the breakpoints based on the mapping. + $fallback_image_style = ''; + $mappings = picture_mapping_load($optionset->mapping); + $breakpoint_styles = picture_get_mapping_breakpoints($mappings, $fallback_image_style); + + // If colorbox is enabled build additional configuration. + if (!empty($optionset->options['colorboxEnabled'])) { + // Add additional necessary scripts and styles. + drupal_add_js(drupal_get_path('module', 'picture') . '/picture_colorbox.js'); + drupal_add_js(drupal_get_path('module', 'picture') . '/picture_colorbox.css'); + if (!variable_get('colorbox_inline', 0)) { + drupal_add_js(drupal_get_path('module', 'colorbox') . '/js/colorbox_inline.js'); + } + + $colorbox_fallback_image_style = ''; + $mappings = picture_mapping_load($optionset->options['colorboxImageStyle']); + $colorbox_breakpoints = picture_get_mapping_breakpoints($mappings, $colorbox_fallback_image_style); + } + + // Prepare the item slides to be passed to render(). + foreach ($items as $i => &$item) { + // If the slide hasn't been set, build the slide using the image + // attributes given (assumes we're using a multi-image field) + // @todo need to allow for different types of field and collection fields. + if (!isset($item['slide'])) { + $item['slide'] = array( + '#theme' => 'picture', + '#style_name' => $optionset->imagestyle_normal, + '#uri' => $item['uri'], + '#height' => $item['height'], + '#width' => $item['width'], + '#alt' => $item['alt'], + '#title' => $item['title'], + '#breakpoints' => $breakpoint_styles, + ); + + // If colorbox is enabled change the theming function and add settings. + if (!empty($optionset->options['colorboxEnabled'])) { + $item['slide'] = array( + '#theme' => 'picture_formatter_colorbox', + '#item' => $item, + '#image_style' => $optionset->imagestyle_normal, + '#path' => $item['uri'], + '#colorbox_image_style' => $colorbox_fallback_image_style, + '#colorbox' => $colorbox_breakpoints, + ) + $item['slide']; } } + if (!isset($item['thumb'])) { + $item['thumb'] = image_style_url($optionset->imagestyle_thumbnail, $item['uri']); + } } - // Build the list - if (!empty($items)) { + } +} + +/** + * Theme callback. + */ +function theme_flexslider_picture_list(&$vars) { + if (!empty($vars['picture_formatter_enabled'])) { + // Reference configuration variables. + $attributes = &$vars['settings']['attributes']; + $type = &$vars['settings']['type']; + $output = ''; + + // Build the list. + if (!empty($vars['items'])) { $output .= "<$type" . drupal_attributes($attributes) . '>'; - foreach ($items as $i => $item) { - // If the slide hasn't been set, build the slide using the image - // attributes given (assumes we're using a multi-image field) - // @todo need to allow for different types of field and collection fields - if (!isset($item['slide'])) { - $picture_options = array( - 'style_name' => $optionset->imagestyle_normal, - 'uri' => $item['uri'], - 'height' => $item['height'], - 'width' => $item['width'], - 'alt' => $item['alt'], - 'title' => $item['title'], - 'breakpoints' => $breakpoint_styles, - ); - } + foreach ($vars['items'] as $i => $item) { + $item = render($item['slide']); $output .= theme('flexslider_list_item', array( - 'item' => isset($item['slide']) ? $item['slide'] : theme('picture', $picture_options), - 'thumb' => isset($item['thumb']) ? $item['thumb'] : image_style_url($optionset->imagestyle_thumbnail, $item['uri']), - 'optionset' => $optionset, - )); + 'item' => $item, + 'thumb' => $item['thumb'], + 'optionset' => $vars['settings']['optionset'], + )); } $output .= ""; } return $output; } + // If this isn't a picture optionset use the default theming. return theme_flexslider_list($vars); -} \ No newline at end of file +} diff --git a/picture.module b/picture.module index 53b0fef..68710f9 100644 --- a/picture.module +++ b/picture.module @@ -314,6 +314,7 @@ function picture_theme() { 'variables' => array( 'style_name' => NULL, 'path' => NULL, + 'uri' => NULL, 'width' => NULL, 'height' => NULL, 'alt' => '', @@ -491,27 +492,9 @@ function picture_field_formatter_view($entity_type, $entity, $field, $instance, $link_file = TRUE; } - $breakpoint_styles = array(); $fallback_image_style = ''; - $group_name = $display['settings']['picture_group']; - $mappings = picture_mapping_load($group_name); - if ($mappings) { - foreach ($mappings->mapping as $breakpoint_name => $multipliers) { - if (!empty($multipliers)) { - foreach ($multipliers as $multiplier => $image_style) { - if (!empty($image_style)) { - if (empty($fallback_image_style)) { - $fallback_image_style = $image_style; - } - if (!isset($breakpoint_styles[$breakpoint_name])) { - $breakpoint_styles[$breakpoint_name] = array(); - } - $breakpoint_styles[$breakpoint_name][$multiplier] = $image_style; - } - } - } - } - } + $mappings = picture_mapping_load($display['settings']['picture_group']); + $breakpoint_styles = picture_get_mapping_breakpoints($mappings, $fallback_image_style); if (isset($display['settings']['fallback_image_style']) && !empty($display['settings']['fallback_image_style'])) { $fallback_image_style = $display['settings']['fallback_image_style']; @@ -526,23 +509,7 @@ function picture_field_formatter_view($entity_type, $entity, $field, $instance, if (module_exists('colorbox') && $display['settings']['image_link'] == 'colorbox') { $formatter = 'picture_formatter_colorbox'; $mappings = picture_mapping_load($display['settings']['colorbox']); - if ($mappings) { - foreach ($mappings->mapping as $breakpoint_name => $multipliers) { - if (!empty($multipliers)) { - foreach ($multipliers as $multiplier => $image_style) { - if (!empty($image_style)) { - if (empty($colorbox_fallback_image_style)) { - $colorbox_fallback_image_style = $image_style; - } - if (!isset($breakpoint_styles[$breakpoint_name])) { - $colorbox_breakpoints[$breakpoint_name] = array(); - } - $colorbox_breakpoints[$breakpoint_name][$multiplier] = $image_style; - } - } - } - } - } + $colorbox_breakpoints = picture_get_mapping_breakpoints($mappings, $colorbox_fallback_image_style); } foreach ($items as $delta => $item) { @@ -912,27 +879,10 @@ function picture_file_formatter_picture_view($file, $display, $langcode) { } if (file_entity_file_is_readable($file) && isset($file->image_dimensions)) { - $breakpoint_styles = array(); $fallback_image_style = ''; $group_name = $display['settings']['picture_group']; $mappings = picture_mapping_load($group_name); - if ($mappings) { - foreach ($mappings->mapping as $breakpoint_name => $multipliers) { - if (!empty($multipliers)) { - foreach ($multipliers as $multiplier => $image_style) { - if (!empty($image_style)) { - if (empty($fallback_image_style)) { - $fallback_image_style = $image_style; - } - if (!isset($breakpoint_styles[$breakpoint_name])) { - $breakpoint_styles[$breakpoint_name] = array(); - } - $breakpoint_styles[$breakpoint_name][$multiplier] = $image_style; - } - } - } - } - } + $breakpoint_styles = picture_get_mapping_breakpoints($mappings, $fallback_image_style); if (isset($display['settings']['fallback_image_style']) && !empty($display['settings']['fallback_image_style'])) { $fallback_image_style = $display['settings']['fallback_image_style']; @@ -1087,29 +1037,9 @@ function _picture_filter_prepare_image($image) { } } - $image_render_array = array(); - $breakpoint_styles = array(); $fallback_image_style = ''; - $group_name = $attributes['data-picture-group']; - $mappings = picture_mapping_load($group_name); - - if ($mappings) { - foreach ($mappings->mapping as $breakpoint_name => $multipliers) { - if (!empty($multipliers)) { - foreach ($multipliers as $multiplier => $image_style) { - if (!empty($image_style)) { - if (empty($fallback_image_style)) { - $fallback_image_style = $image_style; - } - if (!isset($breakpoint_styles[$breakpoint_name])) { - $breakpoint_styles[$breakpoint_name] = array(); - } - $breakpoint_styles[$breakpoint_name][$multiplier] = $image_style; - } - } - } - } - } + $mappings = picture_mapping_load($attributes['data-picture-group']); + $breakpoint_styles = picture_get_mapping_breakpoints($mappings, $fallback_image_style); // Make sure we have a src attribute. if (!isset($attributes['src'])) { @@ -1327,3 +1257,42 @@ function picture_wysiwyg_editor_settings_alter(&$settings, $context) { } } } + +/** + * Returns a list with the image styles of a mapping configuration. + * + * @param object $mappings + * The mapping configuration. + * @param string $fallback_image_style + * Reference to access the evaluated fallback image style. + * + * @return array + * List with the image styles of a mapping configuration. + * The array has following structure: + * array( + * breakpoint_name => array( + * multiplier => image_style + * ) + * ) + */ +function picture_get_mapping_breakpoints($mappings, &$fallback_image_style = NULL) { + $breakpoint_styles = array(); + if ($mappings) { + foreach ($mappings->mapping as $breakpoint_name => $multipliers) { + if (!empty($multipliers)) { + foreach ($multipliers as $multiplier => $image_style) { + if (!empty($image_style)) { + if (empty($fallback_image_style)) { + $fallback_image_style = $image_style; + } + if (!isset($breakpoint_styles[$breakpoint_name])) { + $breakpoint_styles[$breakpoint_name] = array(); + } + $breakpoint_styles[$breakpoint_name][$multiplier] = $image_style; + } + } + } + } + } + return $breakpoint_styles; +}