Issue #3267870 by heddn, Fabianx: Order image mappings by breakpoint ID and numeric multiplier (5c0c49a7) · Commits · project / drupal

core/modules/breakpoint/src/BreakpointManager.php

+3 −2

Original line number	Diff line number	Diff line
		@@ -133,8 +133,9 @@ public function processDefinition(&$definition, $plugin_id) {
		if (!in_array('1x', $definition['multipliers'])) {
		$definition['multipliers'][] = '1x';
		}
		// Ensure that multipliers are sorted correctly.
		sort($definition['multipliers']);
		// Ensure that multipliers are sorted numerically so 1x, 1.5x and 2x
		// come out in that order instead of 1.5x, 1x, 2x.
		sort($definition['multipliers'], SORT_NUMERIC);
		}

		/**

core/modules/responsive_image/responsive_image.post_update.php

+14 −0

Original line number	Diff line number	Diff line
		@@ -5,6 +5,10 @@
		* Post update functions for Responsive Image.
		*/

		use Drupal\Core\Config\Entity\ConfigEntityUpdater;
		use Drupal\responsive_image\ResponsiveImageConfigUpdater;
		use Drupal\responsive_image\ResponsiveImageStyleInterface;

		/**
		* Implements hook_removed_post_updates().
		*/
		@@ -13,3 +17,13 @@ function responsive_image_removed_post_updates() {
		'responsive_image_post_update_recreate_dependencies' => '9.0.0',
		];
		}

		/**
		* Re-order mappings by breakpoint ID and descending numeric multiplier order.
		*/
		function responsive_image_post_update_order_multiplier_numerically(array &$sandbox = NULL): void {
		$responsive_image_config_updater = \Drupal::classResolver(ResponsiveImageConfigUpdater::class);
		\Drupal::classResolver(ConfigEntityUpdater::class)->update($sandbox, 'responsive_image_style', function (ResponsiveImageStyleInterface $responsive_image_style) use ($responsive_image_config_updater): bool {
		return $responsive_image_config_updater->orderMultipliersNumerically($responsive_image_style);
		});
		}

core/modules/responsive_image/src/Entity/ResponsiveImageStyle.php

+12 −0

Original line number	Diff line number	Diff line
		@@ -3,7 +3,9 @@
		namespace Drupal\responsive_image\Entity;

		use Drupal\Core\Config\Entity\ConfigEntityBase;
		use Drupal\Core\Entity\EntityStorageInterface;
		use Drupal\image\Entity\ImageStyle;
		use Drupal\responsive_image\ResponsiveImageConfigUpdater;
		use Drupal\responsive_image\ResponsiveImageStyleInterface;

		/**
		@@ -110,6 +112,16 @@ public function __construct(array $values, $entity_type_id = 'responsive_image_s
		parent::__construct($values, $entity_type_id);
		}

		/**
		* {@inheritdoc}
		*/
		public function preSave(EntityStorageInterface $storage) {
		parent::preSave($storage);
		$config_updater = \Drupal::classResolver(ResponsiveImageConfigUpdater::class);
		assert($config_updater instanceof ResponsiveImageConfigUpdater);
		$config_updater->orderMultipliersNumerically($this);
		}

		/**
		* {@inheritdoc}
		*/

core/modules/responsive_image/src/ResponsiveImageConfigUpdater.php

0 → 100644

+47 −0

Original line number	Diff line number	Diff line
		<?php

		namespace Drupal\responsive_image;

		/**
		* Provides a BC layer for modules providing old configurations.
		*
		* @internal
		* This class is only meant to fix outdated responsive image configuration and
		* its methods should not be invoked directly. It will be removed once all the
		* deprecated methods have been removed.
		*/
		final class ResponsiveImageConfigUpdater {

		/**
		* Re-order mappings by breakpoint ID and descending numeric multiplier order.
		*
		* @param \Drupal\responsive_image\ResponsiveImageStyleInterface $responsive_image_style
		* The responsive image style
		*
		* @return bool
		* Whether the responsive image style was updated.
		*/
		public function orderMultipliersNumerically(ResponsiveImageStyleInterface $responsive_image_style): bool {
		$changed = FALSE;

		$mappings = $sorted = $responsive_image_style->getImageStyleMappings();
		usort($sorted, static function (array $a, array $b) {
		$first = ((float) mb_substr($a['multiplier'], 0, -1)) * 100;
		$second = ((float) mb_substr($b['multiplier'], 0, -1)) * 100;
		if ($first === $second) {
		return strcmp($a['breakpoint_id'], $b['breakpoint_id']);
		}
		return $first - $second;
		});
		if ($sorted !== $mappings) {
		$responsive_image_style->removeImageStyleMappings();
		foreach ($sorted as $mapping) {
		$responsive_image_style->addImageStyleMapping($mapping['breakpoint_id'], $mapping['multiplier'], $mapping);
		}
		$changed = TRUE;
		}

		return $changed;
		}

		}

core/modules/responsive_image/tests/fixtures/update/responsive_image-order-multipliers-numerically.php

0 → 100644

+71 −0

Original line number	Diff line number	Diff line
		<?php

		/**
		* @file
		* Test re-ordering responsive image style multipliers numerically.
		*/

		use Drupal\Core\Database\Database;

		$connection = Database::getConnection();

		// Add a responsive image style.
		$styles = [];
		$styles['langcode'] = 'en';
		$styles['status'] = TRUE;
		$styles['dependencies']['config'][] = 'image.style.large';
		$styles['dependencies']['config'][] = 'image.style.medium';
		$styles['dependencies']['config'][] = 'image.style.thumbnail';
		$styles['id'] = 'responsive_image_style';
		$styles['uuid'] = '46225242-eb4c-4b10-9a8c-966130b18630';
		$styles['label'] = 'Responsive Image Style';
		$styles['breakpoint_group'] = 'responsive_image';
		$styles['fallback_image_style'] = 'medium';
		$styles['image_style_mappings'] = [
		[
		'image_mapping_type' => 'sizes',
		'image_mapping' => [
		'sizes' => '75vw',
		'sizes_image_styles' => [
		'medium',
		],
		],
		'breakpoint_id' => 'responsive_image.viewport_sizing',
		'multiplier' => '1.5x',
		],
		[
		'image_mapping_type' => 'sizes',
		'image_mapping' => [
		'sizes' => '100vw',
		'sizes_image_styles' => [
		'large',
		],
		],
		'breakpoint_id' => 'responsive_image.viewport_sizing',
		'multiplier' => '2x',
		],
		[
		'image_mapping_type' => 'sizes',
		'image_mapping' => [
		'sizes' => '50vw',
		'sizes_image_styles' => [
		'thumbnail',
		],
		],
		'breakpoint_id' => 'responsive_image.viewport_sizing',
		'multiplier' => '1x',
		],
		];

		$connection->insert('config')
		->fields([
		'collection',
		'name',
		'data',
		])
		->values([
		'collection' => '',
		'name' => 'responsive_image.styles.responsive_image_style',
		'data' => serialize($styles),
		])
		->execute();