CMS Preview Next and New Random Buttons

Wanted a random button - added to default - you can turn it off in the inspector - just a fun way for a visitor to explore cms content

Hope you like it :slight_smile:
-mike

Live for preview:

Just a side note: when I made OneSongEveryDay.com
I had wanted to have each on a separate page and previous next and random buttons in 2007 - but at that time it was beyond my knowledge and web skills - not to mention doing a song per day left little time for web development… it was originally one long page with mp3 link at end of song explanation…

So I’m grateful to Realmac for finally 19 years later getting what I wanted in 2007 :slight_smile:

Hi @MichaelDroste. I suppose this is the next version of your Prev/Next Dev Pack, with a Random Button added? It’s a nice addition indeed. I use an older version without ā€œRandomā€ and I like it. :grinning_face: On my homepage I show the most recent posts. I filter the collection by ā€œFeaturedā€, although I would prefer filtering by date. But anyhow, your buttons work exactly as you would expect. No not featured posts are shown.

But I’ve also got a page where I show only posts with the same tag. I misuse tags, because categories still don’t seem to have any function in Elements. So I filter the collection by tag. In this case the Prev/Next button doesn’t take the filtering by tag in account. Readers also view posts beyond the category (tag) they want. Any chance you might make filtering by tag possible too?

An option:
create a new frontmatter
Featured - true / false

When you want to feature a post change to true

Here’s the tricky part

Create a SECOND ā€˜template’ above your first one - this is for Featured Posts ONLY

I’ll post a picture when I get to the computer…

I wanted seasonal songs on top for Christmas and other events at WindyTown.com

Also take a look at my search engine on WindyTown.com I think it’s what you want…

I’m grateful for all your help. I’m using the featured frontmatter already. I’m using this to distinguish between newer and older posts, because filtering by date is impossible. On my homepage I only show the featured posts.

Other pages are dedicated to posts with a specific tag. There I want to show both featured and non featured posts, but only posts with that tag. Filtering by tag works as expected on these pages. But when I view a post page the previous/next button doesn’t stay within the range of the filtered posts.

I’m starting to understand what you write, but don’t understand what you mean by ā€œa SECOND ā€˜template’ above the first oneā€. Could you explain this further? I looked at Windy Town. I think you’re right about your search engine. In stead of a table I use cards on the main page.

Maybe you can take a look? The page is in Dutch: https://thuismonnik.nl/weblog/. If you scroll down you see the cards. Choose the card called ā€œGebedā€. It will take you to this page: https://thuismonnik.nl/weblog/gebed/. This is the page with the collection filtered by tag. As you see there are only three posts with tag ā€œgebedā€. I show these posts on a post page which used to show only a leftwards back arrow. I would like to replace this with your previous/next button. I added your button for now, so you can see that it shows posts out of range.

I hope this helps clearing my problem and of course I hope, that you have a wonderful solution. :wink:

(2) collections from Elements

(1) Featured Only Collection

(2) Regular usage Collection

Stack them on top of each other - featured first then regular

When you turn on featured - it will show up on top!

(See my picture above)

I’d change your layout in mobile

I’m afraid I still don’t get it. But I’m heading in another direction now using the Search component. Your search engine on WindyTown.com looks indeed like the right path to choose, or maybe the upcoming Tag list component.

Can I ask you something about your search list implementation? I realize it may be a lot to ask from you.

  1. How did you manage to transform the results in working links? Do I have to do all the coding described in the Pretty URL section of the CMS documentation? Because, if so, I’m afraid that is too complicated for me.
  2. I want to search for posts with a specific tag. So the search engine should look at the tags only. This seems to be the same as the searching by genre which you implemented. How did you do that? In my case the tag could also be a word I use in the body of certain posts.
  3. You provide a list of clickable music genres which then become the search term for the Search component. How did you implement that? Coding?

Unfortunately your prev/next button in combination with the search list has got the same problem I described in my first post on this topic. They reach beyond the selected titles from the search results. I searched for Jazz titles, found three trilogies, but on the page with Trilogy 3 the Next button still works and brings me to She’s got the Looks.

This is how I did it - Claude came up with the code

It’s like a link but different - select plain text and add #

LOOK at the picture and set it EXACTLY the same

CHANGE value=ā€˜pop/rock’ ---- pop/rock to your content name FOR EACH SEARCH TERM

document.getElementById('genre-search').querySelector('input').value='pop/rock'; document.getElementById('genre-search').querySelector('input').dispatchEvent(new Event('input',{bubbles:true}))