Форум Сайтостроение Веб-строительство

Вывод фоток в списке новостей под разные разширения

D
На сайте с 20.09.2010
Offline
175
datum
700

При выводе новостей на разных устройствах фото растягивается в разные размеры, вот какие конкретно у меня получаются:

320 x 480 - 260px

480 x 320 - 390px

240 x 320 - 178px

320 x 240 - 258px

295 х 515 - 233px

515 х 295 - 423px

768 x 1024 - 675px

1024 x 768 - 134px

600 x 1024 - 508px

Тоесть максимальное 675, минимальное 134

Чтобы качество фото было кругом нормальным, нужно выводить 675 пикселей фото, но это не есть гуд по рекомендациям гугла (скорость загрузки страницы)

Как перехватить разрешение экрана и передать его в пхп? Хотя это наверное не оптимальное решение..

Как вобщем поступить грамотно? Как например такой момент в вордпрессе реализован?

---------- Добавлено 10.08.2016 в 14:23 ----------

нагуглил такой вариант: 

if (isset($_GET['width']) AND isset($_GET['height'])) {

    // Сохраняем ширину экрана в сессию и дальше пользуемся

    echo "Ширина экрана: ". $_GET['width'] ."<br />\n";

    echo "Высота экрана: ". $_GET['height'] ."<br />\n";

} else {

    // передаем переменные с размерами

    echo "<script language='javascript'>\n";

    echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"

        . "&width=\" + screen.width + \"&height=\" + screen.height;\n";

    echo "</script>\n";

    exit();

}

Как он в плане сео? Не будут ли в индексе появляться дубли вида site.com/?width=1024&height=768

??

Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#1

datum, используйте srcset для тега img, в WP функция wp_get_attachment_image_srcset/.

D
На сайте с 20.09.2010
Offline
175
datum
#2

у меня не вп а свой движок, что делает функция wp_get_attachment_image_srcset? Можете сбросить ее код сюда?

---------- Добавлено 10.08.2016 в 16:34 ----------

вернее не ее самой а функцию, которая работает с изображениями..

Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#3

datum, нет, не могу. Смотрите документацию.

TF-Studio
На сайте с 17.08.2010
Offline
334
TF-Studio
#4

srcset или просто адаптивные картинки.

перехватить - никак не выйдет. а если выйдет - то будет жутко костыльный метод с ajax-догрузкой

Всё ещё лучший способ заработка для белых сайтов: GoGetLinks (https://www.gogetlinks.net/?inv=fahbn8).
D
На сайте с 07.11.2000
Offline
228
Dimka
#5
datum:
Тоесть максимальное 675, минимальное 134

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

А при разрешениях экрана больше минимальных, по мере прокрутки страницы - подгружать нормальные.

B
На сайте с 13.02.2008
Offline
262
borisd
#6

datum, как вариант можете загружать картинки джаваскриптом - для разных разрешений разные картинки.

L
На сайте с 10.02.2015
Offline
261
livetv
#7

js

css

html5 <picture>

Hektorsweb
На сайте с 02.11.2008
Offline
118
Hektorsweb
#8

Вот мои 5 копеек, которые, как кажется, топорны, но эффективны. Алгоритм такой:

В любом случае, как минимум при первой загрузке страницы, мы не можем знать ширины экрана. Чтобы не делать лишние запросы к серверу, рекомендую записывать размеры в куки (Или делать параллельный запрос к скрипту, который запишет данные в сессию). Но этот способ подведет, если, к примеру, сначала открыть страницу на 15" а потом поменять монитор на 17". Надеюсь, понятно почему.

На каждой странице должен присутствовать скрипт, который проверяет существование куков с размерами экрана. Если куков нет, то вставляем javascript, который записывает кук. Время жизни куков должно быть до конца сессии. Не дольше.

Если куки есть, то скрипт можем не вставлять (незначительно уменьшаем нагрузку на браузер). Или же каждый раз будет обновляться переменная в куках.

Дальше, после первой загрузки страницы, php проверяет куки и подставляет нужную картинку.

http://php.net/manual/ru/features.cookies.php

http://www.w3schools.com/jS/js_cookies.asp

Наиболее эффективный метод - дозагрузка фото скриптами в процессе. Но он наиболее трудоемкий.

Указывать размеры экрана в GET - верх безумия. Дублей будет = ( КОЛИЧЕСТВО_СТРАНИЦ * ВСЕ_ВОЗМОЖНЫЕ_РАЗМЕРЫ_МОНИТОРОВ )

---------- Добавлено 12.08.2016 в 22:58 ----------

Или же почитайте это https://habrahabr.ru/post/237991/

---------- Добавлено 12.08.2016 в 23:01 ----------

Как пишут тут http://htmlhook.ru/html5-picture-dlya-izobrazhenij.html тэг picture не поддерживается только Safari.

Как вывести разные div PHP | Безопасность | Сброс сессии по изменению

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий