Blog Post Styling

[Discourse]

	Summary	Blog Post Styling lets you designate a blog category, which alters the look of topics within the category to look more like traditional blog posts.
	Preview	Preview on theme-creator.discourse.org
	Repository	github.com/discourse/discourse-blog-post-styling
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

The Blog Post Styling theme component transforms Discourse topics into a traditional blog-post layout. When applied to a category, the first image in each topic is promoted to a full-width hero above the title, and the content is styled with blog-appropriate typography and metadata display.

Settings

Here are the various settings associated with this theme component:

• Blog category: Topics that belong to any of the selected categories will have blog post styling applied.

• Blog tag: Choose one or more tags that, when applied to a topic, will give it blog post styling.

• Image size: Decide how the featured hero image fills the header area:

  • No image: Hide the featured image.
  • Full width (default): Image spans the entire content area.
  • Centered: Image maintains aspect ratio and is centered in the content area.

• Image position: Decide where to show the image relative to the title:

  • Above title (default): Show image above the topic title.
  • Below title: Show image below the topic title. When selected, you can also include a summary that displays between the title and the image.Below, you can see what the image looks like when the image position setting is configured to above title and below title:

• Dropcap enabled: When enabled, the first letter in the blog post will have enlarged styling, like so:
  
  
• Mobile enabled: When enabled, blog post styling is applied when reading the topic on mobile devices.

Writing a Blog Post

Once you have set up your blog category (or applied your blog post tag), there are a few special things to note about how the blog post topic will work.

Featured image

Place the image you want as the hero image on the very first line of the post, followed by a blank line before your content starts:

