Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

[РЕШЕНО] Вывод картинки-превью до тайтла

требуется помощь специалистов по WP
Захожу иногда
alexmoon
Сообщений: 49
1390 дней назад
Коллеги, вынес свой вопрос в отдельный пост, думаю многим будет интересно.

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


Насколько я смог разобраться, ситуация выглядит так:

Порядок вывода элементов определяется в файле: library/wrappers.php в функции theme_post_wrapper на строках 13-46
Картинку выводит функция <?php echo $thumbnail; ?>
Сам код картинки определяется в файле functions.php в функции theme_get_post_thumbnail на строках 360-390

Размеры картинки, которые указаны в админке подставляются через theme_get_option('theme_metadata_thumbnail_width') и theme_get_option('theme_metadata_thumbnail_height')

Сама картинка формируется на строке 382:
Код PHP:
  1. $result = '<img src="' . $img[0] . '" alt="" width="' . theme_get_option('theme_metadata_thumbnail_width') . '" title="' . $title . '" class="wp-post-image" />';
Код картинки на строке 387.

Подскажите пожалуйста, где и что нужно теперь поменять? :)
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 924
1 день назад
alexmoon:
Итак задача: каким образом настроить на готовом шаблоне вывод превью картинок до заголовка постов например на главной странице (используется блоговая структура). Нужно для сохранения пропорций постов например в ряд, т.к. если тайтл в одном из них длиннее, он переносится на следующую строку, а за ним и картинка.

Немного не понятна задача. Что нужно, что бы при любой длине заголовка сохранялась высота?
Возможно простой вариант, заключить в див заголовок и прописать min-height то же самое можно прописать и для любого блока, Возможно даже в див заключать не обязательно, если он индивидуальный.
Второй вариант, наверно не подойдет, но все же... обрезать заголовки с помощью truncate
Захожу иногда
alexmoon
Сообщений: 49
1390 дней назад
Задача именно поменять местами стандартный генерируемый вид вывода превью для ВП после Артистира с:
Заголовок
Картинка
текст поста

на:
Картинка
Заголовок
текст поста
(как на скрине в первом посте)

Увеличить (придать минимальную высоту) размер поля через min-height для строки art-postheader не получается почему-то, кстати. Может я не там правлю. Но, задача в общем-то не в этом, хотя такой вариант тоже интересен.

Обрезать вывод заголовка - не вариант, хотя очень соблазнительно. Всё же лучше верстку подправить ;)

Upd: скрины добавил как требуется. На втором скрине получилось что есть промежуток между тайтлами и самим телом постов, можно и без него, главное смысл. Согласитесь, так намного лучше выглядит, все картинки (даже не подобранные по размеру) визуально в ряд. Я кстати не зная как в других cms шаблон себя ведет, но на WP хочу подправить. Какие будут мнение, господа: как поменять местами тайтл и картинку-превьюшку?
Как было и как не получилось сменить высоту для тайтла:


И Как необходимо сделать:
Редактировалось: 1 раз (Последний: 27 июля 2013 в 18:48)
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 924
1 день назад
alexmoon, Понятно. Вы хотите поменять в коде вывод местами... Но в этом случае я думаю поменяется сам шаблон вывода постов, то есть в других местах тоже. Может все таки пытаться решить без ковыряний кода?
Например, информация в этих блоках статичная? или динамичная?, а то может проще вывести все таблицей?. Понятно, что это не есть хорошо, но... вариант.

Возможно кто подскажет варианты лучше, или как допилить код...
Захожу иногда
alexmoon
Сообщений: 49
1390 дней назад
samson, да, нужно поменять местами и именно кодом. В первом посте я написал - где нашел вывод этих превьюшек, но вот как и на что поменять.
Изменится по всему сайту, тут Вы правы. Мало того, изменится не только на главной, но и на той же странице категорий, ведь для всего дизайна сайта используется по-сути одна и та же страница, в которой и вносятся изменения.

Есть второй вариант - присвоить Id для конкретных областей, в которых надо поменять вывод картинок, и менять только для них, как например здесь:
Скрытый текст виден только зарегистрированным пользователям

