При загрузке обложки окно preview не помещается на экран.

Доброго времени суток.
При загрузке обложки, если картинка больше расширения экрана, то окно preview не помещается на экран и выходит за viewport. Соответственно кнопки Загрузить и Закрыть тоже скрываются выходя за пределы экрана. Как можно пофиксить эту проблему? Если делать через CSS то нарушается работа рамки выбора области загружаемого изображения.

Вот фото которое сбросил клиент.

Это картинка которую он пробовал загрузить.

Судя по фото у нее старый монитор и его разрешение примерно 1024 😕

У себя уменьшил окно браузера примерно до таких же размеров примерно 1024 получилась такая же проблема.

Браузер Хром последние обновление. Пробовал только что и в Opera, результат тот-же. Изначально так и делал - уменьшаю размер окна браузера и потом загружаю картинку. Просмотрел в инспекторе стили все исходные стили не переписываются другими. Вот ссылка на регистрацию. Попробуйте непосредственно на сайте.

Я так понял, что у меня ширина preview по какой-то причине вычисляется по размеру картинки (принимает ширину равную ширине картинки), а не по viewport.

Логин и пароль - test

Отключил. И кэш почистил на всякий случай.

У меня тоже закралось подозрение на тему. Плагин не редактировал. По крайней мере is и php не трогал. Попробую поменять тему отпишусь.

С начало начну с темы. Потом посмотрю еще раз css. Ядро плагина я не трогал и понимаю последствия этого. Только переопределил стили ссылок и кнопок в своем css. По поводу переноса кнопок - уже пробовал, но проблема в том что картинку всю не видно, а пользователь захочет как всегда то что спряталось 👿

Поменял тему, убрал свои переопределяющие стили - не помогло. Видимо какой-то из плагинов перебивает. Буду искать. Если найду отпишусь. Если нет придется стилями костылять.

Добрый день.
Странный баг.
Методом перебора так и не смог определить, что перебивает размеры модального окна и картинки.
Пробовал удалить все плагины и отключить свои файлы стилей и скриптов (хоть там и нет ничего особо такого), не помогло ни с одним из шаблонов WPR. Но если я переключал тему WP на стандартную, то все начинало работать. Даже пробовал на стандартной теме WP со всеми включёнными плагинами и все тоже работало. Переключаюсь на свою - снова работает не корректно. Отключал все свои стили и js при работающих плагинах - ноль.
Фигня какая-то.
А вы не могли бы сказать в каком файле высчитывается размер preview. Может удастся найти, что переопределяет эти параметры.
И да, метод который описан в теме про аватарку я уже пробовал. Помогает решить проблему с размером окна, но хотелось бы полный функционал. И поскольку я такой не один, значить есть какой-то модуль который все портит. Жаль что этот человек на в сети, а то можно было-бы сверить список плагинов и вычислить общие для сужения поиска.

Думал список плагинов поможет, но у нас только один общий и это WP-Recall.
Сейчас просматриваю его файлы в поиске какой файл формирует и присваивает значения ширины и высоты картинке. Нашел uploader-cover.js. Он отвечает за загрузку картинки и тут считываются размеры картинки и передаются в библиотеку Jcrop где как я понимаю вырезается выбранная область пользователем. Но эта библиотека сжата и нечего не понять. А вот где вписываются параметры ширины и высоты в тег img и класс jcrop-holder в модальном окне при его формировании еще не нашел.

В общем поковыряв немного Ваш модуль пришел к выводу, что я был прав и файл uploader-cover.js таки подгружает картинку в этой строке
jQuery('body > div').last().after('<div id=rcl-preview><img src="'+imgUrl+'"></div>');
и от нее уже формируется все остальное. Но остается один вопрос - откуда, а точнее с какого js этой картинке присваиваются стили в том числе ширина с высотой и почему тогда к остальным картинкам не применяются те же стили. В этой строчке этого тоже нет. И почему на всех темах в том числе и на вашем сайте при маленьких разрешениях эта картинка подгоняется под размер модального окна, а у меня модальное окно растягивается на ширину картинки и соответственно вылазит за пределы viewport?
Немного подумав решил захардкорить размеры картинки прям в вашем коде, пока в качестве эксперимента. Задал размеры максимально 1024 (не вижу смысла раскатывать окно на весь экран если картинка будет очень большой и экран 1980) и растягиваю картинку на всю ширину, а высота по умолчанию.
jQuery('body > div').last().after('<div id=rcl-preview><img src="'+imgUrl+'" style="max-width:1024px; width:100%; height:auto;"></div>');
Вроде помогло и возможно Вы сможете на основе этого как-то пофиксить плагин для большей универсальности.
Но вопрос остается открытым - в каком месте, если не тут, картинке прописываются стили и почему картинка не подгоняется под модальное окно, а сама задает ему размер.

Если так, то единственное место где еще применяется эта библиотека в WP - Customizer, в который я прописываю свои поля для настройки параметров страниц и одни из них есть загрузка картинок с возможностью их обрезки. Но там все прописано по кодексу WP и отсебятины нет, к тому же я пробовал его тоже полностью отключать, но безрезультатно.
И еще вопрос, я так понял, что модальное окно у Вас генерируется тоже динамически сторонней библиотекой. Просто, если бы оно было сразу прописанной внизу страницы с картинкой и просто скрыто, то можно было-бы заранее прописать css для нормального формирования этого окна и подгонкой этой картинки под него...
Стоп. Может это реально глючит не Jcrop, ведь он берет размеры уже вписанной в модальное окно картинки, а модальное окно неправильно формируется... Что думаете?

Я не могу понять, что мог сделать не так в своей теме, что это повлияло на работу модуля и даже отключение своих css, js и плагинов не заставило его работать корректно. Уже начал грешить на Underscores (базовый набор для создания темы WP), но установив его в чистом виде все работало идеально. Значит что-то сам дописал, но где? У меня все свои классы и в js я нигде не переопределяю стили img в чисто виде. Думаю надо еще покапать под библиотеку ssi-modal, которая отвечает за формирование этого окна которое не влазит в размеры viewport.