Добавить избранное изображение в отдельные сообщения

Опубликовано: 2013-10-10

Избранное изображение из вашего архива (миниатюра сообщения) будет извлечено из избранного изображения независимо от того, как вы добавите его на экране редактирования сообщения.

Изображение, отображаемое до или после заголовка вашего отдельного сообщения, извлекается из 1-го изображения, которое вы вставляете в сообщение, если вы его не удалите.

Вы можете удалить или изменить код, который отображает изображение до или после заголовков вашей одиночной записи, используя один из фрагментов кода на этой странице.

Если вы добавите изображение в качестве избранного, оно будет отображаться в ваших архивах как миниатюра сообщения, а не как избранное изображение после заголовка вашего отдельного сообщения.

Если вы не добавите избранное изображение, первое изображение в вашем сообщении будет отображаться до или после заголовков отдельных сообщений, а также на страницах вашего архива.

В этом посте я предоставлю вам несколько строк кода PHP, которые вы можете просто вставить в конец файла functions.php вашей дочерней темы.

Код позволит вам отображать изображение вашего сообщения до или после вашего заголовка в отдельных сообщениях.

разместить изображение перед одним заголовком

Недавно Дэн задал этот вопрос:

Я ломал голову, ища вокруг, используя другой код, найденный на этом форуме, и привел к созданию нового поста.
Используя Minimum Pro, я просто хотел бы отобразить избранное изображение сообщения на странице «одного сообщения». Желательно над текстовым содержимым. Я нашел код на этом форуме и поместил его в functions.php. Он отображает избранное изображение, но одновременно стирает текстовое содержимое. Так что, очевидно, я делаю что-то не так.

Примечание. Пожалуйста, используйте последний фрагмент кода PHP в этом посте, если вы используете старую разметку XHTML, а не HTML 5, поскольку хуки изменились.

Отображать избранное изображение после заголовка

Этот код отображает изображение после вашего одиночного заголовка сообщения.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Отображать избранное изображение перед заголовком

Этот код отображает ваше изображение перед заголовком вашего отдельного сообщения.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Отображение избранного изображения на статических страницах

Если вы также хотите, чтобы это работало для статических отдельных страниц, просто добавьте страницу в код следующим образом:

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'page' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Отображение избранного изображения на статических страницах и отдельных сообщениях

Если вы также хотите, чтобы это работало для статических страниц и сообщений, просто добавьте страницу в код следующим образом:

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular() ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Позиция, которую отображает ваше избранное изображение, может быть определена с помощью третьего параметра приоритета позиционирования.

В приведенном выше коде это просто вопрос изменения третьего параметра с 5 на 15.

Изменить размер изображения

Вот пример использования большого размера в соответствии с вашими настройками мультимедиа.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Вы также можете использовать любые другие размеры по умолчанию, настроенные в меню «Настройки» > «Мультимедиа».

миниатюра
средний
большой
полный

Вы также можете использовать любые пользовательские размеры, которые вы добавили в свой файл функций.

Пример:

портфолио

 add_image_size( 'portfolio', 540, 340, TRUE );

Использование старых обработчиков циклов XHTML

Если вы все еще используете XHTML и еще не конвертировали в HTML 5, вам нужно будет использовать старые перехватчики циклов:

 add_action( 'genesis_before_post_title', 'single_post_featured_image' ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Добавление пробела между заголовком и изображением

Вот пример кода CSS, который вы можете добавить в конец файла style.css вашей дочерней темы перед кодом для медиа-запросов, который добавляет отступ между выбранным изображением и заголовком вашей записи в отдельных сообщениях.

 .single .post-image { margin-bottom: 30px; }

Используйте этот образец для страниц:

 .page .post-image { margin-bottom: 30px; }

Выровнять избранное изображение (пост-изображение) по правому краю

Вы также можете выровнять свои пост-изображения по правому краю.

Просто добавьте этот код CSS перед медиа-запросами в конце файла style.css дочерней темы:

 .single .post-image { float:right; margin:0 0 1em 1em; width: 285px; height: 285px; }

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

опубликовать изображение

Вы также можете добавить класс alignright в код PHP вместо использования CSS.

 'class' => 'alignright'

Просто замените post-image в коде PHP на alignright, и ваш текст будет обтекать ваше изображение с правой стороны вашего контента.

Выровнять избранное изображение (пост-изображение) по левому краю

Вы также можете выровнять избранные изображения отдельных сообщений по левому краю.

 .single .post-image { float:left; margin: 1em 1em 0 0; width: 200px; height: 200px; }

И вот результат:

плыть налево

Вы также можете добавить класс alignleft в код PHP вместо использования CSS.

 'class' => 'alignleft'

Просто замените post-image в коде PHP на alignleft, и ваш текст будет обтекать ваше изображение с левой стороны вашего контента.

Примечание . Этот код CSS применяется к дочерним темам Genesis 2.0 HTML 5 и может не работать с другими темами, в которых используется другой класс для пост-изображений/избранных изображений.

Удалить ссылку href из избранного изображения

Один из участников спросил меня, как удалить ссылку из кода, вот она:

Просто замените эту часть кода:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );

С этим:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); echo $img;