Т.е. в одном блоке - так, в другом обтекание текстом слева, например...
Но для меня это уже слишком сложная задача на данном этапе :)
Постоянный участник
sagus85
Медаль
Сообщений: 287
3 дня назад
alexmoon, попробуйте в library/wrappers.php поменять:

строка примерно 51: вырезать:
Код PHP:
  1.  
  2. <?php echo $thumbnail; ?>
  3.  
и вставить после строки примерно 44:
Код PHP:
  1.  
  2. <div class="art-comments" id="comments">
  3.  
Далее строка примерно 43, вырезать:
Код PHP:
  1.  
  2. <?php echo $thumbnail; ?>
  3.  
и вставить её примерно 35 после:
Код PHP:
  1.  
  2. <article<?php echo $id; ?> class="art-post art-article <?php echo $class; ?>">
  3.  
На вскидку без проверки.

alexmoon:
Есть второй вариант - присвоить Id для конкретных областей, в которых надо поменять вывод картинок, и менять только для

Этот вариант далеко не простой...
Захожу иногда
alexmoon
Сообщений: 49
1390 дней назад
Значит, что получилось.
Вывести картинки технически правильно удалось, немного перелопатив код в wrapper.php и в functions.php, в style.css задать условия вывода нового дива. Кроме того, удалось убрать косяк от Артистира, когда превьюшка формировалась квадратом пропорционально, теперь строго по задаваемым размерам в options шаблона.
Итак скрин из морды:


Теперь следующий вопрос, о чем сразу и говорили: каким макаром вывести для категорий иное отображение картинки, допустим чтобы на странице категории она сдвигалась влево, а не по центру. Что и где задать?
Пока выглядит так ))) :


Какие будут предложения, коллеги?
Постоянный участник
sagus85
Медаль
Сообщений: 287
3 дня назад
Данных побольше дайте, а то по картинке как то не айс. glasses
Может здесь достаточно CSS будет поправить, для img в лево, а текст заставить обтекать scratch
Скрытый текст виден только зарегистрированным пользователям
Редактировалось: 1 раз (Последний: 28 июля 2013 в 22:35)
Захожу иногда
alexmoon
Сообщений: 49
1390 дней назад
sagus85, по приведенной Вами ссылке - идет обсуждение обтекания (float), мне же было необходимо поменять условия вывода самих элементов.
sagus85:
Данных побольше дайте, а то по картинке как то не айс.
Уточню проблему: после введенных изменений и прописывания вывода превью в отдельном диве со своими свойствами в CSS, эти изменения коснулись всех страниц сайта, и если на главной мы получили требуемый вид превьюшек под нарезанные блоки вывода контента, то на остальных страницах получили такой же результат.
Задача: каким образом изменить этот стиль(!) отображения превьюшек (заданный порядок определяется в файлах wrappers.php и functions.php, стиль в общем файле .css темы) для страниц категорий и архивов в WP. Стиль-то не проблема оформить, но он меняется для всех страниц ;)

