Picture

Umožňuje obrázkům reagovat na šířku okna prohlížeče (responsive layout) a automaticky načítat příslušné velikosti obrázků definované pomocí image cache.

Poznámky:

  • verze 7.x-1.1 zatím nepodporuje modul Colorbox, Cloud Zoom atd. no
  • stále tedy používám modul Responsive images and styles
  • unimitysolutions.com/blog/responsive-theme-drupal-7-part-3-making-images-responsive

Instalace a nastavení:

  1. Nainstalujte a povolte modul Breakpoints.
  2. Nainstalujte a povolte modul Picture 7.x-1.1.
  3. Přidejte nové styly pro definované hraniční hodnoty (Add new styles for breakpoints):
    • předpona: resp_
  4. Upravte nově definované styly obrázků (resp_breakpoints_theme_...).
  5. V admin/config/media (Nastavení, Média, Obrázek) přiřaďte definované styly modulu Picture.
  6. U všechy typů obsahů (stránka, článek atd.) změňte ve správě zobrazení formát obrázku na Picture.  

Další moduly:

  • Flex Slider – responzivní slideshow a obrázky
  • Image Replace – rozdílné obrázky pro různá zařízení
  • Blueberry – responsive slider
  • FitVids
  • Responsive image styles
    • lazy loading – postupné načítání pouze viditelných obrázků
    • možnost nastavení odlišných breakpointů pro různé obrázky
  • Client-side adaptive image
  • Responsive images and styles
    • nemá lazy loading
    • pouze globální nastavení breakpointů
    • ​Full support for image fields
    • Full support for colorbox
    • Partial support for field_slideshow
    • Doesn't need any changes to .htaccess / nginx
    • Supports page caching per size
    • Can do an automatic reload if the cookie isn't set
    • Can do an automatic reload if the window size is changed
    • Supports expire module, so the cache gets cleared for all defined suffixes
    • Supports the Context Module
    • Supports the Media Module
    • Supports images within blocks (can be disabled on the settings page)
    • Supports images within entity textfields (must be enabled in the settings of the field)
  • Responsive Images
    • works as a field formatter
    • only supports 2 sizes
  • Adaptive Image
    • works with screen size, not window size
  • Adaptive Image Styles (ais)
    • needs .htaccess rules
    • is integrates with the Media module
  • Client-side adaptive image
    • works as a field formatter
  • Media: Responsive
    • works only on media field
    • set as maximum width
    • uses css for the smaller variants

Další moduly: