Pages as blog entries

Blog entries are simply pages with a special page type blog entry and can be created and edited via the well-known page module. Creating new entries is as simple as dragging a new entry into the page tree.

Post information in backend page header

The TYPO3 page and the list module show additional information for blog posts. Information that is normally hidden in the page settings is now visible to the editor. The new information bar is enabled by default but can be disabled in the extension settings.

Use all your content elements

All your existing elements can be used on the blog pages - including backend layouts, custom content elements or plugins.

Flexible positioning

All parts of your new blog are usable on their own, so you can just use the elements you want. The different elements include for example the comments and comment form, a sidebar or the list of blog posts. All these elements can be used as separate content elements and therefor be positioned and used wherever you want.

Customizable Templates

Templating is done via Fluid templates. If you want your blog to have a custom look and feel just replace the templates and styles with your own. If you just want a quick blog installation, use the templates provided by the extension and just add your stylesheets.

Categorizing and Tagging

Use categories and tags to add meta information to your blog posts. Let your users explore your posts based on their interests navigating via tags or categories to find similar entries. Add posts from the same category to your posts to get your readers to read even more.

Integration and Standalone Mode

The blog features three different modes - expert, standalone and integration.

Activation

1. Go to Admin Tools / Extensions
2. Select "Installed Extensions" in the Document-Header
3. Activate the "TYPO3 Blog Extension"

Setup Wizard

The Setup Wizard creates a fully configured standalone instance of the TYPO3 Blog Extension. If you already have an existing site, you might dislike the result of having an additional and unplanned root page. In that case, please read the manual setup instructions.

Setup Wizard

Manual Setup

The manual setup helps you to build an integrated instance of the TYPO3 Blog Extension. If you want a standalone Blog and do not have an existing site, please go with the Setup Wizard instructions.

Manual Setup

Create a new Category

1. Go to the list module
2. Click on the page where you want to create the new category
3. Click on the "new record" button on the top and choose category
4. Enter a title for the category and choose a possible parent
5. Click "Save"

Create a new Tag

1. Go to list module
2. Click on the page where you want to create the new tag
3. Enter a title for the tag
4. Click "Save"

Create a new post

1. Create blog post

   

   1. Click on the page module
   2. Click on the plus icon on top of the page tree
   3. Drag the blog post into your data folder

2. Edit your blog post

   

   1. Select the blog post you created
   2. Click "Edit Post Meta-Data" or the edit button in the page header

3. Check the title of your blog post

   

   1. Select the "General" tab
   2. Edit the title of your blog post

4. Adjust publish date and feature image

   

   1. Click the "Blog" tab
   2. Adjust the publish date if nessesary
   3. Upload a new image for your blog post or select an existing one

   Note

   The featured image will be displayed in all blog lists and in the RSS feed. The "Blog: Header" plugin is available to display it in the blog post.

5. Save your changes and close the post meta data interface

   

   1. Save your changes
   2. Close the post meta data interface

6. Add content blocks to your post

   

   1. Click the "Add content" Button

   

   2. Select any content block you want to insert, for example "Regular Text Element"

   

   3. Insert content for your block
   4. Save the content
   5. Close the content block

   Tip

   You can add all kinds of content elements that you are using on the rest of your web site, too. The blog itself doesn't provide any special elements for the content of your blog entry as sticking close to the rest of your website ensures a consistent look and feel for your visitors.

7. Enable your blog post

   

   1. Right click on the post you want to enable
   2. Click on "Enable"

8. View your Blog Post

   

   

   Congratulations you published your blog post

Blog Page Plugins

Blog page plugins are usually used in conjunction with a sidebar, it is recommended to provide a separate template for these pages.

Example:

<f:layout name="Default" />
<f:section name="Main">

   <div class="container">
      <div class="blogcontainer">
            <main class="blogcontainer-main" role="main">
               <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{
                        colPos: '0'
                  }" />
            </main>
            <aside class="blogcontainer-sidebar">
               <f:render section="renderPlugin" arguments="{listType: 'blog_sidebar'}" />
            </aside>
      </div>
   </div>

</f:section>
<f:section name="renderPlugin">

   {blogvh:data.contentListOptions(listType: listType)}
   <f:cObject typoscriptObjectPath="tt_content" data="{contentObjectData}" table="tt_content"/>

</f:section>

Blog Post Plugins

If possible, do not add the following plugins manually on each blog post. Provide them via a Dedicated Page Template, so your editor can concentrate on the content.

Example:

<f:layout name="Default" />
<f:section name="Main">

   <div class="container">
      <div class="blogcontainer">
            <main class="blogcontainer-main" role="main">
               <f:render section="renderPlugin" arguments="{listType: 'blog_header'}" />
               <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '0'}" />
               <f:render section="renderPlugin" arguments="{listType: 'blog_footer'}" />
               <f:render section="renderPlugin" arguments="{listType: 'blog_authors'}" />
               <f:render section="renderPlugin" arguments="{listType: 'blog_comments'}" />
               <f:render section="renderPlugin" arguments="{listType: 'blog_commentform'}" />
               <f:render section="renderPlugin" arguments="{listType: 'blog_relatedposts'}" />
            </main>
            <aside class="blogcontainer-sidebar">
               <f:render section="renderPlugin" arguments="{listType: 'blog_sidebar'}" />
            </aside>
      </div>
   </div>

</f:section>
<f:section name="renderPlugin">

   {blogvh:data.contentListOptions(listType: listType)}
   <f:cObject typoscriptObjectPath="tt_content" data="{contentObjectData}" table="tt_content"/>

</f:section>

Shared Plugins

AvatarProvider

The default AvatarProvider is the GravatarProvider, this means the avatar of an author is received from gravatar.com. The extension provides also an ImageProvider for local stored images.

But you can also implement your own AvatarProvider:

1. Create a class which implements the AvatarProviderInterface.
2. Add your provider to the TCA field “avatar_provider” to make it selectable in the author record

Note: Since v10 the proxying of gravatar loading is used which means that TYPO3 downloads the gravatar, stores it on the filesystem and delivers the image locally from typo3temp. This is privacy related and useful if users didn't give their consent for fetching gravatars client side.

Where to report bugs or improvements?

Please visit our github project to report bugs or request improvements.

Slack channel

Visit us on slack in channel #t3g-ext-blog

Contributions

Any contributor is welcome to join our team. All you need is an github account. If you already have an account, visit the: github project.

Clone / git repo

The git repository is public and you can clone it like every git repository:

git clone https://github.com/TYPO3GmbH/blog.git