Пока легкого решения, кроме как создания отдельного дизайна для категорий - не вижу.
Постоянный участник
artnikov
Медаль За активное участие в жизни сайта.
Сообщений: 479
29 дней назад
alexmoon:
Уточню проблему: после введенных изменений и прописывания вывода превью в отдельном диве со своими свойствами в CSS, эти изменения коснулись всех страниц сайта,
Доброго дня, многоуважаемый. Как то, если честно ВЫ не с того начали. Проясню ситуацию- с такими копаниями и перепилами кода php вы всего лишь увеличите нагрузку на сервер. Мне кажется НЕ совсем логично для Wordpress ставить выделенный сервер !??? ИЛИ я не прав? Сама тема, которая генерируется в Artisteer , с четвертой версии ОЧЕНЬ перегружена, практически на 50% приходится облегчать функциональность(переписывая код), а ВЫ наоборот хотите расширить ЕЩЕ возможности... Простых, но логичных выхода, в вашем случае ДВА -
1. Не использовать WP для сайта.- (это скорее не способ а возможность или ее отсутствие)
2. Если все таки очень хочется, то - для каждого "нововведения" в теме прописывать CSS и верстать div.
3. Использовать плагины (галереи)
Другого, простите никто пока НЕ придумал. Просто задача настолько легко решаема вторым пунктом, что ни кто не правит настолько функциональность самой темы. В более нагруженных проектах лучше писать сайт на php - БЕЗ движков... И соответственно "овчинка не стоит выделки". Наверное как то так?! sad
alexmoon:
Задача: каким образом изменить этот стиль(!) отображения превьюшек (заданный порядок определяется в файлах wrappers.php и functions.php, стиль в общем файле .css темы) для страниц категорий и архивов в WP. Стиль-то не проблема оформить, но он меняется для всех страниц ;)
И не стоит копаться в файле wrappers.php? в противном случае придется переписывать ВЕСЬ шаблон...
alexmoon:
Вывести картинки технически правильно удалось, немного перелопатив код в wrapper.php и в functions.php, в style.css задать условия вывода нового дива.
- это ВЫ перебрали... Если сайт ВЫ не будете поддерживать, то тема слетит при первом же обновлении движка, уже много говорилось ранее, о том, что не надо смешивать все в одном флаконе...
Если ВЫ обратите внимание на "другие сайты", то заметите, что изображения миниатюры всегда идут с одинаковыми значениями высота х ширина. Стоит наверное для миниатюр выставить "жесткие" значения просто через css???, тогда многие вопросы отпадут...И далее, правьте css... и изменяйте functions.php очень аккуратно...
А это на последок, если конечно дочитаете...Для главной страницы, сформируйте отдельные css и пропишите div-ами и в крайнем случае <p style...>( и то, только для отцентровки или присвойте p класс) , да необходимо умудриться, что б в дальнейшем этот стиль иногда использовать, для оформления последующих страниц. И не старайтесь впихнуть стили css, для конкретной страницы (код WP будет не валиден), в том вся и задача ухитриться все сделать и на будущее и для настоящего...
Вот простой пример:(Движок роли вообще НЕ играет)
Код css:
.onset-left{
width:50%;
clear:left;
float:left;
margin:5px 0 10px 0;
}
.onset-right{
width:50%;
float:right;
clear:right;
margin:5px 0 10px 0;
}
.onset-left img, .onset-right img{
float:left;
display:block;
}
p.onset{
float:right;
padding:3px 10px;
width:50%;
margin:0;
}
.onset-left a:link, .onset-right a:link{
text-align:right;
}
Код HTML:
Код PHP:
  1. <div class="onset-left"><a class="fancybox" href="/images/template-content/one.png" rel="gallery"><img src="/images/template-content/one.png" alt="" width="200" height="150" /></a>
  2. <p><a href="/index.php/magazin/doma-kotedzhi-villy/dom-detail">Подробнее &gt;&gt;</a></p>
  3. <p class="onset">Очень дешевая недвижимость в Германии. Общая площадь дома 100 кв.м. Земельный участок площадью 70 кв.м Цена: дома 9000 евро.</p>
  4. </div>
  5. <div class="onset-right"><a class="fancybox" href="/images/template-content/too.png" rel="gallery"><img src="/images/template-content/too.png" alt="" width="200" height="150" /></a>
  6. <p><a href="/index.php/magazin/doma-kotedzhi-villy/dom-detail">Подробнее &gt;&gt;</a></p>
  7. <p class="onset">Очень дешевый дом в городе Мойзельвиц (MEUSELWITZ). Площадь дома 83 кв.м. Земельный участок 260 кв.м. Цена: 6000 евро!</p>
  8. </div>
  9. <div class="onset-left"><a class="fancybox" href="/images/template-content/free.png" rel="gallery"><img src="/images/template-content/free.png" alt="" width="200" height="150" /></a>
  10. <p><a href="/index.php/magazin/doma-kotedzhi-villy/dom-detail">Подробнее &gt;&gt;</a></p>
  11. <p class="onset">Отличное предложение! Площадь дома 80 кв.м. Участок в собственности площадью в 210 кв.м. Очень выгодное местоположение. Цена: 10.400 евро.</p>
  12. </div>
  13. <div class="onset-right"><a class="fancybox" href="/images/template-content/fife.png" rel="gallery"><img src="/images/template-content/fife.png" alt="" width="200" height="150" /></a>
  14. <p><a href="/index.php/magazin/doma-kotedzhi-villy/dom-detail">Подробнее &gt;&gt;</a></p>
  15. <p class="onset">Очень дешевая недвижимость в Германии. Общая площадь дома 100 кв.м. Земельный участок площадью 70 кв.м Цена: дома 9000 евро.</p>
  16. </div>
