← All changes
|
includes/widgets/Image_Comparison/Image_Comparison.php
+11
-1
51.1.79
→
51.1.87
View file →
| @@ -444,8 +444,14 @@ | ||
| 444 | 444 | $allowed_tags['img']['sizes'] = true; // Allow sizes attribute for img tag |
| 445 | 445 | $allowed_tags['img']['decoding'] = true; // Allow decoding attribute for img tag |
| 446 | 446 | $allowed_tags['img']['loading'] = true; // Allow loading attribute for img tag. It is for the lazy loading possibility. |
| 447 | 447 | |
| 448 | + $initial_position = 50; | |
| 449 | + if (isset($settings['kng_image_comparison_box_max_width']['size']) && $settings['kng_image_comparison_box_max_width']['size'] !== '') { | |
| 450 | + $initial_position = (float) $settings['kng_image_comparison_box_max_width']['size']; | |
| 451 | + } | |
| 452 | + $initial_position = max(0, min(100, $initial_position)); | |
| 453 | + | |
| 448 | 454 | ?> |
| 449 | 455 | <div class="king-addons-image-comparison king-addons-image-comparison-<?php echo esc_attr($element_ID); ?>"> |
| 450 | 456 | <div class="king-addons-image-comparison-container"> |
| 451 | 457 | <div class="king-addons-image-comparison-image-before"> |
| @@ -460,9 +466,9 @@ | ||
| 460 | 466 | echo wp_kses($image_html_after, $allowed_tags); |
| 461 | 467 | ?> |
| 462 | 468 | </div> |
| 463 | 469 | </div> |
| 464 | - <input type="range" min="0" max="100" value="50" | |
| 470 | + <input type="range" min="0" max="100" value="<?php echo esc_attr((string) $initial_position); ?>" | |
| 465 | 471 | aria-label="<?php echo esc_html__('Percentage of the before image shown.', 'king-addons'); ?>" |
| 466 | 472 | class="king-addons-image-comparison-slider king-addons-image-comparison-slider-<?php echo esc_attr($element_ID); ?>" |
| 467 | 473 | /> |
| 468 | 474 | <div class="king-addons-image-comparison-slider-line" aria-hidden="true"></div> |
| @@ -477,8 +483,12 @@ | ||
| 477 | 483 | const container = document.querySelector(' . wp_json_encode($container_selector) . '); |
| 478 | 484 | const slider = document.querySelector(' . wp_json_encode($slider_selector) . '); |
| 479 | 485 | if (!container || !slider) { |
| 480 | 486 | return; |
| 487 | + } | |
| 488 | + const computed = parseFloat(getComputedStyle(container).getPropertyValue("--position")); | |
| 489 | + if (!Number.isNaN(computed)) { | |
| 490 | + slider.value = String(Math.min(100, Math.max(0, computed))); | |
| 481 | 491 | } |
| 482 | 492 | slider.addEventListener("input", (event) => { |
| 483 | 493 | container.style.setProperty("--position", `${event.target.value}%`); |
| 484 | 494 | }); |