Слайд-шоу на главной

[amd4]

OcStore/3.0.2.0
Сейчас баннеры на главной, (слайд-шоу, который идет сразу после горизонтального меню). На мобильных телефонах выглядит мелким прямоугольником. Многие в своих модулях-слайд-шоу и шаблонах делают функцию "отключать слайд шоу на маленьких экранах" .
Я честно говоря не совсем понимаю зачем разработчики модулей разрабатывают функцию "отключать слайд шоу на маленьких экранах".
Ведь сегодня больше 50% трафик идет через мобильные (маленькие экраны) , в баннерах на больших экранах предлагаются уникальные предложения или реклама, а на мобильных посетитель сайта их не видит. Как так? Или в лучшем случае должен вчитываться в этот маленький баннер.

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

Необходимо это для того что наши Баннеры делаются в фотошопе с фонами и сразу написанными текстами с уникальными шрифтами. А в мобильной версии этот баннер сужается настолько что прочитать что на нем написано невозможно. Будет проще если мы будем загружать отдельную лайтовую картинку с нужным нам разрешением подогнанным под неё текстом.

Кто может в этом помочь?

[Tom]

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

Многие в своих модулях-слайд-шоу и шаблонах делают функцию "отключать слайд шоу на маленьких экранах" .

Во первых смысл какой выводить нечто мелкое и нечитаемое на столь маленьких экранах.

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

Здесь по хорошему нужен модуль, который бы позволил выводить слайд шоу, как одно целое из нескольких отдельных элементов, например отдельно Картинка, отдельно некий Текст (может ещё кнопки какие то).

Всё это можно сделать и проще.

Обыграть вёрсткой любой подобный набор (Картинка - Текст - Кнопка - итд), вывести через встроенный модуль HTML самого опенкарт.

Вывести там же где и слайдер.

Стилями (кастомными в панели шаблона или дописать к основным) скрыть HTML модуль в ПК версии, но отображать Слайдер, в мобильной версии обратное действие , тем же css (кастомные стили).

[Seofisher]

Или просто 2 слайдера в одном месте. Через css скрывать и отображать в зависимости от размера экрана

[amd4]

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

Во первых смысл какой выводить нечто мелкое и нечитаемое на столь маленьких экранах.

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

Здесь по хорошему нужен модуль, который бы позволил выводить слайд шоу, как одно целое из нескольких отдельных элементов, например отдельно Картинка, отдельно некий Текст (может ещё кнопки какие то).

Всё это можно сделать и проще.

Обыграть вёрсткой любой подобный набор (Картинка - Текст - Кнопка - итд), вывести через встроенный модуль HTML самого опенкарт.

Вывести там же где и слайдер.

Стилями (кастомными в панели шаблона или дописать к основным) скрыть HTML модуль в ПК версии, но отображать Слайдер, в мобильной версии обратное действие , тем же css (кастомные стили).

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

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

Наши баннеры практически такие же ,(Соответственно только шириной больше), где используется свой уникальный шрифт, фон и всякого рода мелкие детали на заднем фоне.   

На больших экранах проблем с ними нет, но на маленьких  всё становится мелким. К тому же поставщики помимо большого размера ,предоставляют баннер с квадратным размером для мобильных. (как последний баннер с розовым фоном)

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

 

 

 

Спойлер

 

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

[SiteMix]

В этом модуле можно настроить адаптацию баннера под текст или под картинку:

В первом варианте текст всегда будет читаемым.

 

Есть ещё какой-то модуль, сейчас не вспомню. У него для мобильной версии можно добавить отдельную картинку.

[amd4]

40 минут назад, Seofisher сказал:

Или просто 2 слайдера в одном месте. Через css скрывать и отображать в зависимости от размера экрана

Так наверное нагрузка на сайт будет неплохая? 

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

[amd4]

2 минуты назад, SiteMix сказал:

 

Есть ещё какой-то модуль, сейчас не вспомню. У него для мобильной версии можно добавить отдельную картинку.

 

