Каким то образом можно определить ширину экрана пользователя перед загрузкой

partial-а?
Надо рассчитать ширину кадров слайдера для ресайза картинок для container-fluid.

22 ответов

50 просмотров

В самом partial’е можно js’ом. Или в новом октябре есть ajaxPartial, там перед загрузкой паршала можно данные передать

В вашей задаче стоит цель определить ширину экрана пользователя до загрузки partial в October CMS, чтобы подобрать картинки нужного размера для слайдера. Это действительно непростая задача, так как обычно размер экрана определяется на стороне клиента с помощью JavaScript, а серверная часть (включая Twig) исполняется до того, как страница полностью загрузится в браузере пользователя. Один из подходов — использовать AJAX для загрузки контента после того, как страница загрузилась и размер экрана уже известен. Вот как это можно сделать в контексте October CMS и AJAX Framework: 1. Определение размера экрана с помощью JavaScript На стороне клиента, используйте JavaScript для определения ширины экрана и отправки этой информации на сервер: document.addEventListener('DOMContentLoaded', function() { var screenWidth = window.innerWidth; // Отправляем AJAX запрос с шириной экрана $.request('onLoadSlider', { data: {screenWidth: screenWidth}, success: function(data) { // Вставляем полученный HTML в нужное место на странице document.getElementById('sliderContainer').innerHTML = data.sliderHtml; } }); }); 2. Обработка запроса на сервере Создайте обработчик onLoadSlider в контроллере, который будет принимать ширину экрана и возвращать HTML для слайдера с картинками нужного размера: public function onLoadSlider() { $screenWidth = post('screenWidth'); // Определите логику выбора размера картинок на основе ширины экрана $images = $this->getImagesForScreenWidth($screenWidth); // Генерируем HTML для слайдера $sliderHtml = $this->renderPartial('@_slider.htm', ['images' => $images]); return ['sliderHtml' => $sliderHtml]; } 3. Использование <source> и <img srcset> Для обеспечения адаптивности изображений в слайдере и предотвращения их замыливания на больших экранах, используйте элемент <picture>, <source> с атрибутом media и <img> с атрибутом srcset: <picture> <source media="(min-width: 1200px)" srcset="path/to/large-image.jpg" type="image/jpeg"> <source media="(min-width: 768px)" srcset="path/to/medium-image.jpg" type="image/jpeg"> <img src="path/to/default-image.jpg" alt="Описание изображения"> </picture> Этот подход позволяет браузеру выбирать наиболее подходящее изображение в зависимости от размера экрана и плотности пикселей, что улучшает качество отображения на различных устройствах. Для решения вашей задачи вам потребуется комбинация клиентского JavaScript для определения размера экрана и серверной логики October CMS для генерации HTML с учетом этой информации. Это позволит загружать картинки нужного размера, обеспечивая их оптимальное отображение на любых устройствах

⚡️Александр
В вашей задаче стоит цель определить ширину экрана...

Близко ИИ ответил, правда для версии октября ниже третьей 🙂

Vladimir 
Близко ИИ ответил, правда для версии октября ниже ...

Livewire (ты прав) ну тут не студия догадайся сам, а реши вопрос быстро, если логика понятно, нахера сидеть и колесо изобретать?

Vladimir 
Где lw? O.o

В October CMS версии 3, процесс работы с AJAX и partials остается похожим, но с некоторыми обновлениями в API и подходах к разработке. В версии 3, October CMS перешел на использование Laravel Livewire, что значительно упрощает создание интерактивных интерфейсов без необходимости писать JavaScript код. Для решения вашей задачи в October CMS 3 с использованием Livewire, вам нужно будет создать Livewire компонент, который будет отвечать за загрузку и отображение слайдера на основе ширины экрана пользователя.

⚡️Александр
В October CMS версии 3, процесс работы с AJAX и pa...

Откуда вообще все это? Это на уровне той фигни с ссл придумано чатом гпт

Sergey
Откуда вообще все это? Это на уровне той фигни с с...

ты вот когда пишешь про ссл у тебя в голову только сертификат приходит или сам протокол передачи данных?

⚡️Александр
ты вот когда пишешь про ссл у тебя в голову только...

А конкретно про тот ответ который так же был сгенерен гптшкой

Sergey
А конкретно про тот ответ который так же был сгене...

там ответ из гугла сразу, если ты яндекс итсолгуд

⚡️Александр
В October CMS версии 3, процесс работы с AJAX и pa...

Если не проверять что тебе отвечает нейронка то лучше и не кидать это в виде ответа

Sergey
Если не проверять что тебе отвечает нейронка то лу...

ты вилимо не узрел что я про то писать и не стал lw изначально

Стикер

да отъебись ты от меня, робот изначально норм предложил так или иначе, потом про lw попер

⚡️Александр
да отъебись ты от меня, робот изначально норм пред...

так а нахрена выдавать ответы робота за свои еще и не верные

Sergey
так а нахрена выдавать ответы робота за свои еще и...

Биноколь купи себе раз не видишь нихуя. тебе не дали что ли сегдня, доебать некого?

Виталий
@banofbot

Да нафига банить пусть сидит читает хотя бы умнее а не через гпт гоняет все

Похожие вопросы

Обсуждают сегодня

Добрый вечер, Пока не совсем понимаю как наладить общение между телеграм ботом и ПО для работы с сим боксом. По самому боту так понял: - Нужен некий баланс, который можно поп...
Magic
6
сделал сайт, прикрутил в боте сайт, и виджет логина. как автоматически логинить пользователя в аккаунт(телеграм), при входе с бота?
Александра Чернивецкая
5
Объясните, пожалуйста, почему компилятор ругается на использование в условии неинициализированной переменной: int x; Task.Run(async () => { x = await somefunc(); }).Wait...
Александр
5
Ребят, подскажите, пожалуйста, почему в префиксе к ассетам, которые генерируются через фильтр | theme в шаблоне, стал вдруг появляться index.php? Вот так выглядит ссылка на а...
Виталий
1
Всем привет. Ребята, подскажите, пожалуйста. у ботов есть ограничение на отправку сообщений - 30 сообщений в секунду, эти ограничения накладываются на все сообщения? или на со...
Artem Stormageddon
4
Блин, ребята, сори за тупые вопросы. А можно ли как-то открыть вебапку по нажатию на кнопку в меню(которое появляется слева, команды)?
Artem Stormageddon
3
а плаксы из-под питона умеют только в комфортных условиях что-то выдавить из себя?)
Lencore
9
Но, может, есть уже проверенная? Наши требования такие: 1. Сообщения должны приходить из Инста в CRM оду 2. Должна быть возможность подключить несколько экаунтов Инстаграм. Р...
Alexander Sharoiko MSE / Александр Шаройко
13
Это может быть все-таки не флудвейт? у меня ботфазер принимает изменения и отображает даже что они изменились, на видео видно что он прислал якобы уже измененное описание, н...
OVERLINK
13
Коллеги, может знает кто, можно ли цвет бейджа счётчика в BackendMenu менять без бубнов?
Alex Blaze
3
Карта сайта