![image description|1100x440](upload://your-image-hash.jpg)

Your post content begins here...

The component automatically positions this image based on the image position setting (see above). If any other content — including blank lines — appears before the image, it will not be promoted to the hero position.

After first publishing a post, refresh the page to see the image appear in the designated position. (This only affects the post author on initial publish; members accessing the post should see the image in the right place right away.)

Image sizing tips

The image container is 440px tall and 100% wide. For best results when the image size setting is set to full width:

• Use or crop images to 1100x400px before uploading to avoid cropping, or
• Choose images with a centralized subject or non-specific content (landscapes, patterns) so cropping doesn’t remove important detail.

Summaries

When the image position setting is set to below title, you can add an optional summary to your blog post, which will appear between the title and the featured image.

To do this, wrap the content that you want to appear in your summary as follows:

[summary] Here is the content that will be your summary. [/summary]

Stylized blockquotes

When creating topics in a blog category, blockquotes get special styling. You can create blockquotes in the composer with the > symbol or using the “ composer toolbar button.

Recommended category setting

In the settings for your blog category, consider enabling the Navigate to first post after topics are read category setting. This sends returning readers directly to the blog post content rather than their last-read position.

Blog Post Styling + Topic List Thumbnails

This component is compatible with Topic List Thumbnails, which highlights the featured image of your blog post in the topic list:

Note: The Topic List Thumbnails component is not compatible with the Horizon theme. The above screenshot is using the Foundation theme.

[amotl (Andreas Motl)]

@amotl

После того как мы вручную чуть-чуть увеличили заданные размеры в разметке, функция расширения заголовка изображения работает безупречно — [по крайней мере] для изображений, которые действительно достаточно велики (ширина > 690 пикселей).

Нам удалось это подтвердить, просто увеличив исходную разметку, сгенерированную после загрузки, путём добавления уровня масштабирования 101% в соответствующее место, например:

![image|690x458,101%](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

после того, как изображение было предварительно загружено как:

![image|690x458](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

Это мило и радует нас.

---

JeeLink

[ohellno]

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

Я лишь хотел узнать, не представляется ли возможным каким-то образом изменить его так, чтобы он использовал определённый тег вместо конкретной категории?

Я только что настроил новый сайт на Discourse, но при этом я пишу много «блоговых постов», и мне бы всё же хотелось, чтобы они отображались в соответствующих других категориях, чтобы всё выглядело более интегрированным.

В настоящее время я публикую их в отдельной категории blog-posts, доступ к которой ограничил только для себя, но я также создал группу тегов и сделал её доступной только для сотрудников.

Спасибо ещё раз!

[Howaids (Martin)]

Большое спасибо @tshenry. Ваши компоненты темы всегда были безупречны. И спасибо @sam и @codinghorror за то, что поделились невероятным приложением!! Ваша щедрость, включая поддержку в разделе meta, искренна и трогательна. Discourse действительно создан для будущего интернета, в котором больше заботы.

[LoganRTW (Ward)]

Есть ли способ сделать так, чтобы в качестве основного контента использовалось видео, а не изображение? Я бы удалил свой сайт на WordPress, если бы мог просто разместить YouTube/Vimeo и т. д., и это было бы главным контентом. Есть какие-то идеи?

[Howaids (Martin)]

Абсолютно! Отличное предложение @LoganRTW. Я голосую за это @tshenry. Можно ли это сделать?

[tshenry (Taylor)]

Обновление

Если вы можете в это поверить

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

FEATURE: Include optimized thumbnails for topics (#9215)

Я также добавил несколько новых функций:

• Новые настройки

  • image_display_style — у этой настройки есть два варианта. По умолчанию используется поведение, которое было у компонента всё это время. Альтернативный вариант гарантирует отсутствие обрезки и отображение полного изображения. Трудно сказать, какой из них «лучше», поэтому вам стоит поэкспериментировать и посмотреть, что лучше подойдёт для вашего рабочего процесса и изображений блога.

    

  • mobile_enabled — это первая версия стиля публикаций блога для мобильных устройств. Буду рад получить любые отчёты об ошибках или идеи по улучшению этого!

    

Я всё ещё планирую продолжать рефакторинг и очистку кода, но это должен быть хороший старт.

Introduce mobile, image display options, and refactor

---

@Varhall

Было бы здорово добавить разметку schema.org для такого типа тем. Это в планах?

К сожалению, на данный момент таких планов нет!

[torstensson (Per Torstensson)]

Спасибо за действительно вдохновляющий и замечательный компонент @tshenry

В ходе моей оценки я выявил две проблемы;

1. Отсутствие изображения блога в подкатегориях — после довольно тщательного устранения неполадок с различными темами, а также включения/отключения плагинов и других компонентов, я могу с высокой уверенностью заявить, что изображения блога не отображаются для подкатегорий. Первое изображение, то есть intended изображение блога, тем не менее, всё ещё скрыто.

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

[tshenry (Taylor)]

Огромное спасибо за обратную связь, @torstensson! Оба пункта действительно были ошибками, и теперь они исправлены:

Bug fixes

Пожалуйста, дайте знать, если у вас возникнут какие-либо проблемы.

---

Для всех, кто использует этот компонент:

Если вы сейчас не добавляете главное изображение в начало всех постов блога, это сообщение для вас!

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

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

Я добавил настройку «всё или ничего», которая позволяет включать или отключать «главное изображение». Это даёт возможность использовать все стили, кроме главного изображения, если таков ваш выбор.

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

[torstensson (Per Torstensson)]

@tshenry

Большое спасибо за обратную связь, @torstensson! Оба пункта действительно были ошибками, и теперь они исправлены. Пожалуйста, сообщите, если у вас возникнут какие-либо проблемы.

Отлично, спасибо, @tshenry С радостью подтверждаю, что обе проблемы были решены с обновлением И ещё раз — спасибо за действительно отличный компонент, не только по функционалу, но и как источник вдохновения

[core]

Недавно анонсированная функция может работать как альтернатива этому компоненту темы. Оставляем это здесь для интересующихся.

Page Publishing

This guide covers how to use the Page Publishing feature on Discourse. This feature allows Staff users to convert a topic into a standalone static page with custom styling. Examples include the Terms of Service and Privacy Policy pages. Required user level: Staff Publishing static pages on Discourse Page Publishing allows Staff users to create standalone static pages from topics. This is similar to the process for creating Terms of Service or Privacy Policy …

[nityeshaga (Nityesh Agarwal)]

@tshenry Большое спасибо за этот компонент! Мы используем его вместе с плагином Предварительный просмотр списка тем, чтобы создать раздел «Статьи» для студентов сообщества Dataquest.

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

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

Спасибо!

[sebastianh (Rebastion)]

Итак, я считаю, что это отличный компонент. На самом деле я сейчас пробую его на работающем Discourse и экспериментирую с ним. Без какого-либо порядка я хочу поделиться своими первыми мыслями и отзывами, надеюсь, это поможет — извините, если некоторые из них скорее вопросы:

• Способ отображения автора кажется немного неуместным; возможно, его можно решить более компактно, чтобы теснее связать его с заголовком или тегом категории… также между строкой, завершающей информацию об авторе, и началом текста довольно много белого пространства.
• Посетителю, который попал прямо на пост блога, трудно понять, где он находится, так как нет четких «хлебных крошек» или чего-то подобного. Основная причина в том, что панель заголовка, похоже, неактивна, тогда как в обычных темах она трансформируется и включает заголовок, категорию и т. д.
• Было бы здорово, если бы представление категории имело больше сходства с блогом: с небольшими превью-изображениями и так далее. Было бы это сложно реализовать?
• Я не вижу описания категории в представлении категорий?

[sebastianh (Rebastion)]

@nityeshaga

в разделе статей для студентов сообщества Dataquest.

вау, какой компонент темы используется для этого вида категории? Выглядит круто

[tshenry (Taylor)]

Спасибо за обратную связь

@sebastianh

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

Я согласен, что вокруг области с автором и заголовком много белого пространства. Я учту этот отзыв при следующей работе над компонентом и посмотрю, смогу ли найти решение.

@sebastianh

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

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

@sebastianh

• Было бы здорово, если бы представление категорий выглядело больше как блог, с небольшими превью изображений и тому подобным; было бы это сложно реализовать?
• Я не вижу описания категории в представлении категорий?

Это выходит за рамки данного компонента. Что касается представления категорий, вам стоит взглянуть на: Topic List Thumbnails

[sebastianh (Rebastion)]

Спасибо за обратную связь Думаю, большинство вопросов прояснилось, и я также вижу описание категории сейчас. Не знаю, почему оно не было видно раньше, я думал, что это связано с компонентом. Буду продолжать проверять и позже опубликую ещё обратную связь. Отличная работа!

[sebastianh (Rebastion)]

Я думаю, что лишнее пространство вверху возникает из-за того, что после «перемещения» изображения в заголовок записи блога остаётся пустое место, а не появляется пространство снизу.

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

[sebastianh (Rebastion)]

@sebastianh

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

Вот скриншот того, что я имею в виду:

[tshenry (Taylor)]

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

![spagh|690x390](upload://nVi42gGIwt03DAYSzVEc4RvwS6h.jpeg)

<b>В то время как</b> в интернете достаточно места для публикаций, блогов, обмена и твитов и всего подобного, моим любимым местом для обмена идеями с вами всеми в мире спагетти-вестернов является этот форум. Некоторые из вас, возможно, помнят попытку, предпринятую несколько лет назад; она называлась «Планета спагетти-вестернов», и идея заключалась в создании блога, который автоматически агрегировал бы посты со всех блогов о спагетти-вестернах в интернете и представлял их в виде дайджеста. Это было довольно сложно с технической точки зрения, и в итоге оказалось больше работы, чем того стоило, поэтому мне пришлось закрыть этот проект.

Если это сработает, я добавлю примечание в исходный пост об этом требовании.

[sebastianh (Rebastion)]

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