From 694e19ef42d5aceaa74cf1aa992e94a0f6304f51 Mon Sep 17 00:00:00 2001 From: PackWeb Date: Wed, 16 Dec 2020 20:36:02 +1100 Subject: [PATCH] Various bug fixes and changes. --- README.md | 2 + srcset_image.admin.inc | 154 ----------------------------------------- srcset_image.info | 2 +- srcset_image.module | 100 ++++++++++++++------------ srcset_image.theme.inc | 38 ++++++++-- 5 files changed, 88 insertions(+), 208 deletions(-) delete mode 100644 srcset_image.admin.inc diff --git a/README.md b/README.md index 6af1458..c2aacb2 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,8 @@ attribute for more fine-grained control. Installation ------------ +- Install the [Preset](https://github.com/backdrop-contrib/preset) module. + - Install this module using the official Backdrop CMS instructions at https://backdropcms.org/guide/modules. diff --git a/srcset_image.admin.inc b/srcset_image.admin.inc deleted file mode 100644 index 0272ff5..0000000 --- a/srcset_image.admin.inc +++ /dev/null @@ -1,154 +0,0 @@ - array( - '#type' => 'operations', - '#links' => array( - 'configure' => array( - 'title' => t('Configure'), - 'href' => 'admin/config/media/srcset-image/' . $image_set['machine_name'], - ), - 'delete' => array( - 'title' => t('Delete'), - 'href' => 'admin/config/media/srcset-image/' . $image_set['machine_name'] . '/delete', - ), - ), - ), - ); - - $rows[] = $row; - } - - $table = array( - 'header' => array( - 'Name', - 'Image styles', - 'Operations', - ), - 'rows' => $rows, - 'empty' => t('No srcset Image sets found.'), - ); - - return theme('table', $table); -} - -/** - * Add/edit form for image sets. - */ -function srcset_image_sets_form($form, &$form_state, $image_set = array()) { - // Add default values for new image sets. - $image_set += array( - 'name' => '', - 'machine_name' => '', - 'image_styles' => array(), - ); - - // Get image styles as options for checkboxes. - $options = array(); - foreach (image_styles() as $image_style) { - $options[$image_style['name']] = $image_style['label']; - } - - // Add form fields. - $form['name'] = array( - '#type' => 'textfield', - '#title' => t('Name'), - '#default_value' => $image_set['name'], - '#required' => TRUE, - ); - $form['machine_name'] = array( - '#type' => 'machine_name', - '#default_value' => $image_set['machine_name'], - '#machine_name' => array( - 'exists' => '_srcset_image_set_name_exists', - ), - ); - $form['image_styles'] = array( - '#type' => 'checkboxes', - '#title' => t('Image styles'), - '#description' => t('Select the image styles that make up this image set.'), - '#options' => $options, - '#default_value' => $image_set['image_styles'], - '#required' => TRUE, - ); - - $form['actions'] = array( - '#type' => 'actions', - 'submit' => array( - '#type' => 'submit', - '#value' => t('Save image set'), - ), - ); - - return $form; -} - -/** - * Determines whether an image set machine name already exists. - */ -function _srcset_image_set_name_exists($machine_name) { - return (bool) srcset_image_set_load($machine_name); -} - -/** - * Submit image set add/edit form. - */ -function srcset_image_sets_form_submit($form, &$form_state) { - $values = $form_state['values']; - - // Save image set to config. - config_set('srcset_image.sets', $values['machine_name'], array( - 'name' => $values['name'], - 'machine_name' => $values['machine_name'], - 'image_styles' => array_keys(array_filter($values['image_styles'])), - )); - - // Show confirmation message and redirect to list page. - backdrop_set_message(t('The image set %name has been saved.', array('%name' => $values['name']))); - $form_state['redirect'] = 'admin/config/media/srcset-image'; -} - -/** - * Delete form for image sets. - */ -function srcset_image_sets_form_delete($form, &$form_state, $image_set) { - $form['image_set'] = array( - '#type' => 'value', - '#value' => $image_set, - ); - - $question = t('Are you sure you want to delete the image set %name?', array('%name' => $image_set['name'])); - $path = 'admin/config/media/srcset-image'; - return confirm_form($form, $question, $path); -} - -/** - * Submit image set delete form. - */ -function srcset_image_sets_form_delete_submit($form, &$form_state) { - $image_set = $form['image_set']['#value']; - - // Remove image set from config. - config_clear('srcset_image.sets', $image_set['machine_name']); - - // Show confirmation message and redirect to list page. - backdrop_set_message(t('The image set %name has been deleted.', array('%name' => $image_set['name']))); - $form_state['redirect'] = 'admin/config/media/srcset-image'; -} - diff --git a/srcset_image.info b/srcset_image.info index c74e787..5b67615 100644 --- a/srcset_image.info +++ b/srcset_image.info @@ -3,6 +3,6 @@ description = Provides responsive images that utilise the `srcset` attribute. backdrop = 1.x type = module dependencies[] = image +dependencies[] = preset package = Media configure = admin/config/media/srcset-image - diff --git a/srcset_image.module b/srcset_image.module index 9ec87a3..1500b1f 100644 --- a/srcset_image.module +++ b/srcset_image.module @@ -17,40 +17,51 @@ function srcset_image_config_info() { } /** - * Implements hook_menu(). + * Implements hook_preset_types(). */ -function srcset_image_menu() { - $items['admin/config/media/srcset-image'] = array( - 'title' => 'srcset Image', - 'description' => 'Configure srcset Image.', - 'page callback' => 'srcset_image_sets_list', - 'access arguments' => array('administer site configuration'), - 'file' => 'srcset_image.admin.inc', - ); - $items['admin/config/media/srcset-image/add'] = array( - 'title' => 'Add image set', - 'page callback' => 'backdrop_get_form', - 'page arguments' => array('srcset_image_sets_form'), - 'access arguments' => array('administer site configuration'), - 'file' => 'srcset_image.admin.inc', - 'type' => MENU_LOCAL_ACTION, - ); - $items['admin/config/media/srcset-image/%srcset_image_set'] = array( - 'title' => 'Edit image set', - 'page callback' => 'backdrop_get_form', - 'page arguments' => array('srcset_image_sets_form', 4), - 'access arguments' => array('administer site configuration'), - 'file' => 'srcset_image.admin.inc', - ); - $items['admin/config/media/srcset-image/%srcset_image_set/delete'] = array( - 'title' => 'Delete image set', - 'page callback' => 'backdrop_get_form', - 'page arguments' => array('srcset_image_sets_form_delete', 4), - 'access arguments' => array('administer site configuration'), - 'file' => 'srcset_image.admin.inc', +function srcset_image_preset_types() { + return array( + 'sets' => array( + 'name' => 'srcset Image Set', + 'path' => 'admin/config/media/srcset-image', + 'path_title' => 'srcset Image', + 'path_description' => 'Configure srcset Image.', + 'id_name' => 'Name', + 'columns' => array( + 'image_styles' => 'Image styles', + ), + ), ); +} - return $items; +/** + * Implements hook_preset_form(). + */ +function srcset_image_preset_form($preset_type, $id) { + $form = array(); + $config = config('srcset_image.' . $preset_type); + + // Get default values. + $values = ($id) ? $config->get($id) : array(); + + // Get image styles as options for checkboxes. + $options = array(); + foreach (image_styles() as $image_style) { + $options[$image_style['name']] = $image_style['label']; + } + + if ($preset_type == 'sets') { + $form['image_styles'] = array( + '#type' => 'checkboxes', + '#title' => t('Image styles'), + '#description' => t('Select the image styles that make up this image set.'), + '#options' => $options, + '#default_value' => isset($values['image_styles']) ? $values['image_styles'] : array(), + '#required' => TRUE, + ); + } + + return $form; } /** @@ -62,6 +73,7 @@ function srcset_image_theme($existing, $type, $theme, $path) { 'variables' => array( 'item' => NULL, 'image_set' => '', + 'original' => TRUE, 'sizes' => '100vw', 'link' => '', ), @@ -80,6 +92,7 @@ function srcset_image_field_formatter_info() { 'field types' => array('image'), 'settings' => array( 'srcset_image_set' => '', + 'srcset_image_original' => TRUE, 'srcset_image_sizes' => '100vw', 'srcset_image_link' => '', ), @@ -96,8 +109,8 @@ function srcset_image_field_formatter_settings_form($field, $instance, $view_mod $image_sets = array(); $sets = config_get('srcset_image.sets'); - foreach ($sets as $set) { - $image_sets[$set['machine_name']] = $set['name']; + foreach ($sets as $machine_name => $set) { + $image_sets[$machine_name] = $set['title']; } $element['srcset_image_set'] = array( '#type' => 'select', @@ -107,6 +120,13 @@ function srcset_image_field_formatter_settings_form($field, $instance, $view_mod '#empty_option' => t('- None -'), ); + $element['srcset_image_original'] = array( + '#type' => 'checkbox', + '#title' => t('Include original image'), + '#description' => t('Whether or not the original (i.e. non-image-style version) should be included in the srcset attribute.'), + '#default_value' => $settings['srcset_image_original'], + ); + $element['srcset_image_sizes'] = array( '#type' => 'textfield', '#title' => t('Sizes'), @@ -201,6 +221,7 @@ function srcset_image_field_formatter_view($entity_type, $entity, $field, $insta '#theme' => 'srcset_image_formatter', '#item' => $item, '#image_set' => $image_set, + '#original' => $settings['srcset_image_original'], '#sizes' => filter_xss($settings['srcset_image_sizes']), '#link' => isset($uri) ? $uri : '', ); @@ -208,16 +229,3 @@ function srcset_image_field_formatter_view($entity_type, $entity, $field, $insta return $element; } - -/** - * Load an image set. - */ -function srcset_image_set_load($machine_name) { - $image_set = config_get('srcset_image.sets', $machine_name); - - if (!empty($image_set)) { - return $image_set; - } - return FALSE; -} - diff --git a/srcset_image.theme.inc b/srcset_image.theme.inc index 9cc0b73..d9b5dfb 100644 --- a/srcset_image.theme.inc +++ b/srcset_image.theme.inc @@ -6,28 +6,53 @@ /** * Returns HTML for a srcset Image field formatter. + * + * @param array $variables + * An associative array which contains: + * - item: An array of image field values. + * - image_set: An array representing the srcset image preset. + * - original: Whether or not the original image should be included. + * - sizes: The value of the srcset image size setting. + * - link: An array of settings to generate a link. */ function theme_srcset_image_formatter($variables) { $item = $variables['item']; // Do not output an empty 'title' attribute. - if (isset($item['title']) && backdrop_strlen($item['title']) == 0) { + if (empty($item['title'])) { unset($item['title']); } // Prepare srcset attribute. - if ($variables['image_set'] && $variables['image_set']['image_styles']) { + if (!empty($variables['image_set']['image_styles'])) { $srcset = array(); // Get image style URL and width of each image style. foreach ($variables['image_set']['image_styles'] as $image_style) { - $image_style_url = image_style_url($image_style, $item['uri']); - $image_size = getimagesize($image_style_url); - $srcset[] = $image_style_url . ' ' . $image_size[0] . 'w'; + if (!empty($image_style)) { + // Generate the image style derivative. + $style = image_style_load($image_style); + $style_uri = image_style_path($image_style, $item['uri']); + $success = file_exists($style_uri) || image_style_create_derivative($style, $item['uri'], $style_uri); + + if ($success) { + image_style_remove_allowed_uri($style_uri); + + // Get the image size. + $style_url = image_style_url($image_style, $item['uri']); + $image_size = getimagesize($style_url); + if (!empty($image_size)) { + $srcset[] = $style_url . ' ' . $image_size[0] . 'w'; + } + } + } } // Add original image. - $srcset[] = file_create_url($item['uri']) . ' ' . $item['width'] . 'w'; + if ($variables['original']) { + $srcset[] = file_create_url($item['uri']) . ' ' . $item['width'] . 'w'; + } + $item['attributes']['srcset'] = implode(', ', $srcset); // Prepare sizes attribute. @@ -49,4 +74,3 @@ function theme_srcset_image_formatter($variables) { return $output; } -