WordPress: как сделать вывод превью а-ля PornHub

**Матрос** · 17.03.2012, 13:20

В последнее время много желающих сделать вывод превью как у известных Tube ресурсов - YouPorn, PornHub...

При поиске в инете большинство посылает учить CSS, а мы рассмотрим этот момент детально. Почему я выбрал WordPress для примера - потому что он наиболее удобен для начинающего уровня. Принцип такого построения остается и для DLE и для MODx и для просто го php кода. Итак приступим.
Если вы уже делали шаблон под WP, то должны знать что вывод новостей выводится в цикле


<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
        <div id="post">
<!--сам пост-->
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php the_content(); ?>
</div>
<!--/сам пост-->
    <?php endwhile; ?>
    <?php endif; ?>

Шаблоны могут меняться, но это кусок должен быть обязательно.
в данном случае вывод будет работать так:

Т.е. Default-ный вывод. Хорошо, посты выводятся, теперь можно делать вывод по нашей схеме.
Для начала опишу принцип - для начала встраиваем вывод в таблицу, чтоб получить посты в ряд

После чего мы вводим дополнительную переменную (например $coun), и с каждым выводом будем увеличивать ее на одну. При величине счетчика например 4 (сколько новостей будет идти в ряд), переводим таблицу на новую строку.

Вот в принципе и все. Теперь рассмотрим детальнее

1) Встраиваем вывод в таблицу. Для этого делаем следующую структуру

<table width="100%" border="0" cellspacing="2" cellpadding="2">
              <tr>
<?php if(have_posts()) : $count=0; ?><?php while(have_posts()) : the_post(); $count++; ?>
        <td width="25%"><div id="post">
<!--сам пост-->
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php the_content(); ?>
</div>
<!--/сам пост--></td>
    <?php endwhile; ?>
    <?php endif; ?>
              </tr>
</table>

т.е. одеваем первый код в таблицу - в начале открываем тег таблицы и строки, а в концуце закрываем их

<table width="100%" border="0" cellspacing="2" cellpadding="2">
              <tr>

              </tr>
</table>

сам поста "одеваем" в тег ячейки

<td width="25%">
<!--сам пост-->
.......
<!--/сам пост-->
</td>

И вводим счетчик выведенных постов


<?php if(have_posts()) : $count=0; ?><?php while(have_posts()) : the_post(); $count++; ?>

Готов первый этап.

Теперь надо сделать перевод на новыя рядок после 4-х постов (заметьте соответствие - если 4-е поста, то ширина ячейки 25%, если 3, то 33% если две, то 50%)

<td width="25%">
<!--сам пост-->
.......

Вернемся к переводу для этого надо сделать проверку - если количество выведенных постов кратна 4-м, то делать с нового рядка.
Пишем после </td>


if($count%4==0)
{
print"</tr><tr>";
}

В результате на данном этапе должен выйти такой код

<table width="100%" border="0" cellspacing="2" cellpadding="2">
              <tr>
<?php if(have_posts()) : $count=0; ?><?php while(have_posts()) : the_post(); $count++; ?>
        <td width="25%"><div id="post">
<!--сам пост-->
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php the_content(); ?>
</div>
<!--/сам пост--></td>
<?php
if($count%4==0)
{
print"</tr><tr>";
} endwhile; ?>
    <?php endif; ?>
              </tr>
</table>

Теперь надо отделить вывод превьюшек от просмотра полной новости. Для этого используем проверку


if($more !=1)
{
//значит мы не в полной новости
}

и вводим это у словие на перевод строки

<!--/сам пост--></td>
<?php
if(($more !=1) and ($count%4==0))
{

print"</tr><tr>";
} endwhile; ?>
    <?php endif; ?>
              </tr>
</table>

Готово - мы имеем вывод как на третьем рисунке.

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

<table width="100%" border="0" cellspacing="2" cellpadding="2">
              <tr>
<?php if(have_posts()) : $count=0; ?><?php while(have_posts()) : the_post(); $count++; ?>
        <td width="25%"><div id="post">
<!--сам пост-->
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php the_content(); ?>
</div>
<!--/сам пост--></td>
<?php
if(($more !=1) and ($count%4==0))
{
print"</tr><tr>";
} endwhile; ?>
    <?php endif; ?>
              </tr>
</table>

