Scale by Orientation – Moduł Drupala do sprytnego skalowania obrazów

Podczas pracy z galeriami, listingami treści czy siatkami zdjęć często pojawia się problem zachowania spójnych proporcji wizualnych obrazów o różnych orientacjach. Standardowe efekty przetwarzania obrazów nie zawsze pozwalają osiągnąć jednolity rezultat bez dodatkowego kadrowania lub ręcznej konfiguracji.

Moduł Image Scaling by Orientation, który opracował nasz zespół rozwiązuje ten problem poprzez automatyczne skalowanie obrazów na podstawie ich orientacji.

Jak działa moduł?

Moduł wprowadza nowy efekt stylu obrazów (Image Style Effect), który skaluje obraz do określonego rozmiaru pikselowego na jego dłuższym boku.

Zasada działania jest prosta:

• Obrazy poziome (landscape) – szerokość zostaje przeskalowana do zadanego rozmiaru.
• Obrazy pionowe (portrait) – wysokość zostaje przeskalowana do zadanego rozmiaru.
• Obrazy kwadratowe – są traktowane jak obrazy poziome i skalowane względem szerokości.

Takie podejście pozwala zachować proporcje obrazu przy jednoczesnym uzyskaniu zbliżonej wielkości wizualnej wszystkich elementów w galerii lub siatce.

Moduł szczególnie dobrze współpracuje z efektem Set Canvas dostępnym w module Image Effects, umożliwiając tworzenie estetycznych i spójnych układów zdjęć niezależnie od ich oryginalnych proporcji.

Konfiguracja

Aby skorzystać z efektu:

1. Przejdź do Configuration → Media → Image styles.
2. Utwórz nowy styl obrazów lub edytuj istniejący.
3. Kliknij Add effect.
4. Wybierz efekt Scale by Orientation.
5. Skonfiguruj dostępne opcje:

• Target dimension – docelowy rozmiar dłuższego boku obrazu w pikselach (np. 200 px).
• Upscale images – określa, czy obrazy mniejsze od zadanego rozmiaru powinny zostać powiększone.

Przykłady działania

Przy ustawieniu wartości Target dimension = 200 px:

Skalowanie bez powiększania (Upscaling Disabled)

Jeżeli opcja powiększania jest wyłączona, obrazy mniejsze od docelowego rozmiaru pozostaną bez zmian.

Przykład:

• 50 × 25 → 50 × 25

Skalowanie z powiększaniem (Upscaling Enabled)

Po włączeniu opcji powiększania nawet niewielkie obrazy zostaną przeskalowane do zadanego rozmiaru.

Przykład:

• 50 × 25 → 200 × 100

Zastosowania

Efekt sprawdzi się szczególnie w:

• galeriach zdjęć,
• listingach treści z miniaturami,
• siatkach produktów,
• komponentach typu card,
• wszędzie tam, gdzie obrazy mają różne proporcje, ale powinny zachować podobną wielkość wizualną.

Dzięki automatycznemu dopasowaniu wymiarów do orientacji obrazu możliwe jest uzyskanie bardziej spójnego i przewidywalnego wyglądu interfejsu bez konieczności stosowania agresywnego kadrowania.

Wymagania

Moduł wymaga:

• Drupal 10 lub Drupal 11,
• modułu Image dostępnego w rdzeniu Drupala.

Kontrybucja do Drupala

Moduł Image Scaling by Orientation jest nie tylko odpowiedzią na konkretną potrzebę techniczną, ale również częścią naszego zaangażowania w rozwój Drupala. Ten artykuł otwiera serię artykułów poświęconych kontrybucji Drupala. Opiszemy krok po kroku jak wspierać CMS Drupal, by ułatwić nowym członkom drupalowej społeczności tworzenie modułów i rozwiązywanie zgłoszonych na Drupal.org problemów.

Stay tuned!