Jump to content

Миниатюры для разных устройств


Recommended Posts

Доброго времени суток! Хочу сделать вывод миниатюр на главной странице сайта с разным разрешением (весом) для разных разрешений экрана. Сайт адаптирован под мобильные устройства и около половины трафика идёт именно с моб. устройств. Так вот, миниатюры для моб. устройств выводятся в полном разрешении. Хочу сделать, чтобы для смартфонов ширина миниатюры была, например, 300 пикселей, на планшетах и компьютере 500 пикселей. Я так понимаю, нужно хранить разные разрешения миниатюр на сервере. Подскажите как можно это осуществить.

 

Вывод миниатюр в content.php сейчас осуществляется такой командой:

<?php the_post_thumbnail('post-thumbnail'); ?>

P. S. Стоит WordPress, заранее спасибо.

Link to post
Share on other sites

Есть вопрос? Задай его профессиональным веб-мастерам, SEO и другим специалистам!

  • VIP

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

Link to post
Share on other sites

Можно сделать просто, размер картинки прописывать в процентах, в img написать стиль style="width:30%" тогда с уменьшением разрешения экрана и картинка будет уменьшаться. Натуральный размер картинки можно открывать в отдельном окне. Тогда понадобится всего одна большая картинка.

Link to post
Share on other sites
  • VIP

В настройках плагина Hyper Cache есть вкладка "мобильный", в которой указывается выводимая тема по запросу от мобильных устройств. То есть для мобильных устройств можете использовать либо совсем другую тему, либо модернизированную, но в другой папке.

Link to post
Share on other sites

Можно сделать просто, размер картинки прописывать в процентах, в img написать стиль style="width:30%" тогда с уменьшением разрешения экрана и картинка будет уменьшаться. Натуральный размер картинки можно открывать в отдельном окне. Тогда понадобится всего одна большая картинка.

Почти все меня неправильно поняли. Width НЕ меняет ВЕС изображения, а только меняет его размер. На всех устройствах загружается ПОЛНАЯ (т. е. оригинальная) картинка. А мне нужно создание трёх миниатюр для компа, планшета и смартфона отдельно, ну и вывод этих миниатюр в зависимости от "аппарата" зашедшего посетителя. Такие пироги :)

Link to post
Share on other sites
  • VIP

@applepeace,

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

Link to post
Share on other sites

@applepeace, Ну а в чём проблема? WP сам делает 4 изображения + можно сделать свой размер (через function).

<?php the_post_thumbnail( $size, $attr ); ?>

$size - Размер миниатюры, которую нужно получить. Может быть строкой: thumbnailmediumlarge,full или массивом из двух элементов (ширина и высота картинки): array(32, 32).

 

Вам нужно через PHP узнать размер экрана пользователя  и уже там выводит миниатюру.

Link to post
Share on other sites
  • VIP

@WQP правильно подсказал решение проблемы. Настройка - Медиафайлы. Тут вы можете указать 3 размера, я думаю, что этого достаточно. При загрузке картинки WP сам их пропорционально сохранит в 4 файла (три установки + оригинал). А затем, как сказал @WQP определять расширение устройства и переменной подставлять в 

<?php the_post_thumbnail( $size, $attr ); ?>

Я не программист, но вроде как PHP не умеет такого делать (определение расширения экрана), только JS. Я скорее всего ошибаюсь.

Link to post
Share on other sites

@campusboy, конкретно разрешение узнать нельзя, но можно узнать при помощи того же браузера (user agent). ну или через jq узнать и вывести в переменную. Способов огромное количество, но нужно выбрать тот который подходит именно для ТС'а

Link to post
Share on other sites

@applepeace,

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

Сам шаблон адаптирован, подстраивает количество блоков в зависимости от ширины экрана.

Link to post
Share on other sites

@applepeace, Ну а в чём проблема? WP сам делает 4 изображения + можно сделать свой размер (через function).

 

<?php the_post_thumbnail( $size, $attr ); ?>
$size - Размер миниатюры, которую нужно получить. Может быть строкой: thumbnailmediumlarge,full или массивом из двух элементов (ширина и высота картинки): array(32, 32).

 

Вам нужно через PHP узнать размер экрана пользователя  и уже там выводит миниатюру.

Вот сегодня пробовал, получил разрешение экрана с помощью JavaScript. И на этом всё. Как дальше быть?

Link to post
Share on other sites
  • VIP

 

 


конкретно разрешение узнать нельзя, но можно узнать при помощи того же браузера (user agent)