И вот что на выходе...

Мне кажется, здесь более сложная задача решена...
Редактировалось: 6 раз (Последний: 29 июля 2013 в 13:07)
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 924
1 день назад
Вчера не стал отвечать, посмотреть, что другие напишут...
Мое ИМХО это тупиковый путь пилить шаблон под каждую функцию , по крайней мере в WP насколько я его знаю.
Одно дело приспособиться для чего то одного, другое дело приспосабливаться под два, а третье если потребуется еще один вывод? (Сейчас допустим не нужен, но завтра заказчику это потребуется, он естественно обратиться к Вам и...)
Ответ уже сказали:
artnikov:
Простых, но логичных выхода, в вашем случае ДВА -
1. Не использовать WP для сайта.
2. Если все таки очень хочется, то - для каждого "нововведения" в теме прописывать CSS и верстать div.
3. Использовать плагины (галереи)
Понятно, что проделана большая работа, но... crazy

PS: Я очень большой не сторонник различного рода пиления обработчиков (не CSS) в таких движках как Джумла и Вордпресс. Причина простая функций столько много, в шаблоне они настолько все зацеплены друг за друга, что любое исправление, которое делается на данный момент, неизвестно к чему приведет при дальнейшем использовании. Опять же ИМХО smoke
Редактировалось: 4 раза (Последний: 29 июля 2013 в 11:36)
Постоянный участник
artnikov
Медаль За активное участие в жизни сайта.
Сообщений: 479
29 дней назад
samson:
Вчера не стал отвечать, посмотреть, что другие напишут...
Доброго здоровья, Samson(за "спец по WP", конечно спасибо,звучит гордо,но не совсем так...) Вот и я говорю, НЕ стоит менять функциональность, по крайней мере на усложнение. Простой пример, не так давно переписывал сайт, так ранее кто-то сгенерировал тему в Artisteer, с "распиловкой" шаблона, в результате нагрузка на cpu сервера аж зашкаливала, пришлось оптимизировать все шаблоны страниц и отключить и админку от Artisteer и виджеты, только после этого все заработало более-менее... Не мудрено, сайт за три-четыре года "оброс" информацией и все функции просто стали "лишними". Вот и с миниатюрами так... WP по умолчанию грузит изображения трех размеров, соответственно в базах прописываются данные значения плюс функция по генерации миниатюр от Artisteer - еще значение, обновляете Wordpress или тему, меняется способ формирования полей... У вас через год сервер "опухнет" от неиспользованного хлама(при чем самого тяжеловесного)... И так далее... Я это к тому, что не стоит придумывать велосипед, легко можно обойтись правкой css и html-версткой...Опять же я не настаиваю, всего лишь опыт(..."сын ошибок трудных...") laugh
И пожалуй самое главное(наконец-то): При работе с любым движком не желательно пересекаться функциями с шаблоном. В вашем случае желательно учитывать возможности WP, есть виджеты, так их и используйте в полной мере. Не хватает стандартных, напишите свои... Добавьте в эти виджеты div классы и пропишите под них css, что сложного то? А зачем над php так измываться, вы же меняете структуру таблиц, вольно или не вольно... И под клиента не рекомендуется использовать "НЕ стандартные" решения, на крайний случай пользуйтесь скриптами, они не так быстро устаревают.
Вот вроде и все, что хотел сказать, ваше право принимать данное или нет, в конечном счете, каждый учится на своих ошибках, как бы мы того не хотели...
Редактировалось: 3 раза (Последний: 29 июля 2013 в 16:13)
Постоянный участник
sagus85
Медаль
Сообщений: 287
3 дня назад
alexmoon,
alexmoon:
Пока легкого решения, кроме как создания отдельного дизайна для категорий - не вижу.
Если все таки решите идти в этом направлении то нашел статью которая может помочь:
Скрытый текст виден только зарегистрированным пользователям

