Context Free Forums and Gallery

I am replacing the old-school PHP code for the gallery with the new hotness: Python for the back-end and Elm for the front-end. Please respond to this thread with any issues you have noticed or features that you would like to see.

The new gallery is called Gallery II in the navigation bar. The old gallery is still there under the Gallery link.

I have also increased the type size for the whole site to 16px, which is the industry standard.

Seems nice.
- The infinite scroll is nicer than paging. What is it like if it auto-loads at the bottom like google images?
- When going from tag page, scroll down, click on a tag. Browser: back. No longer at same point in tag list. Is it browser issue? In firefox, Gallery and Gallery II behave differently here.
- On a design page, the "translate" button non longer appears on v2 designs.
- Haven't tested upload form - next time I want to upload I'll try it.
That's all I can think of just now.

- Likes/votes on a design: no longer "click to show". Don't care either way on this.

Thanks for checking it out @kipling. The likes/votes changes are intended to encouraging more engagement. I'm hoping people will think of them as similar to social media "likes", rather than as "this is my curated list of the very best designs".

Removing the Translate button was made because I'm thinking of adding syntax translation to Context Free itself. So I didn't feel like reimplementing the translator in Python or Elm. I could just keep it as a stand-alone PHP file.

The issue with scroll position when transitioning tag list -> design list -> tag list happens in Chrome too. Browsers have a hard time managing scroll position history in single page applications. In Gallery I the tag list is static html that is fully present and page load. In Gallery II the actual tag list isn't populated until after page load.

I didn't do auto-load on the infinite scroll due to personal preference. I could make it so that double-clicking the down-arrow engages auto-load. There would need to be a tool tip so that people know to double-click.

Uploads seem to be broken. Use Gallery I for uploads until I figure it out.

ETA: I think it's working now.

It looks great so far!

I like the new image loading instead of 'pages' and I second the idea of having the next set loading when you reach the bottom.

I think it would be nice if the thumbnails were larger. Maybe change the display to only 3 columns.

Perhaps when you click on an image it could expand the image within existing gallery and show some controls instead of bringing you through to a new page immediately. Would save the user having to click 'back' when examining images.

Thanks for keeping the CFA community developing!

I'm working on the auto-loading list idea. There is no DOM event for this so you have to check periodically if the user has scrolled to the bottom.

I can make a second grid view that uses the 300 pixel thumbnails. It will be a 'Medium' display size.

I liked your idea of making designs open within the design list, instead of into a new page. It simplifies the code for the site too. When you open a design there is a close button at the top and left and right buttons for opening the previous and following designs in the list.

I created a medium display size that uses larger thumbnails. You can select it using the Display-size controls on the left side of the gallery web page. Also, I found that I was still using the version 2 translation feature of the old gallery, so I ported it to the new gallery. I will probably take the old gallery down soon.

The gallery now automatically loads new designs when you scroll to the bottom of the list. Let me know if this does anything weird.

The functionality to open within the list is nice (≈ google images) but it breaks my muscle memory. I find I am using a "back" action (button, swipe, keystroke) to close the design, which takes me off the list page. I think the fact that this is opened within the context of the list is lost, in that the rest of the list has disappeared off the top and bottom of the displayed page. Not sure of a solution, though. Can you catch history.back() and turn it into a close current design view? Can you display more visual feedback to what has happened?
The auto-infinite-list magic: bravo. :-)

I agree, the back button should work that way.

Cool great work!

I like that the most popular designs are highlighted again but I feel the newest designs are somewhat buried from sight now.

Maybe it could show the top 8 most popular designs and then a button beside those saying 'Browse all the most popular designs' that will take you to the gallery sorted by popularity.

Then under that it could show the 8 newest designs with a button saying 'Browse all the latest designs' that sorts the gallery according to newest.

I agree that showing only the popular designs leaves me wanting to know if there is anything new. There is a tension between wanting to show new visitors to the gallery the best of what we have and wanting to show returning gallery visitors the new stuff. I could do a side-by-side list of new designs and popular designs.

Or I can track the most recent design that a given logged-in user has seen and give them a combined view if there are newer designs.

Regarding recent, popular, etc on landing page - maybe take inspiration from youtube.
Landing page has several horizontal lists (new, popular, random, <username>'s) each with a small number of design tiles (ideally however many will fit on a line for current screen width) and then a link such as "More popular designs .."
If it is easy to implement, logged in users could have a preferred home page: Default gallery landing page, any of the list pages, own designs, ¿last page viewed?

(OK this is essentially flembob's suggestion - there is nothing original in this world!)