Попробуйте вспомнить пожалуйста) Похоже это то, что нам и нужно. 

Правда я пересматривал на нескольких ресурсах и не нашел

 

[Tom]

На всех ваших картинках есть то о чём я писал "Картинка - Текст - Кнопка".

Если всё это элемент картинки , как единое целое, то уменьшите всё это до размера который по ширине встанет в размер экрана того же телефона и ответьте на мой вопрос
 

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

смысл какой выводить нечто мелкое и нечитаемое на столь маленьких экранах.

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

Вот ваша последняя картинка 1600 на 1200...уменьшаем её до размера мобильного устройства и как там разглядеть все эти надписи про скидки итп на Пасху ?

 

[SiteMix]

22 минуты назад, amd4 сказал:

 

Попробуйте вспомнить пожалуйста) Похоже это то, что нам и нужно. 

Правда я пересматривал на нескольких ресурсах и не нашел

 

Да я уже просмотрел в модулях. Не нашёл. Может быть это в слайдере какого-то шаблоне было...

 

Но вы гляньте демку модуля на который я давал ссылку, возможно и такой вариант устроит...

[Tom]

13 минут назад, SiteMix сказал:

Да я уже просмотрел в модулях. Не нашёл. Может быть это в слайдере какого-то шаблоне было...

 

Но вы гляньте демку модуля на который я давал ссылку, возможно и такой вариант устроит...

Хороший модуль, для тех кто знаком с html и css. Единственное если ты это знаешь , то тебе хватит любого модуля HTML . А у ТС есть и то и другое (возможность ввода кастомных стилей там же в админке) и модуль HTML самого опенкарт....

[amd4]

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

На всех ваших картинках есть то о чём я писал "Картинка - Текст - Кнопка".

Если всё это элемент картинки , как единое целое, то уменьшите всё это до размера который по ширине встанет в размер экрана того же телефона и ответьте на мой вопрос
 

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

Вот ваша последняя картинка 1600 на 1200...уменьшаем её до размера мобильного устройства и как там разглядеть все эти надписи про скидки итп на Пасху ?

 

Я понимаю что вы писали о верстке. В этом случае я же писал - это нужно будет нам самим создавать баннеры затрачивая на это свой ресурс.  И выглядеть пошагово это будет примерно так -  Поставщик нам прислал баннер, один под большие экраны, второй под маленькие, мы вырезаем с него картинку и колдуем с текстом через html и css.   Зачем это?

Мне кажется, с экономической  точки зрения,  целесообразней будет потратиться один раз на модуль и размещать уже готовые  баннеры от поставщика ,  чем несколько раз в месяц новые баннеры постоянно переделывать затрачивая на это свои ресурсы и человеко-часы.  

По поводу последней картинки , это я взял пример из интернета.  И нам ничего уменьшать не надо будет, поставщик будет отсылать один баннер размером 1920х450 , второй под мобильные 400х300. НО ! баннер 400х300 он уже немного видоизменен под маленькие экраны, увеличены его уникальные шрифты, расположение предметов немного другое,  а не просто уменьшен с 1920х450, на 400х300. 

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

[Tom]

Все ваши рассуждения именно от не знания основ html и css.

 

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

Значения эти hidden-sm(xs) и hidden-md(lg) и всё.

Даже вёрстка не нужна.

Открыли модуль html, вписали две строчки содержащие путь до картинок, сохранили и вывели в схеме.

Нужно сменить, открыли ещё на пару минут, опять готово.

https://bootstrap-4.ru/docs/4.0/utilities/display/

Спойлер

<img src="/image/image_mobile.jpg" alt="Only Mobile" class="img-responsive hidden-md hidden-lg">
<img src="/image/image_pc.jpg" alt="Only PC" class="img-responsive hidden-xs hidden-sm">
Пример
http://tomkz.tw1.ru/ru/

 

[amd4]

