Для реализации нам понадобится jQuery, поэтому если еще не подключили - подключаем.
Чтобы код работал только на тех страницах где это необходимо не забываем пользоваться условными операторами при добавлении.
Условие !important в CSS добавлено чтобы новые свойство использовались в первую очередь и не конфликтовали с уже имеющимися для обрабатываемых блоков.
Само расположение постов и появление добавочных элементов можно организовать средствами только CSS.Условие !important в CSS добавлено чтобы новые свойство использовались в первую очередь и не конфликтовали с уже имеющимися для обрабатываемых блоков.
.column-center-outer {
width: 100%!important;
float: none!important;
}
.column-right-outer,
.column-left-outer,
.fauxcolumn-right-outer,
.fauxcolumn-left-outer,
.jump-link,
.item-control {
display: none!important;
}
.main-inner .columns {
padding-right: 0 !important;
}
.main-outer {
padding: 0 25px!important;
}
.date-posts,
.column-right-outer,
.column-left-outer,
.post-body,
h3.post-title a,
.date-header span {
padding: 0!important;
margin: 0!important;
}
.date-header,
h3.post-title,
.post-body::before,
span.post-comment-link,
span.post-labels {
padding: 0!important;
margin: 0!important;
position: absolute!important;
}
.date-outer {
position: relative!important;
overflow: hidden!important;
margin-bottom: 1em!important;
height: 450px!important; /* высота всего блока ячейки */
width: 47%!important; /* если три колонки 31%, если две - 45%-47% */
float: left!important;
margin: 0 1.5%!important;
}
.date-header,
h3.post-title {
z-index: 999!important;
width: 100%!important;
}
span.post-comment-link,
span.post-labels {
display: block!important;
float: right!important;
background:none!important;
color: #FFF!important;
border: none!important;
font: normal normal 120% Tahoma!important;;
text-align: right!important;
width: auto!important;
top: 320px!important;
opacity: 0!important;
z-index: 1000!important;
}
span.post-comment-link {
padding: 10px 0 0 3px!important;
}
span.post-labels {
padding: 10px 0 0 20px!important;
}
.post-labels a {
background: none !important;
border: none!important;
color: #FFF!important;
font-size: 14px;
padding: 2px!important;
margin: 0;
}
.post-body {
height: 350px!important; /* высота тела ячейки - картинка */
visibility: hidden!important;
overflow: hidden!important;
}
/* если нет картинки */
.post-body::before {
content: '';
display: block!important;
top: 0!important;
left: 0!important;
background: url('/images/Cake2.jpg') center center no-repeat;/*ССЫЛКУ НА КАРТИНКУ ЗАМЕНИТЕ НА СВОЮ*/
height: 100%!important;
width: 100%!important;
visibility: visible!important;
z-index: 997!important;
}
.post-body img {
visibility: hidden!important;
}
h3.post-title {
top: 370px!important;
left: 0!important;
text-align: left!important;
font: normal normal 1.5em Tahoma, sans-serif!important;
}
h3.post-title a {
display: block!important;
color: #000!important;
height: 150px!important;
}
.date-header {
top: 320px!important;
background: #00CED1!important;
text-align: right!important;
margin: 0: 100px!important;
opacity: 0!important;
max-height: 100px!important;
}
.date-header span {
color: #FFF!important;
background: none!important;
font: normal normal 1em/50px Tahoma!important;
}
.date-outer:hover > .date-header,
.date-outer:hover > .post-comment-link,
.date-outer:hover .post-labels {
opacity: .7!important;
}
.imgBox {
position: relative;
background-repeat:no-repeat;
background-position: center center;
background-size: 100%;
visibility: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 998;
}
.imgBox a {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#blog-pager {
clear: both!important;
}
width: 100%!important;
float: none!important;
}
.column-right-outer,
.column-left-outer,
.fauxcolumn-right-outer,
.fauxcolumn-left-outer,
.jump-link,
.item-control {
display: none!important;
}
.main-inner .columns {
padding-right: 0 !important;
}
.main-outer {
padding: 0 25px!important;
}
.date-posts,
.column-right-outer,
.column-left-outer,
.post-body,
h3.post-title a,
.date-header span {
padding: 0!important;
margin: 0!important;
}
.date-header,
h3.post-title,
.post-body::before,
span.post-comment-link,
span.post-labels {
padding: 0!important;
margin: 0!important;
position: absolute!important;
}
.date-outer {
position: relative!important;
overflow: hidden!important;
margin-bottom: 1em!important;
height: 450px!important; /* высота всего блока ячейки */
width: 47%!important; /* если три колонки 31%, если две - 45%-47% */
float: left!important;
margin: 0 1.5%!important;
}
.date-header,
h3.post-title {
z-index: 999!important;
width: 100%!important;
}
span.post-comment-link,
span.post-labels {
display: block!important;
float: right!important;
background:none!important;
color: #FFF!important;
border: none!important;
font: normal normal 120% Tahoma!important;;
text-align: right!important;
width: auto!important;
top: 320px!important;
opacity: 0!important;
z-index: 1000!important;
}
span.post-comment-link {
padding: 10px 0 0 3px!important;
}
span.post-labels {
padding: 10px 0 0 20px!important;
}
.post-labels a {
background: none !important;
border: none!important;
color: #FFF!important;
font-size: 14px;
padding: 2px!important;
margin: 0;
}
.post-body {
height: 350px!important; /* высота тела ячейки - картинка */
visibility: hidden!important;
overflow: hidden!important;
}
/* если нет картинки */
.post-body::before {
content: '';
display: block!important;
top: 0!important;
left: 0!important;
background: url('/images/Cake2.jpg') center center no-repeat;/*ССЫЛКУ НА КАРТИНКУ ЗАМЕНИТЕ НА СВОЮ*/
height: 100%!important;
width: 100%!important;
visibility: visible!important;
z-index: 997!important;
}
.post-body img {
visibility: hidden!important;
}
h3.post-title {
top: 370px!important;
left: 0!important;
text-align: left!important;
font: normal normal 1.5em Tahoma, sans-serif!important;
}
h3.post-title a {
display: block!important;
color: #000!important;
height: 150px!important;
}
.date-header {
top: 320px!important;
background: #00CED1!important;
text-align: right!important;
margin: 0: 100px!important;
opacity: 0!important;
max-height: 100px!important;
}
.date-header span {
color: #FFF!important;
background: none!important;
font: normal normal 1em/50px Tahoma!important;
}
.date-outer:hover > .date-header,
.date-outer:hover > .post-comment-link,
.date-outer:hover .post-labels {
opacity: .7!important;
}
.imgBox {
position: relative;
background-repeat:no-repeat;
background-position: center center;
background-size: 100%;
visibility: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 998;
}
.imgBox a {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#blog-pager {
clear: both!important;
}
Далее добавляем скрипт, который будет делать основную работу.
//<![CDATA[
$(function(){
$('.post').each(function(){
var postLink = $(this).find('.post-title a').attr('href'),
postBody = $(this).find('.post-body'),
imgSrc = postBody.find('img:first').attr('src');
postBody.find('img').remove();
postBody
.prepend("<div class='imgBox'><a href="+postLink+"></a></div>")
.children('.imgBox')
.css('background-image', 'url('+imgSrc+')');
});
});
//]]>
Скрипт не большой, т.к. логика его проста как дважды-два: $(function(){
$('.post').each(function(){
var postLink = $(this).find('.post-title a').attr('href'),
postBody = $(this).find('.post-body'),
imgSrc = postBody.find('img:first').attr('src');
postBody.find('img').remove();
postBody
.prepend("<div class='imgBox'><a href="+postLink+"></a></div>")
.children('.imgBox')
.css('background-image', 'url('+imgSrc+')');
});
});
//]]>
- во всех постах скрипт находит и запоминает - ссылку на соответствующие сообщение и ссылку на первое изображение, в случае, если в сообщении нет картинки, в дело вступает CSS и покажет то, что мы указали для псевдоэлемента ::before. Далее удаляет имеющиеся картинки из постов, создает дополнительный блок с ссылкой и фоном из первого изображения соответствующего поста.
На рабочем сайте результат выглядит так:
Вот и все. Тестируем и делимся впечатлениями как и всегда в комментариях. Если будут возникать дополнительные потребности, буду дописывать чего не хватает.
P.S. Для любителей "только CSS". Если у кого получится реализовать без скрипта, поделитесь вариантом, у меня пока что ступор с универсальным методом изъятия первой картинки если она в дополнительной обертке.
©http://magentawave.com
Спасибо большое за урок! Было очень интересно и полезно. Но как по мне эти плитки больше актуальны для блогов фотографов.
ОтветитьУдалитьВ любом случае спасибо вам! =)
Да, для фотоблогов сетка постов более актуальна, да и для видео тоже. Но мало ли, может кому и так захочется.
УдалитьПодскажите пожалуйста код, чтобы сетка была только на главной странице.
ОтветитьУдалитьС уважением, Юлия Н. nextyale@mail.ru
Вам сюда:
Удалитьhttp://www.magentawave.com/2012/10/most-popular-conditions-tags.html
http://www.magentawave.com/2012/10/hide-elements-from-some-pages.html
Александр, у меня ваш код не заработал... наверное я что-то не так сделал... может поможете разобраться?
ОтветитьУдалитьПример предназначен для стандартных, не динамических шаблонов. Если шаблон самописный или скаченный с другого сервиса, то в 99,9% случаев в представленном коде необходимо указывать иные, селекторы. которые обозначены в этом шаблоне.
УдалитьУ меня тоже некорректно отображается
УдалитьПоказывайте пример, где не работает.
УдалитьА можно такое проделать не с главной страницей, а с отдельным виджетом (расположенном под статьями блога), который будет выводить статьи с заданной меткой? Если да, то, может, подскажите как?
ОтветитьУдалитьКонечно можно оформить ваш виджет в виде сетки, как это сделать не подскажу, как минимум до момента просмотра виджета. Если его нужно делать, то совершенно другой вопрос.
УдалитьВот под постом у меня установлен виджет "Что ещё почитать...", выводящий посты с определённой меткой (код имеется).
УдалитьПример: www.veganboom.ee/2013/11/vegan-questions.html
Но выглядит он не очень солидно. Хотелось бы, чтобы фотографии стали большего размера: в виде такой сетки, как в вашем посте или, например, просто в ряд, но более красивого вида (как на этой странице: http://proba-roba.blogspot.com/search)
Все это вполне решаемые вопросы, особых проблем с этим нет.
УдалитьЗдравствуйте,Александр! Ваш блог изменился,а мне так нравилась просто завораживающая шапка!
ОтветитьУдалитьЗдравствуйте. Долго не решался на изменения дизайна, да и времени не было, теперь вот дошли руки :) Да, прежняя шапка была хороша, но в этом дизайне я еще не решил как ее оформить по эффектнее, но что-нибудь обязательно придумаю.
Удалить