Feature request: more handy prefab elements with specific functionalities

[JvP]

Thinking of useful stuff that the vast majority of sites could use regardless of the type of site. You could build something on an individual basis with custom elements but I believe the following should be native so everyone can benefit.

• Table of contents element that automatically populates. Inspired by your very own implementation on the blog.
• Page scroll progress indicator. @DoncoMarketing made one but why not make it native?
• Estimated reading time with a customizable formula (it should take images into account and such)

I had these in mind for some time. No doubt there’s more like this that could be done. Does anyone have good ideas to add to the list?

[quentosity]

I imagine the talks of AI this being integrated with either vetted users or vetted database say connected to forum for solutions for importing like a template. That way we get a lot more solutions prebuilt continuous new ones and then maybe if when these are imported they are tagged a certain way so that if say there is a pro theme update that then that element / template gets updated to fix bug or work more optimally we get a separate screen for optionally importing the updates just the difference between or can import as new if we worry might break changes we have made.

[spedney]

I’m think it would be nice to add the possibility to have these settings with the option to change them according to screen size / break points. For example have a different background image which is better suited to mobile vs desktop - and also to set position and some of the other options separately…

[deranaloge]

that is really needed! +10000 from me

[urchindesign]

+1 for me on this one. I generally need to add custom CSS for this on nearly every build. Never understood why it isn’t built in natively.

[charlie]

Love the ideas everybody

Table of contents element That’s an interesting idea. Sounds a little complicated since you would need to know what elements create those, or just go based of the labels of top level elements like Sections. I can think on this some more.
Page scroll progress indicator I layout more ideas here Feature request: options for :hover, :active, :focus pseudo-classes For interaction based styling. A step forward we could setup a CSS variable that tracks the page percentage and create a prefab for everybody that has this setup in an element.
Estimated reading time With changes coming to Dynamic Content in Pro 6.5 we can easily do this. I’ll make sure there is something setup for this at launch.

Yes we are looking at getting template sharing and importing between sites as a smoother process. Not sure if this will remain true, but it will probably come before the AI additions.

Regarding the background layers, we are planing on releasing a ‘srcset’ feature soon for the <img/> layer type, but after that we can look converting those fields to use the breakpoint system. I know those fields are generated through the style tag, so it might take a little longer then the srcset changes.

[spedney]

When I think about image optimising for mobile, for me it’s not just about having a smaller resolution version of the same image for efficient loading, but having a different image altogether (or the same one, but cropped / composed differently)

[JvP]

Nice! Thanks for considering these ideas and even getting some in soon

@charlie

Table of contents element That’s an interesting idea. Sounds a little complicated since you would need to know what elements create those, or just go based of the labels of top level elements like Sections. I can think on this some more.

Perhaps there could be a user choice for which elements should be targeted, sections or headlines for example. There could also be an option to exclude some of them by class or ID. Sounds like more of a unique Element then.

@charlie

we could setup a CSS variable that tracks the page percentage and create a prefab for everybody that has this setup in an element.

Sweet!

@charlie

With changes coming to Dynamic Content in Pro 6.5 we can easily do this. I’ll make sure there is something setup for this at launch.

Thank you

Regarding the image ideas from @spedney, I agree with him that some built in cropping / focal point feature in addition to the other changes would be nice. It would bring more native design control.

[JvP]

Thanks everyone for jumping in with your ideas. Keep 'em coming!

[urchindesign]

@JvP

Regarding the image ideas from @spedney, I agree with him that some built in cropping / focal point feature in addition to the other changes would be nice. It would bring more native design control.

We don’t really need this. If you have the ability to choose different images you would crop the image in Photoshop or your preferred image editing tool and simply upload it and select it for the given break point.

This is what I do but then I need to add the images with custom CSS.

[JvP]

If it could be done in Cornerstone with a single image then you wouldn’t have to bother with editing the image in Photoshop or another tool for the various breakpoints. It removes friction and streamlines the workflow in Cornerstone. In the past Themeco have expressed their desire to make Cornerstone “Photoshop-in-the-browser” and the proposed image features would fit right in

In our ongoing commitment toward making “Photoshop-in-the-browser” a reality…
https://theme.co/docs/effects-module#mask-intro

[urchindesign]

I get you. That sounds more like an endeavour.

Perhaps round 1 we just get the responsive settings on background images and round 2 we go fancy with built cropping and focal point selection etc.

I often use a completely different design on the mobile image so responsive settings would be more useful but I can see how in certain scenarios this would be helpful.

[charlie]

Appreciate the thoughts. I’m inclined to release an “Attachement Srcset” toggle control first which would purely work for attachments just so we can get our foot in the door for srcsets. From there we could go onto release a srcset creator and then breakpoint controls for the background layer controls. Frankly there’s a lot of hardcoded stuff when it comes to the background layers that I have to clean up, but we’ll eventually get there on the best controls we can offer you all. Have a great day everybody.

[spedney]

Speaking of background layers (and in danger of going off topic!) I was playing with a design last week for my wife’s site where I’m using background images with position set to fixed. It works ok, but on mobile it does a weird thing when scrolling up/down the Safari address bar disappears but it takes like a second for the background image to be re-drawn. If you look at the bottom of the screen you’ll see what I mean:
Video clip: here
Actual website: https://www.desiredfocus.com/blog/the-40-over-40-project-join-us/

It’s not a big deal, but something I couldn’t figure out myself and I bet you more advanced people would know why straight away!

[mircotripoczky]

@charlie

Table of contents element That’s an interesting idea. Sounds a little complicated since you would need to know what elements create those, or just go based of the labels of top level elements like Sections. I can think on this some more.

Currently I use a plugin (Joli TOC) to have a TOC on certain pages and it works well when adding the plugins shortcode to these pages. By my understanding it parses the page and creates a <li></li> for every H1 and/or H2, H3, H4, H5 or H6 including anchors it finds. It’s also possible to include/exclude certain headings or headings with specific classes. Maybe that could be an approach for a cornerstone element.

best regards
Mirco

[charlie]

@spedney I’m not sure if this will work, but it might be from the usage of 100vh. In this code if you use var(--app-height) instead. From what I read it does that lazy redraw to speed up performance. There’s also more info here. https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

const appHeight = () => document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`)
window.addEventListener('resize', appHeight)
appHeight()

Appreciate the example of the TOC plugin. Still need to think on it. It would be nice to have a looper based approach, or even an element based approach that would recursively loop internally.

[spedney]

Thanks Charlie! I’ll try it next week when I’m back at work. I think I remember using 100 lvh instead of just vh but can’t be sure. Appreciate your help so much!

[spedney]

Didn’t work sadly, still doing the “lazy redraw” thing

[spedney]

After analysing another site that has the same style,I noticed they were using this on the fixed position surrounding div. It seemed a bit weird that it would be there so I tried it and it seems to work! Weird but great that it fixes the issue @charlie
left: 50%;
transform: translateX(-50%) translateZ(0);

[JvP]

Hey Charlie, do you think it’s possible to get the prefabs for the scroll progress indicator and estimated reading time in this beta cycle?

Now with Twig we have a readtime option but it just assumes 200 words per minute. For the most accurate calculation you must be able to adjust that and factor in any images that may be in the content as well.