Делаем Fotorama адаптивной

Очень простой и крутой плагин Fotorama, но он совсем не адаптивный.

Например нужно сделать, чтобы на десктопе он был одной высоты и первая картинка пропорционально тянулась, а на мобайле нужно, чтобы высота была больше и картинка почти на всю ширину, а на совсем маленьких экранах на всю ширину. С помощью css не получилось сделать, потому что сам плагин вычисляет параметры и задает размеры не только картинке, но и родительским блокам. Решил вопрос (может и не совсем кошерно, но под текущую задачу) с помощью Javascript.

Чтобы не менять скрипты в плагине, пользуемся документацией Fotorama, создаем файл fotoramaDefaults.js (для WP этот скрипт помещаем в папку plugins, а не в папку с плагином fotorama), и в него пишем такой скрипт:

if ( window.matchMedia( '(min-width: 768px)' ).matches ) {
  fotoramaDefaults = {
    nav: 'thumbs',
    allowfullscreen: 'native',
    keyboard: true,
    maxheight: 250
  }
} else {
  fotoramaDefaults = {
    nav: 'thumbs',
    allowfullscreen: 'native',
    keyboard: true,
    maxheight: 550
  }
}

В этом скрипте мы задаем дефолтные настройки для нашего слайдера, при этом для экранов выше разрешения 768px задаем минимальную высоту большой картинки слайдера 250px, а для экраном меньше 768px по ширине задаем высоту первой картинки максимум 550px, и соответственно картинка будет тянуться пропорционально по ширине. Остальные настройки для слайдера идентичны.