Sub@omic Limited
Premium Quality Web Design & Development
+44(0)7970 029025
Kim Miller Styles blog

Dynamic Blog Index Banners

Common to every Web Diffusion module, the banner image is a creative way to introduce a website page or section. Yesterday I made the time to enhance Web Diffusion's blog module so that it can now automatically show the banner image of the most recent blog article at the head of the module's index page.

Web Diffusion is Sub@omic's unique and exclusive system for building and managing websites. I've been developing the system since 2010 and the website management system it is today is the result of hundreds of incremental tweaks and improvements. Many improvements are planned and necessary to keep the website management system on track with it's development roadmap. However, some of the very best features and improvements have come directly as a result of Customer requests.

A month or so ago, I overhauled the content for the Web Diffusion website of Hertfordshire fashion blogger Kim Miller. For Kim, image and style is everything. Kim would be the first to admit she's not a fan of computers and wouldn't relish the prospect of a conversation about her blog's technical capabilities and parameters. Nevertheless, I've learned, over the years, to pay close attention to Customers like Kim who don't profess to know much about IT but do, however, know precisely what they want their website to look like.

In this most recent website makeover one standout thing Kim asked was whether it was possible for the banner image at the head of the blog's index page to change with every new blog post.

This was a website design feature I hadn't considered developing prior to Kim's request. All it took was a short, non-techie, discussion about the reasons driving Kim's feature request and I saw how this would improve the usability of the blog module for Kim's target market. Fashion moves fast and is visually rich. The Google Analytics for Kim's website clearly show that the majority of people visiting the Kim Miller Styles website do so on a mobile or tablet. In this use case, the blog module's responsive web design layout was presenting the same image at the head of the page and returning visitors might assume that the page hadn't been recently updated. The ability to automatically change the blog module's banner image at the head of the page delivered a clear benefit for readers of Kim's blogs.

I have built Web Diffusion so that it offers me the ability to include a custom piece of PHP code that interacts with any given page. I used this capability to test the dynamic banner image selection during the recent makeover of Kim's website. The immense appeal of this facility is the ability to introduce, test and improve new website features without having to take a website offline whilst a full-scale upgrade is made.

The server-side custom script only executed on Kim's website when the blog module's index page was active; the script made a query of the MySQL database (that holds all the content of a Web Diffusion website) to identify the most recent blog post and to extract the filename of this post's banner image.

After the successful trial on Kim's website I lifted the PHP code and integrated it into the blog module so that every Web Diffusion website (v0.7.9 or greater) will be able to use the feature.

Want to see the subtle yet effective blog automation at work? Check back here tomorrow to look at this web design blog's index page and you'll see a banner image that's been dynamically selected from the most recent post.