Разместите свой проект бесплатно и начните получать предложения от фрилансеров-исполнителей уже спустя минуты после публикации!

Вывод чанка 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)



  1.  фрилансер больше не работает на сервисе
  2. 2 дняскрыта
    Александр Пупкин
     352   2   0

    В общем, если так https://freelancehunt.com/project/vyivod-chanka-modx-zavisimosti-ot/372356.html#tab-discuss-444946 устроит, сделаю.

    Россия Россия | 5 августа в 17:55 |
  • При помощи php нет возможности определить ширину экрана. 

    Только мобильный браузер или десктопный

  • Я так полагаю можно через ajax запросы, сделать вывод нужного блока. 

  • Юрий Александрович — заказчик проекта
    Пожаловаться | 5 августа в 09:06 |

    Здравствуйте. Вам виднее

  • Через аякс не получиться, так как контент не будет проиндексирован поисковиком... Я думаю что нужно дорабатывать мобайлДетект таким образом чтоб возвращалось true на запрос вида 

    {if '320' | mobiledetect}

    вот такая ситуация, вариант, вас устроит?

  • Юрий Александрович — заказчик проекта
    Пожаловаться | 5 августа в 09:15 |

    Я в этом не силен) мне главное чтобы работало и индексировалось поисковиком)

  • так а почему не установите просто мобайлДетект, или проверка должна быть строго по ширине в пикселях? дело в том что эта библиотека проверяет браузер по загаловкам которы тот, браузер, отправляет во время запроса страницы вот и все... тоесть есть 3 варианта моб, планш и комп, а вам я так понял нужны варианты строго в пикселях или в диапазонах размеров ширины..

  • Юрий Александрович — заказчик проекта
    Пожаловаться | 5 августа в 09:24 |

    Да, строго в пикселях. Например, у планшета может быть расширение очень разное, например у одного будет 1280+ у другого 1024, зачем мне показывать к примеру узкую версию с 1024 для 1280+, если для 1280+ я могу показать красивую ПК версию... как то так)

  • хорошо, если к примеру моб. и меняется ориентация в пространстве? то как тогда?

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

  • Юрий Александрович — заказчик проекта
    Пожаловаться | 5 августа в 09:38 |

    Мне главное один раз перестроить чанки. Тоесть вывести нужный чанк с новой html структурой на определенном расширении экрана (например на 1200, 960 или 800, на каком то одном) а дальше стилями через CSS media 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}
  • Юрий Александрович — заказчик проекта
    Пожаловаться | 5 августа в 10:51 |

    Нет,  это не то. Как я и писал ранее, к примеру хоху перестроить чанк для экрана 1024 и ниже,  а если задам tablet то он мне может показать этот контент и для экранов меньше 1024 и для экранов больше 1024... а нужно к примеру только 1024 =<

  • Php не может определять ширину экрана. 

    Мобайл детект считывает заголовок который передает браузер. 

    Ширину неопределить

  • А кто вам мешает переписать скрипт, дописать к заголовкам размер в пикселях + вернуть не булев тип а массив с юзер агентом и шириной этого девайса?

  • Это каким образом вы заставите браузеры передавать ширину экрана?


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

  • Юрий Александрович — заказчик проекта
    Пожаловаться | 5 августа в 10:53 |

    Вы сомжете сделать таким способом как описываете?

  • Я как раз думаю над этим, и возможностью реализации, дописать размеры можно к детектору, а вот какие именно, нужно проверять устройства на передаваемый заголовок юзер агента и реальную ширину экрана, тоесть если размер экрана идет для планшета, то дальше нужно раскинуть 1024 это или 960 или 800. я правильно вас понимаю? 

  • Ширина экрана в заголовке котлрый отправляет  браузера нет.  И не будет. 

    Ширину может получить толь js который выполняется при открытии страницы

  • Юрий Александрович — заказчик проекта
    Пожаловаться | 5 августа в 11:05 |

    Например. Зашел человек с ipad 1 в альбоме (это 1024) а мы прописали условие что

    {if '1204' | mobiledetect}
    [[$chnk_1024]]
    {/if} 

    и ему вывелся чанк с содержимым для 1024, больше он переопределяться не будет, тоесть дальше уже не будет условий для этого чанка для экрана 960 и 800. Один раз только будет глобальная перестройка чанка

  • Юрий Александрович — заказчик проекта
    Пожаловаться | 5 августа в 11:07 |

    прописали условие для 1024 и значит что этот чан будет показываться на экранах 1024 и ниже (до самого минимального).

  • Условие будет как проверка, с планшета смотрят или нет. Если с планшета то один чанк если нет то другой

  • Юрий Александрович — заказчик проекта
    Пожаловаться | 5 августа в 11:08 |

    Или например зашел человек с планшета в портрете (768) и мы к примеру прописали условие для экранов 768 и ниже, но если он сменил ориентацию в таком случае в альбомную (1024), то уже ему выводится стандартный чанк для ПК

  • Так работать не будет.

    Mobail detect определяет тип: планшет смартфон. При повороте смарфона он в планшет не превратится

  • Откуда вы возмете ширину. Браузер такое не передает и никогда не передавал в заголовках. Не выдумывайте того чего нет

  • Самое простое перестраивать как надо при помощи css. На ваших скринах не видно что там какойто сложный вид

  • Юрий Александрович — заказчик проекта
    Пожаловаться | 5 августа в 11:18 |

    Есть в разы сложнее, особенно шапки... css то никак колонок местами не поменяет при необходимости...

  • Ну а то что вы хотите, это невозможно. 

    Только разные чанки для пк планшета и смартфона. Не учитывая ширину. 

    Либо при загрузки страницы отправлять ajax запрос в спец файл, который в сесию или куки запишет ширину экрана. 

    И проверять при выводе чанка какая ширина записана и выводить то что нужно



  • Только двойной релоад с установкой куки с шириной экрана. Далее через феном ловить куку и выводить нужный чанк. Это единственый вариант. Двойной релоад происходит 1 раз, если кука отсутствует. Как это будет работать с роботами - хз.

  • Mobail detect определить тип, а дальше уже медиа запросами. Я думаю это оптимальный вариант.


Заказчик
Проект опубликован
5 августа в 08:19
132 просмотра