Blog Intro
- Full Width Header Image: Yes
- Header Image(1920x600):
Blog Intent
- This "Blog Home" page is a customised blog summary page. i.e. To control a summary selected set of primer intro articles.
- The intent is to display a short primer description "Intro" text on the "Blog Home" page & "Readmore" text on the full linked article.
- It displays all sub categories of Blog Categories in accordions, each containing the top three ordered articles per sub category.
- Should the blog sub category contain more than three articles, an automated category link is shown at the bottom of the accordion.
- The category accordions & articles are displayed according to the backend sort order.
- Note: For speed, the backend sort order is cached, hence after adding one or more new articles, drag & drop sort one of them once.
- On speed, the blog structure is maximal caching compatible. ie First page loads are 2x to 4x faster without affecting new changes.
- The design, functionality and/or structure has been parameterised so that it may be implemented on other areas of the site.
Blog Accordions
- By default, on initial Blog Home page opening;
- the first/top sub category accordion and the corresponding
- first/top sub category article accordion, are automatically opened, while the remaining accordions are closed.
- The category accordions are hash aware. ie Opening .../blog#blog-category2 will;
- open the Blog Category2 accordion and
- scroll down to Blog Category2's location on the page.
- With usubality and space optimisation in mind;
- Unlike this intro article, the category blog home accordions have their respective category articles as accordions embedded within them.
- The category article accordions consequently have squiggly lines on the sides to visually seperate the two.
- The category blog accordions are independant. i.e. You can open more than one accordion at a time.
- The blog articles accordions inside the category accordions, are not independant. i.e. You can open one accordion at a time.
- Each sub category accordion title does include a direct sub category link on the right hand side.
Blog Header Images
- Both blog categories and blog articles can have individual header images.
- The header images may be displayed full width(default) or article width(smaller), by setting the 'Full Width' option in the Header Aditional tab.
- Blog categories will show the Header Image of an article within itself that has an alias of 'intro'. aka The top intro article.
- The displayed "intro" article may have any Title but the alias must be set to 'intro'.
- To visually separate blog category intro articles from normal blog articles on the backend, the intro article;
- has a light yellow background and
- the "Alias: intro" will pulsate.
- The above means you simply use [Filter Options] -> [Select Category] and then everything you need is on one list.
- The default category depth has been set to one so you'll only see the articles directly belonging to the category you select.
- WRT the example categories & articles;
- Blog Home category has a full width header image.
- Blog Category 1 has a article width header image.
- Blog Category 2 has no header image.
- Blog Example 1.2 article has a article width header image.
- Blog Example 2.2 article has a full width header image.
Blog Summary Page Accordion Intro Images
- In general on the internet, most newer blog post sites have an associated image, hence the image placed on the right.
- The default right aligned 120px X 132px image is deliberately small to coincide with the blog intent of showing short primer descriptions.
- Globally, for all blog articles, the default image may be changed if preferred.
- Per article, the default 120px X 132px image may be;
- enabled(default) with the "Use Intro Image" option in the "Blog Additional" tab,
- disabled to use the image space for the intro article or
- changed by adding you own image under "Blog Additional"(use the same res).
- Should "Use Intro Image" be set to "Yes"(default) and no image is selected, the default image will be shown.
- All new site images are automatically converted every ~70 seconds, so use the farmiliar jpg or png on the backend, as required.
- If a modified image is re-uploaded to the site(e.g. with the same name), it will also be re-converted automatically.
- If per image directory forced image resolutions are required, they can be added.
Blog Search
- A blog categories specific search has been implemented. ie The blog search only find results within the blog categories.
- The search has a site keyword type ahead function. ie The system gathers keywords from articles.
This Intro & Demo Articles
- This "Intro" article is found in the [Blog Categories] category & is only shown on the "Blog Home" page.
- A duplicate of this article has been saved & unpublished for future reference, so this may be deleted or modified.
- Currently the [Blog Category1] & [Blog Category2] sub categories have been added for demonstration purposes.
- All functionality has been tested on desktop & mobile.
