Tagging with Sparkle 3.1

Hello everyone.

In an earlier post, I asked about whether Sparkle had tags and explained the value they provide. Since Sparkle does not have tags (I think tags are difficult for Duncan to implement since I think such a feature would need a database backend which introduces numerous technical complications), I’ve implemented a poor man’s manual tagging approach I’d like to share.

(Tagging is a valuable feature for those doing blog sites - such as myself - and with Sparkle 3.x blog features, blog sites are now rather simple to produce in Sparkle.)

Overall, I use buttons linking to Regular pages that contain listings of the blog posts containing the buttons. I place the buttons on blog posts. The result is when a visitor views a blog post, they see the tags assigned. Click on a tag and the visitor sees a listing of all the blog posts with that same tag. Click on a listing entry and the visitor is taken to that blog post where that blog post’s tags are visible and so on.

Here are the high level steps I took:

  • I created a blank Regular page for each button. This page will be the “index” for posts with each tag. In other words, it will contain the listing of posts containing a tag.
  • I named each “index” page “TOC - X” where TOC stands for table of contents and X is the name of each tag. I did this as opposed to using the word “Index” so I would not confuse myself with Sparkle’s index files it creates.
  • I created a blank Regular page that contained a set of buttons with each being a “tag”. I excluded this page from publishing, searching, and menus.
  • I titled each Regular page “Index - X” where X is the name of each tag.

So at this point, there is a button for each tag and a corresponding page that will contain a listing of those blog posts with that tag.

  • I tagged each blog post by placing an appropriate tag button on the page post.
  • I created a linked text box on the appropriate TOC page containing the name of the blog post.

So at this point, I have a blog post with a button that takes the visitor to the TOC page and a TOC page that has a text box link taking the visitor back to the blog post.

  • Since a blog post can have more than one tag button, I repeated this step for all the tags assigned to that blog post and for all blog posts.

Being that this is all manual, the work is making sure the right tags are on the right blog posts and the right entries are on the right TOC pages. My site has six tag buttons and six corresponding TOC pages. For each new blog post, I place the appropriate tag buttons on the blog post and enter a text box linked to the blog post on each TOC file associated with the blog post’s tags.

I could have had Sections defined for each “tag” and duplicated blog posts into each appropriate Section. This would have allowed me to have Sparkle create the indices. However, that would also mean I would be responsible for version control across the Sections. In other words, if I changed a blog post, I would have to change all the duplicate blog posts across the Sections. I would rather maintain the TOC files than ensuring a blog post was properly sync’d across the Sections.

I hope this provides food for thought for those who are using Sparkle for blogging.

Post script: Enhancement opportunities - I am thinking about updating the TOC files to contain a blog post’s tags along with its listing. This would provide the visitor with greater insight into a blog post without going to the blog post itself and providing quicker access to the other TOC files.

1 Like

I use two different approaches for tagging in Sparkle. The first is similar to your method that I call the “Perfectionist” method. The second way is I use what I call the “Search” approach using Sparkle’s Search function.

For the Perfectionist approach I design similar to what you do except instead of a separate page for each tag’s listing I use one page for all with Scroll Locations. This way I can see on one page everywhere I use a tag and what is in each tag’s section. I also list the blog articles other tags along side each article as you contemplated in your Post Script. I call this approach the Perfectionist because I can design my tagging system anyway I choose. I can surface any combination of images, text, headlines, video. and audio. I also have aesthetic design control over the tag buttons and results display. Sometimes I use pop-ups to display the results too. If we didn’t have Sparkle to do this visually we would have to hand code.

On sites where I only need text, and/or the client doesn’t have a Perfectionist budget, I use Sparkle’s search function. I insert a Sparkle search field and enter my tag name as pre-filled content in the search input box. I then take the search activation button, reduce its opacity to zero and slide on top of the search input field. Not only is this approach low cost, but extremely fast and efficient (one hand one thumb) on phones.

Tagging is not well understood by most people. Tagging is a hybrid of a menu system and search. It’s called Keyword in photography and video. A database is not required for a basic tagging system if the web host has PHP for the site. If using Sparkle’s search function, PHP is already in use. Tagging in its basic form is an index script in PHP. Other than some Wordpress and other CMS sites, tagging is not widely used across the web, yet.

This is going to change with the upcoming releases of macOS Monterey and iPadOS/iPhoneOS. Apple is implementing a new cross-device, system-wide tagging system that will make Finder, Spotlight, and the iPadOS/iOS file system much better. Developers will be able to use new API’s in their Apps to use this new tagging system. See the preview of Quicknote and the Reminders apps for a hint of how it works. This new tagging system will also be utilized by Safari. Once users get used to tagging as they do in social apps such as Twitter and Instagram, it will become far more valuable across the web.

Thanks @thetravelhikelife. Good stuff.

Taking the Apple tagging tangent further, I’ve been a Leap user for years.

You are a good thinker!

As a Creative Director for hire and Content Creator I can’t imagine how I would organize personal and client assets and projects without tags. I do not have a single folder on my devices. Every file is tagged.

When I bring a new client on board, showing them how to organize by tags is one of my first tasks. It starts with workflow and ends with user experience. The science of why tagging works so well is easy. The art of designing tags that add value and don’t disrupt the user experience is where the hard work lies.

I should also mention that tagging isn’t always the right solution.

Most small and new websites gain more benefit from inter-article linking than tags. For blogs this is where one article spawns several others that expand topics. Search engines reward inter-article links more than tags, if at all.

New websites, and those without past analytics, need time to establish a pattern of user flow to understand which tags are valuable.

Thanks for the insight. I agree with most of what you are saying - especially the comment on the “art of designing tags”. My wife may question whether I am “a good thinker” though. :blush:

The issue I have with search as an option to tags is assuming the visitor knows what to search for. In a world full of people way smarter than me, I seek not to be smarter but more intelligent. The difference?..Smart people know answers to questions. Intelligent people know what questions to ask. Google search is one of the smartest entities around. However, one must be intelligent to know what to put in that simple blank box.