Ответ
WordPress: как сделать вывод превью а-ля PornHub Опции темы
Старый 17.03.2012, 13:20
  #1
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,370

WordPress: как сделать вывод превью а-ля PornHub
В последнее время много желающих сделать вывод превью как у известных 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. В таком случае при загрузке картинок у вас есть большая - которая будет в полной новости, и маленькая, которую можно использовать в превьюшках. Т.е. если учитывать что постер будер размещать до тега <!--more--> только маленький рисунок, а крупноразмерные картинки и текст со ссылками после этого тега, то имеем уже рабочий вариант

<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 в этой же ветке
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 18.03.2012, 11:04
  #2
Bunny
 
Аватар для Bunny
Регистрация: 31.07.2011
Сообщений: 166

Хорошая статья. +1
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 18.03.2012, 11:47
  #3
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,370

Спасибо. Забыл дописать что после всего что вы сделали, надо изменить количество выводимых превью так же меняется в админке (думаю каждый знает где это находится), единственное условие - количество должно быть кратным количеству ячеек в ряду - т.е. если выводим по 4-е картинки в ряд, то количество постов n должно быть кратно 4 (8,12,16...), но не более 35 -штук для лучшей "усваиваемости (с)"
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 31.03.2012, 17:47
  #4
RusOFF
 
Аватар для RusOFF
Регистрация: 28.02.2012
Сообщений: 53

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

P.S. Сохраню в закладки.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 01.04.2012, 11:26
  #5
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,370

Рад что пригодилось. Будут вопросы - задавай
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плагин all in seo pack (wordpress) Гермес Статьи 21 17.06.2012 23:39
Подскажите по галереям в WordPress necelentano Вопросы 4 15.03.2012 13:58
Вывод Paypal в Украине. WAR10CK Финансы 6 26.02.2012 12:41
Обмен и вывод Paypal , Moneybookers ,Alertpay maersk Финансы 1 26.02.2012 12:10
Вывод WebMoney в Беларуси dangerous Финансы 0 05.01.2012 20:17



Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 03:18. Часовой пояс GMT +3.