# Upgrading from the Blog Components

Bootstrap Studio 9 replaces the Blog components with the CMS. The CMS components can do everything the Blog components did, and they work with any kind of content, not just blog posts.

You don't need to rebuild your blog. When you open a design that uses the Blog components, Bootstrap Studio converts them to their CMS equivalents automatically. Your pages, tags and authors are kept, and the exported website works the same way as before.

TIP

Keep a backup copy of your design file before you open it in Bootstrap Studio 9 for the first time.

# Tags, Authors and Blog Options

  • Tags and authors from Settings > Blog become two collections, Tags and Authors, which you'll find in the CMS group of the Design panel. A collection is only created if you had at least one tag or author.
  • Blog Options in the page properties become CMS Options, with the same image, title, excerpt, date, tags and authors. A page's tags and authors are now picked from the Tags and Authors collections.

Your blog posts stay regular pages in a folder, just like before. If you want, you can later move them into a collection, so you can edit them as data and generate their pages from a single template.

# Components

Each Blog component is converted to a CMS or regular component, with its content bound to the matching field:

Blog component Converted to
Blog Loop CMS Loop with the Folder source and the same folder. A custom list of posts is kept.
Blog Post Title Heading, with its text bound to Name
Blog Post Image Image, with its source bound to Image
Blog Post Excerpt Paragraph, with its text bound to Excerpt
Blog Post Date Date, bound to Date
Blog Post Link Link, with its URL bound to Generated Page URL
Blog Post Tags CMS Loop over the page's Tags
Blog Tag Nav CMS Nav over the Tags collection
Blog Tag Name Span, with its text bound to Name
Blog Post Authors CMS Loop over the page's Authors
Blog Authors CMS Loop over the Authors collection
Blog Author Name Span, with its text bound to Name
Blog Author Image Image, with its source bound to Photo
Blog Author Bio Paragraph, with its text bound to Bio

The options carry over too:

  • Filter by Tag and Filter by Author become filter conditions on the loop. From URL becomes a condition comparing to a URL query parameter (?tag= or ?author=), and a specific tag or author becomes a condition with a fixed value.
  • Tags as Links and Authors as Links set the loop's Item Tag to Link, linking to the same URL with the slug as a URL query parameter.
  • The Blog Tag Nav keeps its "All" tag, active tag and empty tag settings.
  • A Blog Authors component showing a single author, or the author from the URL, becomes a loop with a custom list or a URL filter on the slug.

# Custom CSS

The Blog components rendered data-bss-type attributes like blog-loop, which some designs use in CSS selectors. The CMS components render generic types instead, so the converter adds a marker class to the components that used to render each old type, like bss-blog-loop, and updates your CSS selectors to use it. Your styles keep applying to the same elements.

Only the CSS files in your design are updated. SCSS, JavaScript and Custom Code are left as they are, so check them for selectors with the old types and update them by hand.