Я считаю, что по user agent лучше не делать. Лучше, чтобы JS определял. К примеру, как гугл узнает, что сайт мобайлфрендли? Скорее всего "просматривает" сайт с имитацией расширения мобильника/планшета.

 


Вот сегодня пробовал, получил разрешение экрана с помощью JavaScript. И на этом всё. Как дальше быть?

Поищите в ПС темы, как переменную из JS передать в PHP, а затем с помощью условия IF, ELSE (или CASE) подставлять в the_post_thumbnail.

Link to post
Share on other sites
  • VIP

Если шаблон все же адаптивный и как было обозначено в первом сообщении что:

 

Вывод миниатюр в content.php сейчас осуществляется такой командой:

  1. <?php the_post_thumbnail('post-thumbnail'); ?>

Тогда надо команду вывести примерно такого плана:

 

<?php the_post_thumbnail( 'post-thumbnail', array( 'class' => 'img-responsive' ) ); ?>

 

Но для изображений искать что прописано в css.

Link to post
Share on other sites
  • VIP

Как-то так:

<php
$image_raw = $var; // $var значение ширины экрана в пикселях, которую дает JS скрипт
if ($image_raw > 1600) {$size = full;}
if ($image_raw > 1200 and $image_raw < 1600) {$size = large;}
if ($image_raw > 600 and $image_raw < 1200) {$size = medium;}
if ($image_raw < 600) {$size = thumbnail;}
else {$size = full;} //если не смог скрипт определить размер
the_post_thumbnail($size);
?>
Link to post
Share on other sites
  • VIP

, к сожалению, чтобы вы не указали в CSS, картинка как была, к примеру, 500кб, то такого размера и загрузиться, только что на экране будет отображаться соотвествующе, независимо, какое устройство запрашивает страницу с этой картинкой. А ТС надо, чтобы сайт понимал, что страницу запрашивает мобильное устройство и отдавал уменьшенную картинку, а значит и размером небольшим (допустим 30кб), так как лучшего качества и не надо. 

Link to post
Share on other sites
  • VIP

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

Link to post
Share on other sites
  • VIP

,или я или Вы не понимаете, что такое адаптивный дизайн. Определение википедии.  Считаю, что адаптивный дизайн лишь позволяет корректно отображать веб-страницу на любом устройстве. Но в его задачи не входит подобная обработка, которая требуется ТС. Другими словами, адаптивный дизайн формирует CSS и отчасти JS. Здесь же они не помогут уменьшить вес картинки.

Link to post
Share on other sites
  • VIP

@campusboy, вот именно что не понимаете. Есть понятие адаптивного дизайна, о котором вы мне и поясняете, а есть адаптивный шаблон о котором я пытаюсь сказать. Если именно шаблон, то важны только настройки и ничего более. 

Link to post
Share on other sites

@campusboy, вот именно что не понимаете. Есть понятие адаптивного дизайна, о котором вы мне и поясняете, а есть адаптивный шаблон о котором я пытаюсь сказать. Если именно шаблон, то важны только настройки и ничего более.

 

Нет, шаблон то адаптивный, но как сказал campusboy, это не значит, что в него встроена фича "подгона" нужного разрешения картинки. Придется в рукопашную писать на JS (получение разрешение) и передавать в PHP, а там уже обрабатывать.

Link to post
Share on other sites

Как-то так:

 

<php
$image_raw = $var; // $var значение ширины экрана в пикселях, которую дает JS скрипт
if ($image_raw > 1600) {$size = full;}
if ($image_raw > 1200 and $image_raw < 1600) {$size = large;}
if ($image_raw > 600 and $image_raw < 1200) {$size = medium;}
if ($image_raw < 600) {$size = thumbnail;}
else {$size = full;} //если не смог скрипт определить размер
the_post_thumbnail($size);
?>

Да, спасибо. Это я и думал. Осталось понять как передать из JS в PHP переменную с разрешением экрана. Чтобы без перезагрузки страницы, я так понимаю нужен AJAX. Получение разрешения экрана мне нужно тогда в шапке (header.php) сайта писать? И с этой же шапки передавать в content.php? Я правильно понимаю??

Link to post
Share on other sites

А вообще я нашел в интернете такую штуковину, называется она PictureFill (аналог тега <picture>, который скоро приедет в HTML5) подключаем библиотеку, создаем шорткод, а потом уже пихаем его куда нужно. Но установить эту штуку у меня не получилось. Да и зачем, если 3 миниатюры и так сами создаются по умолчанию в WordPress (small, medium, large).

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...