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

[Renus]

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

 

Opencart v 3.0.3.7 "Русская спотому чторка"

 

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

 

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

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

 

Edited August 17, 2021 by 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>

 

Edited August 17, 2021 by 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>

 

Edited August 17, 2021 by 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');

Edited August 17, 2021 by 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>

 

Edited August 17, 2021 by 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

Edited August 18, 2021 by 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

Edited August 19, 2021 by Renus

[Tom]

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

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

 

[Renus]

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

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

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

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

 

[Tom]

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

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

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

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

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

 

[Renus]

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

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

[Tom]

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

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

[Renus]

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

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

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

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

Edited August 23, 2021 by Renus