Common/shared layout questions

[abettermap]

we've got a few things that are allowed on every page, post, and custom post type (except /languages and /projects landings):

1. custom excerpt (not set up yet)
2. youtube playlist
3. auto-generated nav/grid/list of child items (for pages only. not set up yet)
4. Editor content

i know most scenarios won't involve ALL of those, but what's a good order for them? this seems ok:

1 - Hero

1. obviously title first
2. subtitle if there is one, e.g. endo or date
3. custom excerpt

2 - Pre-content

the 'tweener space before the meat w/the white bg begins, e.g. the years chips on /latest

1. youtube playlist

3 - content

(the meat w/the white bg)

1. nav/grid/list if it's a page and there are child items
2. Editor content

Example

not sure all 4 of the "things" in my first para would ever happen but here title + playlist + content at least:

Pages w/children

i think this really comes down to one question: Editor content first, then the nav/list? or vice versa? i think vice versa seems legit.

i know we'll raise the question again of "well it depends how the nav/list is laid out", but for sake of simplicity let's just say like the posts list in /latest. if we want cards, cool, but let's just pick one or the other (cards or plain list, e.g. like /latest).

[abettermap]

@rperlin-ela make sense? thoughts?

[rperlin-ela]

Sounds good— I like the sound of that order and the nav/list first on the pages w/children

On May 18, 2021, at 12:05 PM, Jason Lampel @.***> wrote:

@rperlin-ela https://github.com/rperlin-ela make sense? thoughts?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Endangered-Language-Alliance/ela-website/issues/14#issuecomment-843305321, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5FM2IKFBAI5CFDBWGTTOKF5XANCNFSM45C2PYTQ.

[abettermap]

super, consider it done (it is). got some new questions:

child order

i assume for landing parents you'll want control over the child list items' order rather than the default sort (which appears to be newest first) or alphabetical? we're currently coming in like this for Arts & Culture:

if so, we'll want to rely on the built-in WP Order field under Quick Edit. you mentioned this was confusing in the current site but i think that's because it wasn't straightforward what it affected, if anything? well for the new site it affects... the landing child order. :) i'll have to sort it in JS but that's fine. if you want default order though let me know and i'll hold off.

it's this field for clarification:

Custom excerpts

i decided to only add this to Pages, not posts or custom posts since they already have a built-in Excerpt. so how's this?

which i can use for the hero:

does that give you enough flexibility? seems to cover all the Heroic bases.

[abettermap]

oh and if it doesn't go without saying, Pages need their Custom Excerpt to be populated if you want it to be shown in the landings w/children (see how Unheard Of is populated in my screenshot). i don't want to lean on Editor for that because it's a LOT of data to bring in just for the sake of picking up the first few hundred chars.

speaking of char limit, i set it to 255 for the Custom Excerpt. if you want it longer let me know but i'd like to limit it so i have something predictable to work with (WP's default is 55 words before Read More is triggered, but stripped out its "Read More" links since i'd rather have control over that, although the ... is still at the end for now).

although, if we're using Custom Excerpt for lists/cards AND hero, maybe you'll want it longer? would go in the same vein as Background on the lang instances.

speaking of those, should i use Background instead of Excerpt for lang landing and projects landing? do you see a use for Excerpt on Language? i would prefer to use Excerpt in addition to BG since it would be nice to stay consistent, even if it's redundant with bg. reason being, using Background instead of Excerpt would mean three different ways excerpt-ness happens: Excerpt, Custom Excerpt, Background . so, i'd like to just keep it at the first two.

we'll still use BG for the Lang instance hero though.

lots going on there haha. make sense? cool?

[abettermap]

shoot, sorry, one more thing...

now that we have landing items priority established, and you've seen a rough shot of post-list style landing, which of these options seems ideal?

1. Grid of cards
2. Grid of post-list
3. ???
4. Post-list. which is what's in my screenshot above.

here is #4 again but w/super-slim dummy Custom Excerpt and Editor added, and this is the "above the fold" on my laptop:

i think whatever your choice is should at least allow for a peek at the Editor stuff below, at least on desktop. mobile users are used to scrolling.