Там и плагин предлагается. Может чем поможет. joke
насколько знаю есть и другие плагины для изменения шаблона категорий.
Редактировалось: 2 раза (Последний: 29 июля 2013 в 21:56)
Захожу иногда
alexmoon
Сообщений: 49
1390 дней назад
artnikov:
Доброго дня, многоуважаемый. Как то, если честно ВЫ не с того начали. Проясню ситуацию- с такими копаниями и перепилами кода php вы всего лишь увеличите нагрузку на сервер. Мне кажется НЕ совсем логично для Wordpress ставить выделенный сервер !??? ИЛИ я не прав? Сама тема, которая генерируется в Artisteer , с четвертой версии ОЧЕНЬ перегружена, практически на 50% приходится облегчать функциональность(переписывая код), а ВЫ наоборот хотите расширить ЕЩЕ возможности... Простых, но логичных выхода, в вашем случае ДВА -
1. Не использовать WP для сайта.- (это скорее не способ а возможность или ее отсутствие)
2. Если все таки очень хочется, то - для каждого "нововведения" в теме прописывать CSS и верстать div.
3. Использовать плагины (галереи)
Другого, простите никто пока НЕ придумал. Просто задача настолько легко решаема вторым пунктом, что ни кто не правит настолько функциональность самой темы. В более нагруженных проектах лучше писать сайт на php - БЕЗ движков... И

Давайте по-порядку.
1. Нагрузка на сервер не увеличилась. У 70% так называемых премиальных тем - она значительно выше. Кроме того, совершенно очевидно, что каждая версия самого WP всё тяжелее и круче, что логично и деваться от этого нам некуда. Вместе с тем, имея возможность сравнивать движки, пока WP легче, чем те же джумла, дле, друпал, ну а про расширения я вообще молчу.
2. По-поводу сервера. Если у вас один сайтик (с небольшим трафом) или личный блог, то наверное смысла нет (хотя кому как), а если у вас их сотни (как у меня), то деваться вам некуда. Уже наверное года 3 и больше, не помню с каким версий ВП, давно и поголовно сидим на VPS, что получается дешевле, безопаснее и просто удобнее (еАкселлератор + везде стоят гипер-кэш), по-сравнению с нагрузкой той же сапы или с трафом от 2К/сутки, нагрузка от темы (шаблона) просто смехотворна.
3. При чем здесь плагины галерей - я честно говоря не понял, коллега. По-поводу обновлений... Когда слетает любой шаблон или отрубается половина плагинов при очередном плановом обновлении, это уже стало рутиной, копаться так и так ;)

Далее.
artnikov:
И не стоит копаться в файле wrappers.php? в противном случае придется переписывать ВЕСЬ шаблон...
Почему же не стоит? С самого начала (с первого поста) и говорили о том, что поменяется везде.

artnikov:
Стоит наверное для миниатюр выставить "жесткие" значения просто через css???, тогда многие вопросы отпадут...И далее, правьте css... и изменяйте functions.php очень аккуратно...
Да, полностью согласен, был прописан новый div, для него условия в CSS, я же писал об этом.

artnikov:
изменяйте functions.php очень аккуратно...
Изменения коснулись только двух строк, был прописан новый див для thumbnail, плюс закаментил старый вывод.

artnikov:
Для главной страницы, сформируйте отдельные css и пропишите div-ами и в крайнем случае <p style...>( и то, только для отцентровки или присвойте p класс) , да необходимо умудриться, что б в дальнейшем этот стиль иногда использовать, для оформления последующих страниц.
Прошу поподробнее для ламера, как и куда будем прописывать!
artnikov:
И не старайтесь впихнуть стили css, для конкретной страницы (код WP будет не валиден), в том вся и задача ухитриться все сделать и на будущее и для настоящего...
Нет, конечно. Я говорил о том, чтобы для страницы категорий (архивы не будут доступны юзерам) создать отдельный шаблон просто, но этого как раз бы и не хотелось, ибо будет не тру (был опыт, полезно для каталога статичного, но не для динамики).

