При открытии страницы Статьи или Лота товара на смартфоне, то вставленные картинки и видео не адаптируется под мобильный формат.

[Renus]

При открытии страницы  Статьи или Карточки товара на смартфоне, то  вставленные картинки и видео  не адаптируется под мобильный формат (текст адаптируется) и выглядят громадно с прокруткой. Привожу ниже скришоты. Это очень странно, как это можно поправить?

 

Opencart v 3.0.3.7 "Русская сборка"

 

Скриншот статьи:

 

****************************************************************************************************

Скриншот карточки товара:

 

Змінено 17 серпня 2021 користувачем Renus

[Venter]

19 минут назад, Renus сказал:

Это очень странно, как это можно поправить?

 

адаптировать. Почему странно??? просто не адаптировали вот и все.

А так вообще то ваш сайт смотреть надо а не скрины выкладывать потому что наш ясновидящий в отпуске. Ссылку на сайт киньте

[Renus]

>>адаптировать. Почему странно??? просто не адаптировали вот и все. 

- Ну вроде, как из коробки такие базовые вещи должны корректно работать.

 

>>А так вообще то ваш сайт смотреть надо а не скрины выкладывать потому что наш ясновидящий в отпуске.

- Тестовый стенд: http://renatleo.beget.tech/index.php?route=information/information&information_id=6

 

При наборе статьи есть кнопка редактировать Исходный код, вероятно в нем надо обернуть картинку в div слой и задать параметры масштабирования (иподдерживает ли это редактор...)?

 

Текущий код:

<p><font face="Verdana"><span style="font-size: 14px;">- Почтой РФ&nbsp; с трек номером отслеживания - 450 р. Доставляется по РФ за 4-5 дней.&nbsp;</span><span style="font-size: 14px;">Применима к средним по&nbsp;</span><span style="font-size: 14px;">габаритам&nbsp;</span><span style="font-size: 14px;">товарам&nbsp;</span><span style="font-size: 14px;">&nbsp;</span><span style="font-size: 14px;">(напр. оргонитовые пирамиды).</span><br></font></p><p style="margin-bottom: 10px; font-size: 12px;"><font face="Verdana"><span style="font-size: 14px;">- Почтой РФ 1 класс авиа с трек номером отслеживания - 250 р. Доставляется по РФ за&nbsp;</span><span style="font-size: 14px;">3-4 дня. Применима к мелким по&nbsp;</span><span style="font-size: 14px;">габаритам&nbsp;</span><span style="font-size: 14px;">товарам&nbsp;</span><span style="font-size: 14px;">(напр. оргонитовые кулоны).</span></font></p><p><img style="width: 700px;" src="http://renatleo.beget.tech/image/catalog/Dostavka.jpg"><br></p>

 

Змінено 17 серпня 2021 користувачем Renus

[Venter]

9 минут назад, Renus сказал:

Ну вроде, как из коробки такие базовые вещи должны корректно работать.

писец.....

 

у картинок должен быть класс class="img-responsive", и естественно что редактор его не добавляет

и можно убрать из картинок style="width: 700px;" 

[sasha3337774]

вы же сами вставляете фотки с фиксируемыми размерами, вот и результат такой
и как уже сказал @Venter нужно добавлять картинкам class="img-responsive"
 

<img src="http://renatleo.beget.tech/image/catalog/Dostavka.jpg" class="img-responsive">

а с видео примерно так нужно:
 

<iframe width="100%" height="315" src="https://www.youtube.com/embed/dpuKVjX6BJ8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

Змінено 17 серпня 2021 користувачем sasha3337774

[Tom]

53 минуты назад, sasha3337774 сказал:

вы же сами вставляете фотки с фиксируемыми размерами,

Это делает текстовый редактор.

Сюда 

catalog/view/theme/default/stylesheet/stylesheet.css

в самый конец добавить так например:

#information-information img{
    width:100% !Important;
    height:auto !Important;
}

 

Можно скрипт в файл вывода статей в  конец information.twig ( catalog\view\theme\default\template\information\information.twig ) дописать , который будет убирать дописываемые редактором размеры и добавлять класс img-responsive.

Так например :
 

<script type="text/javascript">
    $(document).ready(function() {
        $("img").addClass("img-responsive");
		$("img").attr("style","");
});
</script>

 

Можно в контроллере catalog\controller\information\information.php

найти
 

$data['description'] = html_entity_decode($information_info['description'], ENT_QUOTES, 'UTF-8');

 

и добавить
 

data['description'] = str_replace("<img", "<img class='img-responsive'", $data['description']);

 

Ну итд итп.

 

Здесь ошибка больше в выборе сборки для магазина.

[Renus]

Всех благодарю за ответы, class="img-responsive" работает и проблема исчезла. Чтобы автоматизировать процесс, то воспользовался кодом Tom'а  в information.twig добавил код замены. Я так понимаю information.twig  относится исключительно к модулю Информация (статьи) и не влияет на другие модули?

 

Так тоже сделал и  все работает, тут тоже видимо код касается только модуля Информация (статьи)? -
 

Цитата

 

Можно в контроллере catalog\controller\information\information.php

найти

 

 

$data['description'] = html_entity_decode($information_info['description'], ENT_QUOTES, 'UTF-8');

Змінено 17 серпня 2021 користувачем Renus

[Renus]

Tom - ого, сколько у вас разработанных модулей к opencart!

 

Выше привели код по видео, куда его можно вставить, видимо в модуль карточки статьи twig...

<iframe width="100%" height="315" src="https://www.youtube.com/embed/dpuKVjX6BJ8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

Змінено 17 серпня 2021 користувачем Renus

[Tom]

Ссылку на страницу с этим видео дайте.

[sasha3337774]

32 минуты назад, Renus сказал:

Выше привели код по видео, куда его можно вставить, видимо в модуль карточки статьи twig...

<iframe width="100%" height="315" src="https://www.youtube.com/embed/dpuKVjX6BJ8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

этот код пример того, чтобы видео было адаптивное для мобильных устройств и компьютеров.

[Renus]

3 часа назад, Tom сказал:

Ссылку на страницу с этим видео дайте.

http://renatleo.beget.tech/index.php?route=product/product&path=25_28&product_id=42

[Renus]

3 часа назад, sasha3337774 сказал:

этот код пример того, чтобы видео было адаптивное для мобильных устройств и компьютеров.

 Здорово, да теперь надо его вставить, как и с картинкам, чтобы автоматом ко всем видео в карточке товара применялся.

[Tom]

10 минут назад, Renus сказал:

http://renatleo.beget.tech/index.php?route=product/product&path=25_28&product_id=42

В файл стиле (путь в предыдущем сообщении) в конец добавить так например
 

@media (max-width:761px){
    iframe {
        width: 100%;
        height: 100%;     
     }
}

 

[Renus]

10 часов назад, Tom сказал:

В файл стиле (путь в предыдущем сообщении) в конец добавить так например
 

@media (max-width:761px){
    iframe {
        width: 100%;
        height: 100%;     
     }
}

 

Попробовал, добавил код в конец файла в catalog/view/theme/default/stylesheet/stylesheet.css  , но ничего не произошло. Кстати, когда я пробовал с картинками, то тоже ничего не произошло (прикладываю к посту ccs файл):

#information-information img{
    width:100% !Important;
    height:auto !Important;
}

stylesheet.css

Змінено 18 серпня 2021 користувачем Renus

[Tom]

Где , то о чём я писал?

http://renatleo.beget.tech/catalog/view/theme/default/stylesheet/stylesheet.css

Увы. Ни строчки.

Но уже есть утверждение "НЕ ПОМОГЛО".

http://joxi.ru/8AnNW1pHojb78A
http://joxi.ru/ZrJj4xdHb9aM4r

[Venter]

10 часов назад, Renus сказал:

Попробовал, добавил код в конец файла в catalog/view/theme/default/stylesheet/stylesheet.css  , но ничего не произошло. Кстати, когда я пробовал с картинками, то тоже ничего не произошло (прикладываю к посту ccs файл):

#information-information img{
    width:100% !Important;
    height:auto !Important;
}

stylesheet.css 15 \u043a\u0411 · 0 downloads

 

Засунь эти строки в header после перед тегом </head>  Обнови кеш, обнови модификаторы.

ТС тебе че вообще лень в сети информацию найти куда и как поставить а??? На форуме не лень писать в поиске пару слов написать лень

 

Когда в файл вставляешь нужно кеш браузера чистить, но пользователи которые у тебя уже были могут изменения не увидеть, поэтому есть еще один способ который можешь нагуглить

[Tom]

10 минут назад, Venter сказал:

Засунь эти строки в header после перед тегом </head>  Обнови кеш, обнови модификаторы.

Стилям, место в стилях , а не в хидере.

 

[Tom]

Статья :

http://tomkz.tw1.ru/delivery/ 

Товар :

http://tomkz.tw1.ru/apple_cinema_30/

[Renus]

23 часа назад, Tom сказал:

Где , то о чём я писал?

http://renatleo.beget.tech/catalog/view/theme/default/stylesheet/stylesheet.css

Увы. Ни строчки.

Но уже есть утверждение "НЕ ПОМОГЛО".

http://joxi.ru/8AnNW1pHojb78A
http://joxi.ru/ZrJj4xdHb9aM4r

Прикрепил ccs (catalog/view/theme/default/stylesheet/stylesheet.css ) со вставленным вышеприведенным кодом по видео. Вставил код в конец ccs, сохранил изменения, обновил модификаторы, обновил кэш браузера + другой браузера, обновил в админке Панель состояния->кнопка шестеренки->обновил кэш темы, к сожалению  но изменений не видно. По вашим ссылкам видео отображается уже смасштабировано, как и требовалось.

 

Ссылка, измерения не видны: http://renatleo.beget.tech/index.php?route=information/information&information_id=6

 

>>Засунь эти строки в header после перед тегом </head>  Обнови кеш, обнови модификаторы.

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

 

stylesheet.css

Змінено 19 серпня 2021 користувачем Renus

[Tom]

1 час назад, Renus сказал:

но изменений не видно.

 

[Renus]

Всех и особенно Tom'а благодарю 

Почистил кэш браузеров основательно со всеми галочками.

По видео вопрос, достаточно сжатый вид по высоте, хотя стоит height: 100%;  - смотрится сжато, как это поправить? 

Нет возможности увеличить на весь экран...

 

[Tom]

Они в курсе этого форума.

26 минут назад, Renus сказал:

достаточно сжатый вид по высоте,

Есть такое понятие - пропорции. 

Если фото было метр длинной и сантиметров 20 шириной и смотрелось шикарно, то при уменьшении ширины до 20 см, странно пенять, что оно стало сжатым...

 

[Renus]

Да, примерно так и подумал, видимо пропорции видео такие.

А во весь  экран не сделать (функционал не заложен)?

[Tom]

Во весь экран это как ?

У экрана есть ширина, видео подстраивается под эту ширину, сохраняя пропорции относительно высоты.

[Renus]

В 19.08.2021 в 21:38, Tom сказал:

Во весь экран это как ?

У экрана есть ширина, видео подстраивается под эту ширину, сохраняя пропорции относительно высоты.

Имел виду, чтобы была активна кнопка квадратик - на весь экран. Сейчас она неактивна (серая)...именно в мобильной версии.

Змінено 23 серпня 2021 користувачем Renus