Вывод чанка MODX в зависимости от ширины монитора
Необходимо разработать сниппет, который будет выводить чанк в зависимости от ширины экрана.
Например, есть сложный дизайнерский блок, пример http://prntscr.com/ketr19 или http://prntscr.com/ketspn, таких примеров сотни... (выводится через отдельный чанк). Очень часто, неудобно перестраивать такие блоки стилями при адаптации (очень затратно по времени, чтобы довести до адекватного вида http://prntscr.com/ketrqd). Или например нужно вывести блок с совершенно другой html структурой для определенных экранов (например экранов ниже 960 и т д). Или хедер для интернет магазина нужно вывести с другой структурой (где будет другой порядок колонок, не такой как для ПК). На практике, ситуаций очень много, где было бы идеально выводить чанк с отдельной упрощенной структурой, а не играться со стилями и переставлять колонки местами через скрипты...
PS Через CSS (@media screen) просьба не предлагать в стиле напишите для блока display: none; - этот вариант категорически не подходит, так как нужно не просто скрыть содержимое через стиль, а полностью убрать из исходного кода + очень пагубно для продвигаемого сайта скрыть содержимое через display: none, даже сказал бы убийственно и недопустимо (скрывать разные тексты и содержимое и дублировать его другим блоком, который будет отображать это содержимое для меньших экранов). Так же не предлагать Бутстрап и различные скрипты для определения устройства (это все не то)
Нужно определение именно ширины (по такой логике как сейчас с CSS @media screen, точно определяет). Пример компонент MobileDetect для MODX (только он определяет устройство а не ширину экрана), нравится как тут условие задается http://prntscr.com/ketu3t (в таком плане хотелось бы через фильтр Fenom)
-
Я так полагаю можно через ajax запросы, сделать вывод нужного блока.
-
Здравствуйте. Вам виднее
-
Через аякс не получиться, так как контент не будет проиндексирован поисковиком... Я думаю что нужно дорабатывать мобайлДетект таким образом чтоб возвращалось true на запрос вида
{if '320' | mobiledetect}вот такая ситуация, вариант, вас устроит?
-
Я в этом не силен) мне главное чтобы работало и индексировалось поисковиком)
-
так а почему не установите просто мобайлДетект, или проверка должна быть строго по ширине в пикселях? дело в том что эта библиотека проверяет браузер по загаловкам которы тот, браузер, отправляет во время запроса страницы вот и все... тоесть есть 3 варианта моб, планш и комп, а вам я так понял нужны варианты строго в пикселях или в диапазонах размеров ширины..
-
Да, строго в пикселях. Например, у планшета может быть расширение очень разное, например у одного будет 1280+ у другого 1024, зачем мне показывать к примеру узкую версию с 1024 для 1280+, если для 1280+ я могу показать красивую ПК версию... как то так)
-
хорошо, если к примеру моб. и меняется ориентация в пространстве? то как тогда?
и припишите запланированные размеры? или какими предполагаете пользоваться.. + вы установили себе плагин на сайт? он работает в ключе моб. + планш. + комп ?
-
Мне главное один раз перестроить чанки. Тоесть вывести нужный чанк с новой html структурой на определенном расширении экрана (например на 1200, 960 или 800, на каком то одном) а дальше стилями через CSS @media screen, а чанк для ПК версии скрыть (чтобы его вообще в исходном коде небыло). Не совсем понял - (+ вы установили себе плагин на сайт? он работает в ключе моб. + планш. + комп ? )
-
Это про mobile detect.
Он считывает заголовок который отсылает браузер, и определяет тип браузера. Браузер для пк или для планшета или для смартфона
-
"Мне главное один раз перестроить чанки. Тоесть вывести нужный чанк с новой html структурой на определенном расширении экрана (например на 1200, 960 или 800, на каком то одном) а дальше стилями через CSS.., а чанк для ПК версии скрыть (чтобы его вообще в исходном коде небыло). "
- как раз это и делает скирпт мобайлДетект который вы можете прямо использовать по назначению
{if 'standard' | mobiledetect}[[$chnk_desc]] {/if} {if 'tablet' | mobiledetect}[[$chnk_tablet]]{/if} {if 'mobile' | mobiledetect}[[$chnk_mob]]{/if} -
Нет, это не то. Как я и писал ранее, к примеру хоху перестроить чанк для экрана 1024 и ниже, а если задам tablet то он мне может показать этот контент и для экранов меньше 1024 и для экранов больше 1024... а нужно к примеру только 1024 =<
-
Php не может определять ширину экрана.
Мобайл детект считывает заголовок который передает браузер.
Ширину неопределить
-
А кто вам мешает переписать скрипт, дописать к заголовкам размер в пикселях + вернуть не булев тип а массив с юзер агентом и шириной этого девайса?
-
Это каким образом вы заставите браузеры передавать ширину экрана?
-
не заставлять браузер передавать ширину, не получиться, а дописать ширину самому в зависимости от юзер агента в класс детектера
-
Вы сомжете сделать таким способом как описываете?
-
Я как раз думаю над этим, и возможностью реализации, дописать размеры можно к детектору, а вот какие именно, нужно проверять устройства на передаваемый заголовок юзер агента и реальную ширину экрана, тоесть если размер экрана идет для планшета, то дальше нужно раскинуть 1024 это или 960 или 800. я правильно вас понимаю?
-
Ширина экрана в заголовке котлрый отправляет браузера нет. И не будет.
Ширину может получить толь js который выполняется при открытии страницы
-
Например. Зашел человек с ipad 1 в альбоме (это 1024) а мы прописали условие что
{if '1204' | mobiledetect}[[$chnk_1024]] {/if}и ему вывелся чанк с содержимым для 1024, больше он переопределяться не будет, тоесть дальше уже не будет условий для этого чанка для экрана 960 и 800. Один раз только будет глобальная перестройка чанка
-
прописали условие для 1024 и значит что этот чан будет показываться на экранах 1024 и ниже (до самого минимального).
-
Или например зашел человек с планшета в портрете (768) и мы к примеру прописали условие для экранов 768 и ниже, но если он сменил ориентацию в таком случае в альбомную (1024), то уже ему выводится стандартный чанк для ПК
-
Самое простое перестраивать как надо при помощи css. На ваших скринах не видно что там какойто сложный вид
-
Есть в разы сложнее, особенно шапки... css то никак колонок местами не поменяет при необходимости...
-
Ну а то что вы хотите, это невозможно.
Только разные чанки для пк планшета и смартфона. Не учитывая ширину.
Либо при загрузки страницы отправлять ajax запрос в спец файл, который в сесию или куки запишет ширину экрана.
И проверять при выводе чанка какая ширина записана и выводить то что нужно
-
Mobail detect определить тип, а дальше уже медиа запросами. Я думаю это оптимальный вариант.
-
Актуальные фриланс-проекты в категории Веб-программирование
Апи интеграция события в фейсбуке с передачей в телеграм с помощью ЦРМ сервиса make.com
Трафик будет идти через лид форму, и нужно передавать фейсбуку информацию о людях которые пришли к нам на собеседовение (продажи среди лидов), для того чтобы он более качественно оптимизировался То есть нужно чтобы фб получал информацию о тех людях которые пришли на… Веб-программирование, Разработка ботов ∙ 6 минут назад ∙ 4 ставки |
Вывести посты из Инстаграма на сайт (опенкарт)
700 UAH
Здравствуйте. Нужно настроить функционал, чтобы на сайте (OpenCart) отображался блок с постами Instagram. Отзовитесь, кто делал и знает как ) Спасибо ) По стоимости договоримся, не знаю, сколько это стоит. HTML и CSS верстка, Веб-программирование ∙ 2 часа 1 минута назад ∙ 28 ставок |
Разработка сайта для интернет-магазина.Интересует разработка сайта для интернет-магазина. Нужна система: интернет-магазин (до 2000 товаров, в начале меньше), 10–20 SEO-ориентированных лендингов, интеграции с 1С и ИИ-сервисами. CMS, Веб-программирование ∙ 2 часа 2 минуты назад ∙ 47 ставок |
Обновление одностраничного сайта предоставления строительных услуг
1000 UAH
Обновление действующего одностраничного самописного сайта предоставления строительных услуг Задача: -Редизайн сайта -Добавление категорий услуг путем создания мультилендинга на 6 категорий -Добавление к каждой категории фото и описания работ -Оптимизация рекламы сайта… Веб-программирование ∙ 16 часов 40 минут назад ∙ 72 ставки |
Дополнение Front-end e-com сайта на OpencardНеобходимо доработать front-end e-commerce сайта на OpenCart. Основные задачи: исправить визуальные баги, адаптивность под мобильные устройства, улучшить отображение карточек товаров, категорий, корзины и страницы оформления заказа. Ожидается аккуратная верстка, сохранение… CMS, Веб-программирование ∙ 18 часов 29 минут назад ∙ 47 ставок |
Киев