Вывод чанка 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 определить тип, а дальше уже медиа запросами. Я думаю это оптимальный вариант.
-
Current freelance projects in the category Web Programming
Online lesson"I am looking for a technical specialist/programmer to set up a short online lesson for the field of cosmetology in the USA (Illinois). It is necessary to upload text/video to a ready-made platform (Teachable or similar / or simple WordPress) and set up protection: blocking the… Web Programming ∙ 46 minutes back ∙ 10 proposals |
Creating index.html in the style of the example
57 USD
Hello. I want index.html to be very similar to the AI-generated example. It needs to recreate this American old school style. Web Programming ∙ 3 hours 57 minutes back ∙ 70 proposals |
Make edits on the WP site.
89 USD
It is necessary to make edits on a website that is on WordPress. The site is related to casinos, so experience with this topic is welcome. The list of edits that need to be made: - Move 15 blocks from ACF to Gutenberg Block + check its display - Set up the correct display of… Web Programming ∙ 4 hours 31 minutes back ∙ 55 proposals |
Refinement of WordPress site (Elementor + WooCommerce) for Google Ads advertising launchWHAT NEEDS TO BE DONE The work is divided into blocks; you can take on everything or individual blocks: Block 1 — Speed Optimization (Mobile-First) The current PageSpeed score for the mobile version is 51/100. It needs to be raised to 80+. Target metrics: LCP < 2.5 s… Content Management Systems, Web Programming ∙ 4 hours 42 minutes back ∙ 29 proposals |
Development of a modern SEO website for a coffee food truck
1000 USD
Looking for an experienced developer to create a modern website for a mobile coffee shop in the USA, taking SEO requirements into account. The current website already exists, but a new site needs to be developed from scratch, focused on long-term promotion in Google. What is… Web Programming ∙ 14 hours 24 minutes back ∙ 110 proposals |
Kyiv