artnikov:
Вот простой пример:(Движок роли вообще НЕ играет)
Вы предлагаете переписать часть кода для главной?
samson:
Мое ИМХО это тупиковый путь пилить шаблон под каждую функцию , по крайней мере в WP насколько я его знаю.
Одно дело приспособиться для чего то одного, другое дело приспосабливаться под два, а третье если потребуется еще один вывод? (Сейчас допустим не нужен, но завтра заказчику это потребуется, он естественно обратиться к Вам и...)
Ответ уже сказали:
Почему же тупиковый? Наоборот, у меня такой подход: надо? делаем.

samson:
Я очень большой не сторонник различного рода пиления обработчиков (не CSS) в таких движках как Джумла и Вордпресс. Причина простая функций столько много, в шаблоне они настолько все зацеплены друг за друга, что любое исправление,
Ну а куда деваться, коллега! Тем более, мы ж чуть-чуть joke Кстати, артистир в этом плане (сужу по v2.2-3) еще молоток, да и 4-й пока нормально, видно что тупо по кодексу собирали (как с другими cms - не знаю, юзаю только для ВП)

artnikov:
В вашем случае желательно учитывать возможности WP, есть виджеты, так их и используйте в полной мере. Не хватает стандартных, напишите свои... Добавьте в эти виджеты div классы и пропишите под них css, что сложного то? А зачем над php так измываться, вы же меняете структуру таблиц, вольно или не вольно...
Слушайте, уважаемый коллега. Вы слишком хорошего обо мне мнения. Если бы я мог как вы написать свой виджет(!), то разве спрашивал бы - каким макаром мне превьюшку с тайтлом в шабе местами поменять??? :)
Если серьезно, то прошу учесть, что не все тут пока великие спецы, потому будем же более либеральны комплиментарны друг к другу и писать немного понятнее, шаг раз, шаг два, а шаг три - ни-ни, ибо накроется тут и там.
Ребята, спасибо всем за участие, а то я уж расстраиваться начал, что один на один с проблемой остался. Предлагаю продолжить обсуждение более предметно, вопрос действительно интересный, думаю и многим нашим форумчанам артистироводам ;)Добавлено спустя 7 минутsagus85
Да, именно о таком способе и шла речь, его реализация очень проста сейчас, практически средствами самого движка, но этот метод используется больше для простой статики (типа каталогов), хотя наверное многие пилят и для всего сайта.
Т.е. это крайний вариант, который не хотелось бы применять ;)
Постоянный участник
artnikov
Медаль За активное участие в жизни сайта.
Сообщений: 479
29 дней назад
alexmoon:
Давайте по-порядку.
Доброго ВАМ здоровья,Alexmoon.
1-2. Если у вас НЕ один сайт, то ВЫ должны быть в курсе, как тестируется нагрузка на сервер..., конечно много зависит и от сайта, но... А по "премиальным" темам, к несчастью разговор совсем отдельный.
3. Плагины галерей отвечают не только за вывод изображений в отдельном окне(оформлении), почти 90% приспосабливаются и для всего остального(как раз - не стандартный подход, для стандартных решений). Если обратили внимание, у плагинов галерей куча настроек- вывод ссылок, описания, и еще кому чего угодно.... Взять хотя бы, очень любимую Wordpress - совцами галерею - Некст Ген gallery... Чего там только не предусмотрено...
И по обнавлениям WP, практически все функции, которые используется в движке имеют возможность отключения(false,true)
Сколько сталкивался с WP, всегда приходилось "править" сам движок И ЕСТЕСТВЕННО ОБХОДИТСЯ 1-2 плагинами, во избежания проблем при очередном обновлении.
По поводу Главной страницы- да, переписать часть кода(можно и так), а можно и ни чего и не переписывать, а просто ее создать и оформить на свое разумение(через админку WP).
Далее - пример описанный выше - для статической страницы. Нужна динамика, меняйте статические ссылки на динамические функции(что и откуда ВАМ надо вытянуть) и все. И я так понимаю задача вами уже решена... Вам самому надо решить будете устанавливать, как ВЫ показали на скриншоте в статическую страницу или в виджеты(не рекомендую).
|
Перейти на форум: