I have started a CMS website for my Architecture firm. I would like for anyone in my firm to create a project that would propagate on the website. I have set up what I believe to be a solid flow, but I am having difficulties with Project Photos.
Not every project will have the same amount of photos, but there are 6 photo fields that they can upload to. I don’t really know how to display them on the project page template. If I set them up in a tab widget (with 6 tabs), and a project only has 4 photos, tab 5 and 6 remain and are just blank. I would like the tabs to be center, so this creates a aesthetic centering issue beyond the clickable issue.
Does anyone know a work around or some design suggestions for this or are widgets out for this.
Here is my public share link: LINK
Here is my published site: LINK
Variable amount of items + nicely centered: all of this sounds like a call for Flexbox. It will be easy to create your centered line of items. Now you have to find a way to recreate the Tab behavior, or rather, a mini gallery behavior because that’s what you’re “hacking” the tab widget to be.
I can see a solution where on each click of an item it displays a position:absolute bigger version of the image. Eeach click could trigg an order to hide all those bigger version before showing the right one so you don’t have to deal with overlaps. You can work your structure so that the order to hide hide all the big version (same class) and the order to show is limited on sibling or children.
If you wouldn’t mind looking at my solution and seeing if this is the most efficient way of doing this. Regardless, how it is seems to work flawlessly.
The other thing that you might be able to help with is how I could have a hover effect on the thumbnails within a no overflow container, but not throw off the centering if thumbnail 3-6 aren’t there. I figure the no overflow container would stay there even if the thumbnail inside it doesn’t exist.
Here is my public share link: LINK
Here is my published site: LINK