applepeace

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

35 posts in this topic

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

 

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Вот вам ссылка webmark.com.ua/mobile/ вводите адрес своего сайта и там видите как ваш сайт смотрится на разных устройствах, потом делаете скрины и размещаете у себя на сайте.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

@applepeace,

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

Share this post


Link to post
Share on other sites

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

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

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

 

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

applepeace likes this

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@applepeace,

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

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

Share this post


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. И на этом всё. Как дальше быть?

Share this post


Link to post
Share on other sites

 

 


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

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

 


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

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

Share this post


Link to post
Share on other sites

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

 

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

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

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

 

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

 

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

Share this post


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);
?>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

applepeace likes this

Share this post


Link to post
Share on other sites

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

campusboy likes this

Share this post


Link to post
Share on other sites

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

 

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

Share this post


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? Я правильно понимаю??

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@applepeace

<script language="JavaScript">
if (screen.width <= '1024') {
   document.write ('Картинка'); 
}
</script>

Делайте по данному принципу и всё

applepeace likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.