Ideally I would like to just implement the design the designer has given me — that is simple text links that just say “previous project” and “next project”.
I can adapt the Finsweet code to just give me the project name (instead of “previous project” and “next project”) but I cannot get the previous to left-justify and the next to right-justify. It seems they both have to be aligned the same.
I hadn’t expected next / previous to be so complicated in Webflow.
Whilst there isn’t a Webflow-simple way of doing this just yet, there’s a great write-up on how to achieve Previous and Next buttons on collection pages with a teency bit of custom code.
I’ve used this on a few projects and I believe it does what you’re asking for.
We are working on new solutions for CMS Previous Next, for now we have a workaround to make it work. I created this solution for you and added to our Attributes Combos Cloneable.
Hey Eve, I appreciate that you are working on a new version but it doesn’t seem that the new version is solving the problems I have with the current version.
I would like the links to say “next project” and “previous project” rather than uses elements from the project itself
I would like to have the links left-justified and right-justified respectively rather than both justified the same.
I have implemented the “current” Finsweet solution here.
Ideally I would be able to solve both gaps above, but let’s just say I was good with using the project name (instead of “previous project” and “next project”). Is there a way to simulate left-justification and right-justification using this method?
I am having difficulty figuring a way to do this because both “buttons” are being drawn from a list with consistent formatting.
If your new version solves one or both of these problems, I apologize. Please let me know.
Thank you - that does appear to be what I would like to do.
I cloned the project but I am having trouble figuring out how you did it.
When I used the other Finsweet “next - previous” solution, I could edit the “full” (vs empty) state of the buttons in a hidden collection list lower down. However, I cannot see where you are drawing these full state presentations from.
There are two hidden collection lists lower down (I thought maybe one for next and one for previous) but they appear to be categories, not buttons.
Also, in the other Finsweet solution I needed to embed code, but I don’t see any embedded code here.
Sorry, just a bit confused. Very thankful for any help.
I am pretty sure I did what you said and it looks like a great start. If I understand correctly, this is exactly what I had been hoping for.
However, I am just getting the text blocks with no link. Now I am still including the embed for the other Finsweet solution. Should I switch it to a different embed for this one? If so, where do I find the code for the embed?
Thank you, Eve. That certainly did something and I can navigate through the projects now but there are a couple of problems.
One, I still get a link for next / previous when there isn’t one. I expected something like that because I know we haven’t dealt with the “empty” state yet.
Also, the actual text “next project” and “previous project” are not the links but the empty space just before / after them — so something is not quite right there either.
Hi @williamb please check the build I shared with you and try to replicate the structures/attributes. I shouldn’t be that difficult. If you go step by step you will be able to make it work.
Hi @evekayser The problem with the next link seems to be because I have added a utility class to right-justify the block. When I remove that, the link itself is active rather than the space to the left of it.
Thank you, Eve. I have made the suggested changes, but the behaviour remains the same. Is it possible I just cannot add the utility class to right-justify “next project”?
No, that wasn’t it. I removed the utility class and and right justified the text block (with it’s own utility class). I had hoped that would fix it but the behaviour is still the same.
Looking at the source code, the text and the link seem to be coming up as separate, overlapping but not nested objects.
Hey Eve, I got the “next project” button to work (mostly) even right justified. I added right justification to the block above it. Oddly, that didn’t seem to change the class for that block otherwise “previous project” would also be right justified… but I am not worried about that.
For some reason the link is only associated with “next pro” and the “ject” does not seem to be active. If anyone can figure out why that is happening, it would be awesome.
The next thing is to add the empty states. I tried mimicking what was done in the example, but I ended up getting both the “next” (non-empty) and the “next-empty” state showing at the same time when only “empty” should be showing. I backed that out because it wasn’t working anyway and I was worried it might be muddying the waters with the “half-link” issue above.
I would greatly appreciate it if anyone could help with either issue:
the half-link on “next project” or
how to add empty states to next and previous (ideally I would show nothing if there was no next or no previous project)
