Короче, то что не надо - можно просто не включать, если оно есть в CMS. Адаптивность - на чём угодно делается. Остаётся добавление записей без админки и ещё забыли чатоподобную систему мгновенного оповещения.
В самом начале того файла, куда передаётся
print_r($_POST);die;
Ну вот через javascript я что-то накидал. Только тогда надо хотя бы для ul присвоить id (у меня сделано ul id='ul1'
<style> .crp_related { clear: both; margin: 10px 0; } .crp_related h3 { margin: 0 !important; } .crp_related ul { list-style: none; float: left; margin: 0 !important; padding: 0 !important; } .crp_related li, .crp_related a { float: left; overflow: hidden; position: relative; text-align: center; } .crp_related li { margin: 5px !important; border: 1px solid #ddd; padding: 6px; } .crp_related li:hover { background: #eee; border-color: #bbb; } .crp_related a { box-shadow: none !important; text-decoration: none !important; height: 125px; width: 180px; } .crp_related a:hover { text-decoration: none; } .crp_related img { position: absolute; top: 0; left: 0; } .crp_related .crp_title { color: #fff !important; position: absolute; bottom: 0; left: 0; padding: 3px; color: #fff; font-size: .9em; text-shadow: 1000 .1em .1em .2em; background: rgb(0.5, 0.5, 0.5); background: rgba(0, 0, 0, 0.5); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .crp_related li:hover .crp_title { background: rgb(0.2, 0.2, 0.2); background: rgba(0, 0, 0, 0.8); } .crp_related li { vertical-align: bottom; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: 0 1px 2px rgba(0,0,0,.4); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .crp_clear { clear: both; } .crp_title:visited { color: #fff !important; } </style> <div class="crp_related "> <h4>Похожие записи:</h4> <ul id='ul1'> <li><a href="http://www.site.ru/post-1/" rel="nofollow" target="_blank"><img src="http://www.site.ru/img/1.jpg" alt="Заголовок 1" title="Заголовок 1"class="crp_thumb crp_correctfirst" id='img1'><div class="crp_title">Заголовок 1</div></a></li> <li><a href="http://www.site.ru/post-2/" rel="nofollow" target="_blank"><img src="http://www.site.ru/img/2.jpg" alt="Заголовок 2" title="Заголовок 2"class="crp_thumb crp_correctfirst"><div class="crp_title">Заголовок 2</div></a></li> <li><a href="http://www.site.ru/post-3/" rel="nofollow" target="_blank"><img src="http://www.site.ru/img/3.jpg" alt="Заголовок 3" title="Заголовок 3"class="crp_thumb crp_correctfirst"><div class="crp_title">Заголовок 3</div></a></li> </ul> <div class="crp_clear"></div> </div> <script> var ul1=document.getElementById('ul1'); var l=ul1.children.length; for(var i=0; i<l; i++){ var a,r,w,h,wmax,hmax; a=ul1.children.firstChild; r=1.44; wmax=180; hmax=125; w=a.firstChild.width; h=a.firstChild.height; if(w/h<r){ a.firstChild.width=wmax; a.firstChild.style.top=hmax/2-a.firstChild.height/2+'px'; a.firstChild.style.offsetTop=a.firstChild.style.top; a.firstChild.style.offsetLeft=0;} else{ a.firstChild.height=hmax; a.firstChild.style.left=wmax/2-a.firstChild.width/2+'px'; } } </script>
Это пока не кроссбраузерно. Прошу прощения, на сегодня у меня работоспособность закончилась.:o
Я боюсь, у нас сейчас получится компот из стилей, в результате чего всё окончательно запутается.
Хоть какая-то система с размерами и ориентацией картинок есть? Подогнать картинки по высоте, чтобы у вертикальных картинок были боковые поля?
Вы сами просили обрезать картинку - см. название темы.
Что значит непохоже? Пользователи не могут постить темы? Пользователи не могут обсуждать темы в комментариях? Или что-то ещё не устраивает? На мой взгляд, не хватает только оповещения, но это допиливается.
Нет, я предлагал, но ТС считает, что ВП слишком сложен для простых пользователей (=членов клуба). Не смогут постить темы, потому что далеки от этого.---------- Добавлено 16.12.2016 в 00:47 ----------
Бесполезно. Кому надо, всё равно увидят. Разве что от глупых роботов спрячете.
Прижаты - это в стилях (изменить то, что было вначале)
.crp_related li { margin: 5px !important; border: 1px solid #ddd; padding: 6px;}
Уменьшить высоту рамки - это 100px здесь
.crp_related a { box-shadow: none !important; text-decoration: none !important; height: 100px;}