Но что делать если картинки хостятся на imageхостинге? и постер получает на руки только один большой рисунок? грузить большую и маленькую картинку на imageхостинг? - БРЕД скажет любой. В таком случае тоже можно обойтись малой кровью - CSS (в нормальном случае надо писать функцию ресайза картинки на лету, но это другой уровень, а я хочу показать что вывод тумбами может сделать и начинающий).

Итак что же делать? Для начала определить ширину и высоту (!) маленькой картинки в среднем. Зачем высоту? - а мы же хотим чтоб вывод был красивым, причем картинки одинакового размера есть не у всех. Деформации картинки не будет, просто мы ограничим зону видимости ее.

Для начала надо ввести размер картинки по ширине, для этого пишем в коде в между тегами <head> </head>

<style>
#post img
{
width:200px; //эту величину вы выбираете для себя сами
} 
</style>

Смотрим - теперь все картинки в превью стали маленькими - хорошо

, но одни выше, другие ниже. Для этого делаем следующее - выбираем нимимальную высоту (пусть будет 100px) и дописываем в стилях

#post
{
width:200px;
height:100px;
overflow:hidden
}

т.е. теперь весь наш пост будет иметь высоту 100 пикселей, ширину 200 пикселей и все что выход за переделы будет невидимо

Итого структура стилей такая

<style>

#post
{ width:200px;height:100px;overflow:hidden } 

#post img
{ width:200px; } 

</style>

НУ вроде все, красиво. Заходим в полную новость и

, там тоже маленькая картинка. Не переживаем - все дело в стилях. Поэтому надо не использовать этот стиль в полной новости и все. Вспоминаем о проверке на полную новость


if($more !=1)
{
//значит мы не в полной новости
}

И делаем такие изменения в коде

вместо

        <td width="25%"><div id="post">
<!--сам пост-->

пишем

        <td width="25%">
<?php 
if($more !=1)
{
print"<div id="post">
}
else
{
print"<div id="full_post">
}
 ?>
<!--сам пост-->

а стиль full_post уже делаем какой хотим. Сохраняем и наслаждаемся красивым выводом.

Ну вроде бы все. Ах, да вспомнил - полный код для второго варианта (когда картинки хостятся не у вас)

<style>

#post
{ width:200px;height:100px;overflow:hidden } 

#post img
{ width:200px; } 

</style>


<table width="100%" border="0" cellspacing="2" cellpadding="2">
              <tr>
<?php if(have_posts()) : $count=0; ?><?php while(have_posts()) : the_post(); $count++; ?>
        <td width="25%">
<?php 
if($more !=1)
{
print"<div id="post">
}
else
{
print"<div id="full_post">
}
 ?>
<!--сам пост-->
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php the_content(); ?>
</div>
<!--/сам пост--></td>
<?php
if(($more !=1) and ($count%4==0))
{
print"</tr><tr>";
} endwhile; ?>
    <?php endif; ?>
              </tr>
</table>

Вот теперь все.

Если есть вопросы - задаем, не стесняемся.

P.S. Данная тема - это ответ на многочисленные вопросы - как сделать вывод тумбами. На пальцах объяснять долго, а тут все разжевано уже. Если не понятны какие-то конструкции - задавайте вопросы или смотрите в теме Учим php в этой же ветке

**Bunny** · 18.03.2012, 11:04

Хорошая статья. +1

**Матрос** · 18.03.2012, 11:47

Спасибо. Забыл дописать что после всего что вы сделали, надо изменить количество выводимых превью так же меняется в админке (думаю каждый знает где это находится), единственное условие - количество должно быть кратным количеству ячеек в ряду - т.е. если выводим по 4-е картинки в ряд, то количество постов n должно быть кратно 4 (8,12,16...), но не более 35 -штук для лучшей "усваиваемости (с)"

**RusOFF** · 31.03.2012, 17:47

Спасибо, действительно, очень полезная статья. Когда-то я искал шаблон под видеоблог для Вордпрес, находил, но не те, чего-то не хватало постоянно, да и не шарю особо, чтобы что-то в коде добавить

В следующий раз, когда опять задумаю видеоблог, вникаю в эту статью. +1

P.S. Сохраню в закладки.

**Матрос** · 01.04.2012, 11:26

Рад что пригодилось. Будут вопросы - задавай