Replacing image with cropped version causes srcset references getting outdated

abitofmind
(@abitofmind)

2 years, 10 months ago
Scenario
- Created an Image Slider with Gutenslider.
- Each image in the slider gets its srcset markup. I assume it uses WP’s default “Responsive Image” mechanism.
- Sometimes later I decided to crop the images in the series a bit further so that more of them gets readable.
- I cropped them on my computer with my image software.
- Media Library → List Image → Identify Image of my series → “Replace Image” (this action comes from your plugin) → Replaced it with the cropped image version on my computer. Did this for all 5 images in the slider.
❌ After that: All images showed as broken (only their ALT text)
- Reason: The srcset references were not updated and hence all point to files which don’t exist anymore!
- Because in the new srcset of the corresponding image files the -XXXxYYY suffix part changed due to the slightly different aspect ratios of the cropped images. (e.g. 1024×796 became 1024×838).
💡 Proposal: When the plugin replaces an image it also updates the srcset accordingly in all existing markup. This should be easily possible without doubt, as in well-formed markup the main src attribute of the image is the same unchanged URL and also in the class attribute it has the unique media library identifier wp-image-1234.

💡 If this is not possible then the minimal improvement would be to compare the old vs the new image dimensions and give a warning to the user that updating an image with an image of different proportions,
- may result in layout issues if not having used percentual/responsive image layout techniques (lesser problem)
- and will certainly result in srcset file references to break which will render various blocks to have broken images! You will need to re-create image markup (the very task which you wanted to spare yourself by using the plugin).

Viewing 1 replies (of 1 total)

Thread Starter

(@abitofmind)

<!-- ORIGINAL IMAGE -->

<div class="swiper-slide wp-block-eedee-block-gutenslide is-position-center-center ed-bg-image swiper-slide-duplicate"
style="--ed-vw: 300; --ed-vh: 233; width: 691px; transition-duration: 0ms; opacity: 0; transform: translate3d(0px, 0px, 0px);"
data-hash="gutenslider-po7e44kef-5" data-lg-image-idx="4" data-swiper-slide-index="4" role="group" aria-label="5 / 5">

	<div class="eedee-background-div bg-image">

		<img decoding="async" loading="lazy" width="1024" height="796" class="swiper-lazy wp-image-3320 swiper-lazy-loaded"
		src="https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1024x796.webp"
		alt="TA Timeline Levels Stacked - All levels and all annotations"
		style="object-fit: cover; object-position: 50% 50%;"
		data-title="TA Timeline Levels Stacked 5 All levels and all annotations"
		srcset="https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1024x796.webp 1024w,
		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-300x233.webp 300w,
		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-150x117.webp 150w,
		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-768x597.webp 768w,
		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1536x1194.webp 1536w,
		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-2048x1592.webp 2048w,
		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1600x1244.webp 1600w"
		sizes="(max-width: 1024px) 100vw, 1024px">
		<div class="eedee-background-div__overlay" style="opacity:1;"></div>
	</div>
	<div class="slide-content">
		<p class="has-text-align-center gutenslider-content-initial has-larger-font-size"></p>
	</div>
</div>


<!-- REPLACED IMAGE IN FRESHLY GENERATED SLIDER (WITH RENEWED SRCSET MARKUP) -->

<div class="swiper-slide wp-block-eedee-block-gutenslide is-position-center-center ed-bg-image swiper-slide-duplicate"
style="--ed-vw: 300; --ed-vh: 245; width: 691px; transition-duration: 0ms; opacity: 0; transform: translate3d(0px, 0px, 0px);"
data-hash="gutenslider-po7e44kef-5" data-lg-image-idx="4" data-swiper-slide-index="4" role="group" aria-label="5 / 5">
	
	<div class="eedee-background-div bg-image">

		<img decoding="async" loading="lazy" width="1024" height="838" class="swiper-lazy wp-image-3320 swiper-lazy-loaded"
		src="https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1024x838.webp"
		alt="TA Timeline Levels Stacked - All levels and all annotations" style="object-fit: cover; object-position: 50% 50%;"
		data-title="TA Timeline Levels Stacked 5 All levels and all annotations"
		srcset="https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1024x838.webp 1024w,
		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-300x245.webp 300w,
		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-150x123.webp 150w,
		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-768x628.webp 768w,
		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1600x1309.webp 1600w,
		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1536x1257.webp 1536w,
		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations.webp 1980w"
		sizes="(max-width: 1024px) 100vw, 1024px">
		<div class="eedee-background-div__overlay" style="opacity:1;"></div>
	</div>
	<div class="slide-content">
		<p class="has-text-align-center gutenslider-content-initial has-larger-font-size"></p>
	</div>
</div>

Viewing 1 replies (of 1 total)

The topic ‘Replacing image with cropped version causes srcset references getting outdated’ is closed to new replies.