Blog - Blocks - Accelerate Categories Block

Accelerate Categories Block

The AMP Publisher Accelerate theme gives you the ability to assign thumbnail and hero banner images to your post categories. It comes with the Accelerate Categories block that allows you to create a navigation block of categories using the thumbnail image and Accelerate theme display modes.

Settings Overview

  • Block Settings
    • Layout
      • Display Mode : Choose a responsive layout and style for displaying posts in this block.
        • Image Grid : The image grid places image blocks in a row with consistent heights, then drops the column count as the browser size decreases. The text overlay has a white semi-transparent background.
        • Thumbnails : Works the same as the Image Grid with a smaller title (adjustable) and hidden byline.
      • Image Grid – Text Display : Choose where and how to display the text for boxes when using the Image Grid display mode.
      • Object Alignment : Alignment used for Post object content or box (per block “Display Mode”).
        • The “Image Grid” and “Thumbnails” display modes use CSS flex, they will fill rows within the available space when possible and then align objects within a row when not full.
      • Margins : All AMP Publisher blocks have Top Margin and Bottom Margin settings. [tutorial]
      • Post Query
      • Category ID List : You may choose to designate specific categories in a specific order rather than letting it populate automatically. Enter the Taxonomy IDs for the categories you wish to include, with a comma between each ID number.
      • Item Limit : Limit the number of categories to be included, the block will display as many as it can up to this limit.

Object Map (DOM)

  • root object (div) targeted node from Block Settings panel : You may assign style settings that apply to this entire block.
    • internal wrapper (div) untargeted node : Used to support advanced layout options. Most of our blocks have one of these wrappers. It has no styling of it’s own, it’s children are considered the block’s children.
      • category items (div) untargeted node : Objects containing the category title and image redered to suit display mode settings.

Tutorial

  • Insert an Accelerate Categories block into the page. After a moment you will up to 6 categories load using the default style as set in the Customizer.
  • Open the Block Settings panel in the block inspector (sidebar).
    • Choose a Display Mode or Inherit the display mode assigned to the theme’s “Categories Display Mode” customizer setting for the current page.
      • If you choose “Image Grid” display mode, you may the choose one of four looks using the Image Grid – Text Display setting. This can also be inherited from the theme’s customizer settings.
    • Choose a Content Alignment, this only affects object that fall into rows that are not filling the available space in the browser or device. For example: if you have 4 categories in a space that allows 3 per row you will have a 4th category on the second row, which will be aligned to the left, right or center depending on this setting.
    • All AMP Publisher blocks have Top Margin and Bottom Margin settings allowing you to create space without having to insert a spacing block.
    • You may choose to display specific categories rather than letting WordPress populate them.
      • Enter a list of category IDs (term IDs) with a comma between them into the Category ID List field, in the order you wish to display them.
      • WP Doesn’t make it easy to get the term ID, you must look at the editor URL for the category and find the “tag_ID=##” in the URL parameters. The ID number is the value that follow the = equals sign. Yes, they are interchangeably referred to as “category ID”, “term ID” and “tag ID” by WP… even though they are all the same thing.
    • Set an Item Limit for the number of categories you wish to display in this block.

Example – Image Grid

Example – Thumbnails