Skip to content

Commit 8a335d0

Browse files
Michael-SchaerMichael-Schaer
committed
Fixes scaling for big images
2 parents fe7a9c2 + cb2aec6 commit 8a335d0

4 files changed

Lines changed: 54 additions & 84 deletions

File tree

‎wordpress/wp-content/themes/les-verts/lib/twig/functions/image-filters.php‎

Lines changed: 13 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
use Twig\Environment;
1313

1414
class ImageFilters extends AbstractExtension {
15+
16+
private const MIN_EXPECTED_SIZE_OPTIONS = 6;
17+
1518
public function getFilters() {
1619
return [
1720
new TwigFilter('get_timber_image_responsive', [$this, 'getTimberImageResponsive'], ['needs_environment' => true]),
@@ -51,7 +54,7 @@ public function getTimberImageResponsive(Environment $env, $image, $size = 'medi
5154
*/
5255
private function getImageSource(Image $image, $size) {
5356
try {
54-
if(\SUPT\LesVertsImages::getSizes()[$size]) {
57+
if(isset(\SUPT\LesVertsImages::getSizesWithFull()[$size])) {
5558
$src = $image->src($size);
5659
}
5760
else {
@@ -73,27 +76,27 @@ private function buildHtmlAttributes(Image $image, $src, $size, $attr) {
7376
// First try WordPress core srcset generation
7477
$srcset = wp_get_attachment_image_srcset($image->ID, $size);
7578

76-
// If WordPress couldn't generate srcset, try to build one from legacy files
77-
if (!$srcset) {
78-
$srcset = \SUPT\buildLegacySrcset($image->ID);
79+
$num_srcset_options = 0;
80+
if ($srcset) {
81+
$srcset_options = array_filter(array_map('trim', explode(',', $srcset)));
82+
$num_srcset_options = count($srcset_options);
7983
}
8084

81-
$focal_point = $this->getFocalPoint($image);
82-
$position = $this->mapFocalPointToPosition($focal_point);
85+
if ($num_srcset_options < self::MIN_EXPECTED_SIZE_OPTIONS) {
86+
// If WordPress couldn't generate srcset, try to build one from legacy files
87+
$srcset = \SUPT\buildLegacySrcset($image->ID);
88+
}
8389

8490
$attributes = [
8591
'src' => esc_url($src),
8692
'srcset' => $srcset, // Standard srcset for non-lazy images
8793
'data-srcset' => $srcset, // Data-srcset for lazy loading JavaScript
8894
'sizes' => '100vw',
8995
'loading' => 'lazy',
90-
'style' => sprintf(
91-
'object-fit: cover; object-position: %s; width: 100%%; height: 100%%;',
92-
esc_attr($position)
93-
),
9496
'alt' => !empty($attr['alt']) ? $attr['alt'] : ''
9597
];
9698

99+
$focal_point = $this->getFocalPoint($image);
97100
$attributes['data-focal-point'] = $focal_point;
98101

99102
$attributes = array_merge($attributes, $attr);
@@ -127,26 +130,6 @@ private function getFocalPoint(Image $image) {
127130
return !empty($focal_point) ? $focal_point : 'center';
128131
}
129132

130-
/**
131-
* Map focal point to CSS object-position value
132-
*
133-
* @param string $focal_point Focal point value from ACF (e.g., 'top-left', 'center-center')
134-
* @return string CSS object-position value (e.g., 'left top', 'center center')
135-
*/
136-
private function mapFocalPointToPosition($focal_point) {
137-
if (!function_exists('acf_get_field')) {
138-
return 'center';
139-
}
140-
141-
$field = acf_get_field('focal_point');
142-
143-
if (empty($field) || !isset($field['choices'][$focal_point])) {
144-
return 'center';
145-
}
146-
147-
return $field['choices'][$focal_point];
148-
}
149-
150133
private function initializeImage($image) {
151134
$img = null;
152135
if (is_numeric($image) || is_string($image)) {

‎wordpress/wp-content/themes/les-verts/lib/twig/functions/image-handling.php‎

Lines changed: 39 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,15 @@ public static function getFullSizeWidth() {
3333
return 2560;
3434
}
3535

36+
/**
37+
* Returns all sizes from getSizes(), plus the 'full' option (2560px)
38+
*/
39+
public static function getSizesWithFull() {
40+
$sizes = self::getSizes();
41+
$sizes['full'] = self::getFullSizeWidth();
42+
return $sizes;
43+
}
44+
3645
public static function getPNGMaxSize() {
3746
return 3 * 1024 * 1024; // 3MB in bytes
3847
}
@@ -201,8 +210,8 @@ function (Environment $env, $image, $size = 'medium') use ($image_filters) {
201210
* Migration status: Mixed (legacy files still exist, new uploads use WordPress format)
202211
*
203212
* Example of legacy Timmy file names:
204-
* custom_palette-1-150x0-c-default.png rgb_palette-1-1200x0-c-default.png rgb_palette-1-20x0-c-default.png rgb_palette-1-790x0-c-default.png
205-
* rgb_palette-1-10x0-c-default.png rgb_palette-1-150x0-c-default.png rgb_palette-1-2560x0-c-default.png
213+
* rgb_palette-1-1200x0-c-default.png rgb_palette-1-20x0-c-default.png rgb_palette-1-790x0-c-default.png rgb_palette-1-10x0-c-default.png rgb_palette-1-150x0-c-default.png rgb_palette-1-2560x0-c-default.png
214+
* rgb_palette-1-1200x1412.jpg rgb_palette-1-1200x630.jpg
206215
*
207216
* Example of new (wordpress default) file names:
208217
* europawahlen-1-1200x630.jpg europawahlen-1-150x100.jpg europawahlen-1-2560x1713.jpg europawahlen-1-768x514.jpg
@@ -223,6 +232,10 @@ function image_downsize_fallback($out, $attachment_id, $size) {
223232
return false;
224233
}
225234

235+
if($size === 'full-width') {
236+
$size = 'full';
237+
}
238+
226239
if(!is_string($size) || $size === 'regular') {
227240
$size = 'medium';
228241
}
@@ -240,10 +253,17 @@ function image_downsize_fallback($out, $attachment_id, $size) {
240253
return $legacy_image;
241254
}
242255

243-
return getScaledImage($metadata, $pathinfo, $upload_dir);
256+
return false;
244257
}
245258

246259
function hasRequestedImageSize($metadata, $size, $upload_dir, $pathinfo) {
260+
if ($size === 'full' && str_contains($metadata['file'], '-scaled')) {
261+
$full_file = trailingslashit($upload_dir['basedir']) . $metadata['file'];
262+
if (file_exists($full_file)) {
263+
return true;
264+
}
265+
}
266+
247267
if (isset($metadata['sizes'][$size])) {
248268

249269
$size_data = $metadata['sizes'][$size];
@@ -295,25 +315,19 @@ function find_legacy_image($attachment_id, $size) {
295315
}
296316

297317
if ($width === false) {
298-
if($size === 'full') {
299-
return false;
300-
}
301-
else {
302-
$width = isset(LesVertsImages::getSizes()[$size]) ?
303-
LesVertsImages::getSizes()[$size] :
304-
LesVertsImages::getSizes()['regular'];
305-
}
318+
$width = isset(LesVertsImages::getSizesWithFull()[$size]) ?
319+
LesVertsImages::getSizesWithFull()[$size] :
320+
LesVertsImages::getSizes()['medium'];
306321
}
307322

308323
// Remove any existing WordPress dimensions from filename
309324
$clean_name = str_replace('-scaled', '', preg_replace('/-\d+x\d+$/', '', $base_name));
310-
$search_pattern = $base_path . '/' . $clean_name . '-' . $width . '*-c-default.' . $extension;
311-
$legacy_files = glob($search_pattern);
312-
313-
if (empty($legacy_files)) {
314-
$search_pattern = $base_path . '/' . $clean_name . '-' . $width . '*-c-center.jpg';
315-
$legacy_files = glob($search_pattern);
316-
}
325+
$pattern_dim = $base_path . '/' . $clean_name . '-*[0-9]x[0-9]*.' . $extension;
326+
$pattern_scaled = $base_path . '/' . $clean_name . '-scaled.' . $extension;
327+
// Find matching files for both patterns
328+
$files_dim = glob($pattern_dim);
329+
$files_scaled = glob($pattern_scaled);
330+
$legacy_files = array_merge($files_dim, $files_scaled);
317331

318332
if (!empty($legacy_files)) {
319333
// Find the best matching file based on extracted width
@@ -355,12 +369,12 @@ function select_legacy_file_by_width($legacy_files, $target_width, $size) {
355369
}
356370

357371
if (!$target_width) {
358-
$sizes = LesVertsImages::getSizes();
372+
$sizes = LesVertsImages::getSizesWithFull();
359373
if (array_key_exists($size, $sizes)) {
360374
$target_width = $sizes[$size];
361375
}
362376
else {
363-
$target_width = LesVertsImages::getSizes()['regular'];
377+
$target_width = LesVertsImages::getSizes()['medium'];
364378
}
365379
}
366380

@@ -399,52 +413,25 @@ function select_legacy_file_by_width($legacy_files, $target_width, $size) {
399413
return $best_match ?: $legacy_files[$biggest_image_index];
400414
}
401415

402-
/**
403-
* Find image file with "-scaled" in filename
404-
* These are generated by Wordpress if the image is bigger than the "full" size we defined
405-
*/
406-
function getScaledImage($metadata, $pathinfo, $upload_dir) {
407-
if(str_contains($pathinfo['filename'], '-scaled')) {
408-
$scaled_file = trailingslashit($upload_dir['basedir']) . $pathinfo['dirname'] . '/' . $pathinfo['basename'];
409-
if (file_exists($scaled_file)) {
410-
return false;
411-
}
412-
413-
$original_url = trailingslashit($upload_dir['baseurl']) . $pathinfo['dirname'] . '/' . $metadata['original_image'];
414-
$original_file = trailingslashit($upload_dir['basedir']) . $pathinfo['dirname'] . '/' . $metadata['original_image'];
415-
416-
if (file_exists($original_file)) {
417-
return [
418-
$original_url,
419-
$metadata['width'], // width
420-
$metadata['height'], // height
421-
false // original image
422-
];
423-
}
424-
}
425-
426-
return false;
427-
}
428-
429416
/**
430417
* Build srcset for legacy images
431418
* If the names are not in wordpress default format, we need to build the srcset manually
432419
*/
433420
function buildLegacySrcset($image_id) {
434-
$srcset_parts = [];
435-
436-
foreach (LesVertsImages::getSizes() as $size_name => $width) {
421+
$srcset_map = [];
422+
foreach (LesVertsImages::getSizesWithFull() as $size_name => $width) {
437423
$legacy_result = find_legacy_image($image_id, $size_name);
438424

439425
if ($legacy_result && is_array($legacy_result)) {
440-
$url = $legacy_result[0];
426+
$url = esc_url($legacy_result[0]);
441427
$actual_width = $legacy_result[1];
442428

443429
if ($url && $actual_width) {
444-
$srcset_parts[] = esc_url($url) . ' ' . $actual_width . 'w';
430+
$srcset_map[$url] = "$url {$actual_width}w";
445431
}
446432
}
447433
}
434+
$srcset_parts = array_values($srcset_map);
448435

449436
return !empty($srcset_parts) ? implode(', ', $srcset_parts) : '';
450437
}

‎wordpress/wp-content/themes/les-verts/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Theme Name: Les Verts
33
* Description: Custom theme for the GREENS of Switzerland. Designed by superhuit.ch, built by gruene.ch on top of superhuit's stack.
44
* Author: superhuit.ch & gruene.ch
5-
* Version: 0.39.0
5+
* Version: 0.39.1
66
* Requires PHP: 7.4
77
* Requires at least: 5.0
88
* Theme URI: https://github.com/grueneschweiz/2018.gruene.ch/

‎wordpress/wp-content/themes/les-verts/styleguide/src/components/atoms/a-image/a-image-cover.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,6 @@ export default class AImageCover extends BaseView {
8484

8585
const zoom = iRatio > cRatio ? iRatio / cRatio : cRatio / iRatio;
8686

87-
img.sizes = cDims.width * zoom + 'px';
87+
img.sizes = Math.min(cDims.width * zoom, window.innerWidth) + 'px';
8888
}
8989
}

0 commit comments

Comments
 (0)
⚡