Feature request: more handy prefab elements with specific functionalities

Beta
#1

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?

4 Likes
#2

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.

1 Like
#3

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ā€¦

Screenshot 2024-04-04 at 09.42.18
Screenshot 2024-04-04 at 09.42.18292Ɨ663 39.9 KB

5 Likes
#4

that is really needed! +10000 from me :wink:

1 Like
#5

+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.

1 Like
#6

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.

2 Likes
#7

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)

4 Likes
#8

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

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.

Sweet!

Thank you :grinning:

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.

1 Like
#9

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

#10

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.

#11

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 :smiley:

In our ongoing commitment toward making ā€œPhotoshop-in-the-browserā€ a realityā€¦
https://theme.co/docs/effects-module#mask-intro

1 Like
#12

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.

#13

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.

#14

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!

#15

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

2 Likes
#16

@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.

#17

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!

1 Like
#18

Didnā€™t work sadly, still doing the ā€œlazy redrawā€ thing

#19

After analysing another site I noticed they were using this on the fixed position div. I tried it and it seems to work!
left: 50%;
transform: translateX(-50%) translateZ(0);