28 минут назад, Tom сказал:

Все ваши рассуждения именно от не знания основ html и css.

 

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

Значения эти hidden-sm(xs) и hidden-md(lg) и всё.

Даже вёрстка не нужна.

Открыли модуль html, вписали две строчки содержащие путь до картинок, сохранили и вывели в схеме.

Нужно сменить, открыли ещё на пару минут, опять готово.

https://bootstrap-4.ru/docs/4.0/utilities/display/

  Скрыть контент

<img src="/image/image_mobile.jpg" alt="Only Mobile" class="img-responsive hidden-md hidden-lg">
<img src="/image/image_pc.jpg" alt="Only PC" class="img-responsive hidden-xs hidden-sm">
Пример
http://tomkz.tw1.ru/ru/

 

Модуль  html ? В расширениях это HTML контент  ? 

[amd4]

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

1. в функционале банеров добавляете 3-4 дополнительные загрузки изображений под каждое требуемое разрешение (БД+ контроллер+ вьюха)
2. прописываете по условию в зависимости от разрешения экрана отображение необходимой картинки с в слайдшоу.
 

Спасибо, я понимаю что нужно править и даже какие файлы править, я даже написал изначально что нужно сделать это дополнение из стокового, но к сожалению пока недостаточно ума на это.  А если немедленно начать разбираться в этом, то можно магазин запустить через пару годиков ))   

[Golubenko]

Написал в приват 

[Tom]

11 минут назад, amd4 сказал:

В расширениях это HTML контент  ? 

Перевод может быть разным, в том числе и HTML содержимое(HTML контент).

Ну или так

 

[amd4]

51 минуту назад, Tom сказал:

Все ваши рассуждения именно от не знания основ html и css.

 

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

Значения эти hidden-sm(xs) и hidden-md(lg) и всё.

Даже вёрстка не нужна.

Открыли модуль html, вписали две строчки содержащие путь до картинок, сохранили и вывели в схеме.

Нужно сменить, открыли ещё на пару минут, опять готово.

https://bootstrap-4.ru/docs/4.0/utilities/display/

  Скрыть контент

<img src="/image/image_mobile.jpg" alt="Only Mobile" class="img-responsive hidden-md hidden-lg">
<img src="/image/image_pc.jpg" alt="Only PC" class="img-responsive hidden-xs hidden-sm">
Пример
http://tomkz.tw1.ru/ru/

 

Ну да, как вариант. Работает. Спасибо. Только почему то размеры не полностью совпадают на сайте 1430х335 а само изображение 1920х450

[Sha]

13 часов назад, amd4 сказал:

 

Попробуйте вспомнить пожалуйста) Похоже это то, что нам и нужно. 

Правда я пересматривал на нескольких ресурсах и не нашел

 

https://opencartforum.com/files/file/5345-mobilnaja-versija-opencart-uskorenie-layout-type

 

похоже это то, что Вам нужно)

при создании преследовалась подобная логика, как Вы описали,

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

[Tom]

В 03.08.2021 в 17:20, amd4 сказал:

Ну да, как вариант. Работает. Спасибо. Только почему то размеры не полностью совпадают на сайте 1430х335 а само изображение 1920х450

Открыть исходный код и посмотреть, может редактор дописал сам фиксированные размеры. А они там не нужны, хватает этого :

class="img-responsive hidden-md hidden-lg"

 

[amd4]

5 минут назад, Tom сказал:

Открыть исходный код и посмотреть, может редактор дописал сам фиксированные размеры. А они там не нужны, хватает этого :

class="img-responsive hidden-md hidden-lg"

 

В Div html  дополнительно обертывается . 

 

У вас просто 

<div id="content" class="col-sm-12">

<div 

 

 

А у меня 

<div id="content" class="col-sm-12">

<div html

[Tom]

Это классы самого редактора. Внутри которых выводится информация , которую им (модулем HTML ) выводят.

У меня "голый" опенкарт 3.