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

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

22 ответов

15 просмотров

В самом 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

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

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

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

Добрый день, не подскажите, если в OC-V3 поменять страндартную директорию /storage/ на /storage2/ - не будет сильно много проблем ?
Max Dubovsky
32
'frakturBold' => ['𝖆', '𝖇', '𝖈', '𝖉', '𝖊', '𝖋', '𝖌', '𝖍', '𝖎', '𝖏', '𝖐', '𝖑', '𝖒', '𝖓', '𝖔', '𝖕', '𝖖', '𝖗', '𝖘', '𝖙', '𝖚', '𝖛', '𝖜', '𝖝', '𝖞', '𝖟', '𝕬', '𝕭', '𝕮', '𝕯'...
Roma
4
А сколько часов мак держит зарядку в рабочем режиме? Например мой Redmi Mac (просто наклейка от айфона осталась, налепил) по началу держал часов 5 с парой открытых штормов и ...
Ross
8
Всем привет. Вопрос. Есть deb-пакет, внутри него elf. Мне надо его декомпилировать чтоб получился питоновский исходник, а затем сделать security review. Что можно использовать...
Андрей Сергеев
2
Ребят, было ли у вас так, что переменные в WebApp —tg-viewport-height, —tg-viewport-stable-height после метода expand не обновляются, а остаются в размерах, как было до expand...
Black
3
Ребят, а вот такой вопрос: если я владелец бота анонимного чата, в котором, например, имеются подписки, используя какую-нибудь ЮКассу (или тому подобное, в общем с налогами, в...
Eugene Неелов
8
А какое отношение ко мне имеет все ноунейм проекты?
SKAS
2
Гнева и тупости пост. Как блять можно работать с маркетологами? Их в детстве всех родители случайно цепляли об дверные откосы? Поступила таска, на сайте "лишний счетчик Google...
Igor
4
Короче получается только кнопки не поменять А кнопки вроде тоже слетают при редактировании не?
inc.
10
Вообще сейчас эти все провайдеры облаков оборзели. Если тебе нужно 4 ядра и 4 гб., хер где такую конфигурацию найдешь. Суют тебе сразу либо 8гб. либоа сразу 16 гб., они мне на...
Igor
4
Карта сайта