i also don't know how many max pages to expect in the list, so that will affect the layout as well.

#3 = open to ideas

[abettermap]

whatever layout format we use, i'm going to cap it at two total layouts for post-listy grid things like this. too much to code more, so let's pick two layouts that we can reuse for:

1. /latest and /latest/:year landings
2. any Page landing
3. maybe Projects and Langs landings. but if it doesn't look good in there (next to map or below it), i'm semi-open to a third layout, but i feel like one of the 2 should work.
4. maybe the featured's and recents list on Home. i know that whole page is so up in the air still, but again one of the two or a combo of the two (e.g. grid list for featureds, post-listy list for recents) seems ok.

i'm willing to do a third layout for #4's Featureds perhaps, since that is a pretty spesh showcasey thing. and maybe that could be reused on Page landings? or more likely, /latest and /latest/year since those are more likely to have feat img's?

yeah let's do that. 2.5 layouts:

1. grid of cards for Home, and /latest and /latest/year landings
2. gridded boring-er post-listy list, or full-width list of post-listy list (like we currently have for /latest)
3. Projects and Langs landings should be able to reuse one of those or a hybrid of them

[abettermap]

gahhh sorry man, i know you're getting GH-pummeled!

i never answered your question on this:

i thought the good slugs were auto-generated but maybe not. yes though, definitely want good hyphenated slugs since they're easier to read, consistent w/the rest of wp, and give me something to work with for a breadcrumbs hack.

i changed the arts one to arts-and-culture for you

[rperlin-ela]

Looks good what you did with the Custom Excerpt.

For child order, it's good if I can control as long as it really and clearly affects. I can test it out.

[rperlin-ela]

I can't tell exactly how far 255 will get me, but I think I can work with that kind of character limit.

Understood about using only Excerpt or Custom Excerpt for consistency (better yet if they could both be called Excerpt!), so I'll figure out how to handle

[rperlin-ela]

In terms of landing layout, I trust the J. Your option 4 looks decent, tho probably in my mind's eye it was some kind of grid (maybe of cards) in the sense that I thought that might allow like 3 items per row or something. But maybe it doesn't work that way. My only fear, as you say, is that with something too listy items further down won't get seen. So in that sense anything more nav-y (in the sense of horizontal) appeals, but maybe that's not realistic. I don't imagine more than 8 items for any of these. Hope that all makes sense.

[rperlin-ela]

2.5 it is. I can't totally picture it all, but I'm sure you'll pull off something good. Let me know if you want to slot in a zoom for Wed or Fri.

[abettermap]

Sounds good on the ordering thing, although that's definitely not ready yet.

Are you OK with using excerpt for the language instance hero summary as well? Or are you set on using background for it? If background then that means I have to figure out a Read More expanding link/button JUST for language instance heroes since that's the only scenario that has infinite length potential for the hero summary, while all the other pages use excerpt and I can predict how to style it. Read More is reallllly tricky so I'd love to avoid it and spend time improving other stuff.

Another argument for not using background or any infinite length stuff for the hero summary is that the Read more when clicked pushes the rest of the content down in the page. We kind of got away with it in the language map because the layout is much narrower and the stuff to show below it is small. But with the website we're doing now a lot of the content below it is big and the width of the layout varies a lot more than the panels in the language map.

In case it's not clear how background would be used in language instance, it would just go back where it was as the first thing in the tabs.

I renamed the custom excerpt text to just excerpt.

In addition to the child ordering, what if I gave you a field for pages like a featured/promoted checkbox that let you control the card's width on the page landing pages? Then we could do a grid that allows two or three items per row, but the featured/promoted item would occupy the full width of it. I have some ideas that could expand on that but I don't want to make it overly complicated, so let's start with a featured checkbox. Presumably it would only be used to control the first row but there's no reason you couldn't use it on more.

Sorry this stuff is all super visual but Comcast is down so I'm just suggesting all this from my phone unfortunately. Internet is supposed to be down for like three hours. Booooo

For the languages landing page I think we could get away with more card-like grid layouts if we made the map full width instead of alongside the list.

Zoom tomorrow sounds great, I am available except for an appointment from roughly 6 to 8pm Eastern