Dnn.platform: Character Count for SEO Page Titles and Description

[skramio]

Would be great to have a live character counter at the end of the page title and description fields that corresponds with the recommended max length. The counter could be green when the user has less than the max and red once they've gone over.

[thabaum]

I have created javascript that does this. Looking for how to put it into the platform.

Looking at putting the counters above the text box areas next to the help icons.

[thabaum]

I have spent some time today looking at how this all stacks together... what a mind full getting personaBar trying to add JS script to it... There is no place like home, and I am far from there looking at this.

My Current Current Tree Fork-Patch 16

I added a couple language variables for Characters and Characters Remaining for some future work.

I am thinking of TITLE : HELP : COUNTER with the text area below as it is.

So looking at my changes in Javascript and the JSX file (first time there) I am hoping I am able to add "id" to some labels to pass the colored number to.

Is there a fast way I can test this such as just putting these edited files in an installation running?

Pretty much all the logic is there just need to link it all together... I just need to know if I am on the right track. I wish I had a better testing environment. I added ID's to the fields but may be off in the wrong direction here...

Thank you all for your support!

[Timo-Breumelhof]

I would add the counter behind the Title, wrap the counter in a span and add a class, so users can hide this effect if they want, by overruling the CSS.
(like for an intranet where it's not really relevant)

[thabaum]

@Timo-Breumelhof thanks for the input. I just wish I could get some silly questions answered quickly so I can not have to do things twice. But live and learn I need the practice on the other hand... I also like the idea of turning things on/off which could be a part of the documentation.

This is getting long winded here so I apologize and I put up a link DNN Forum Discussion on SEO Character Count for Issue #3342

This is probably where all my thoughts here should and will go in the future. I am going to reference anything I may work on in the forum for a deeper discussion.

I was going to put it in a span, that was my original idea, I am looking at the code wondering what is ok to do/not to do. Please verify I can use a span in the JSX file and I will...

React Docs I just found this today, I will take a look at it and then I can put some final ideas to it.

One thing I wanted to maybe try was putting some sort of bar that goes across the top using the remaining space that turns colors... something fun :), but I know that is a bit much. Really just a number that changes colors would be awesome.

So like I said any feedback to help get community support for the PR is great thank you!

so after label i was originally going to put
<span id="siteTitleCounter" class="site-title-counter"></span>
Wouldn't an ID make it select-able in CSS? I have set an id for the labels created set but the span I can put a class to make it easier to set as well like above. This makes sense to me as well. These forms are pretty code bound so you really have to dig to find things.

I did put an ID class for selecting the new labels but I am all for adding a CSS class and changing it to a SPAN. I am just feeling things out and trying to understand what would work the best.

This is nearly my first time working with javascript let alone DNN. I generally just go for code already created thinking the best is already done why reinvent the wheel. But now I see there are so many different types of wheels all for different vehicles.

I didnt see any DIV or SPAN in the file let so I didn't want to do something undesired. It is a JSX file so I need to learn more about those...

Let me know what you guys want I will do my best to make it happen. I am just looking at how things are grouped up.

Also this is just for Site Settings, it is an admin option. Should not bother anyone too much but if it does I like being able to style/hide it if you like.

[thabaum]

@Timo-Breumelhof
<span id="siteKeyWordsCount" class="site-keywords-count" <Label label={resx.get("Characters.Text") } /> />
Is this what you are thinking?

[Timo-Breumelhof]

something like that but I would add this to Titles and Description, not the keywords (nobody really uses them any more AFAIK)
I'm not sure I would use a extra label, just a span seems enough (?)

[thabaum]

the other label was for the characters but that can be put in the css.

I will look at some examples to see what wrapping the Label would do. I am not looking to shift anything around. I was just going to add the span. And the Characters.Text could be added in the JS file. Or not have any words and just a color changing number. Which I like that idea as it is the simplest, however if you want to show a user they only have so many words left I need to learn how to do this as well for DNN. Even if I don't do it in the current PR.
I can change where they are put in the form like this. And like you said maybe wrap them both in a span... I am just wondering where the number will show up in regards to the description let me try it.
I was thinking it would be best to put this after the label.
<span id="siteKeyWordsCount" class="site-keywords-count" />

to wrap a label I would wish to see the result first so let me test it if I can.

The keywords is a personal thing, and i might use it for some things in the future. They relate to the SEO so I figure they all deserve the same treatment as well.

[thabaum]

I set it like this for now as I am not sure how it will act wrapping around the Label react component

                <Label
                    tooltipMessage={resx.get("plDescription.Help") }
                    label={resx.get("plDescription") }
                 />

                <span

                    id="siteDescriptionCount"
                    class="site-description-count"

                />

could this also be written like this:

> <Label
> tooltipMessage={resx.get("plDescription.Help") }
> label={resx.get("plDescription") } >
> <span
>  id="siteDescriptionCount"
> class="site-description-count" >
> </span>
> </Label>

or could it even be like this and work:

> <Label
> tooltipMessage={resx.get("plDescription.Help") }
> label={resx.get("plDescription") } 
> >
> <span
> id="siteDescriptionCount"
> class="site-description-count"
> />
> </Label>

And I added an id to the text areas. And put the JS to handle it in the SiteSettings.js file. I am sure it can all be done there on the JSX file. This is done however maybe I could use some comments in the sitesettings.js file so you can skip over that code or create a new file or refactor to React?

Happy thanksgiving everyone taking a few days off. Hoping I can pickup where I am leaving off look forward to any feedback here or on the forums. I can adjust things as needed in whatever language. Hoping for the easy way out and a LGTM! before next version RC...

Things should be getting easier to understand and layout solutions faster. It just feels like there are too many different directions to go with the same thing it's hard to make up your mind sometimes.

[valadas]

We do have a reusable component already for that in use for the password fields when creating a new user. It has a red-yellow-green progress bar and a reusable label on the right of the fields. I shows weak, fair or strong in the password. We can re-purpose it by using: acceptable, optimal, too long, or some such, having red when very far from optimal, yellow when near optimal and green when very close to optimal...

[thabaum]

@valadas sounds like a winner. I think maybe a combination of the two so you can see how many characters as well for those trying to make sure things stay within their own set limits of a character count if needed and max characters is not defined. Maybe we could wrap that label with something similar to what this does?

I think it would be great idea to have two methods (option=remaining or option=count) that can display character count and another for characters remaining that can be included anywhere in a DNN module. I had thought of the password text area as something to work on as it would be very cool IMO. I just needed the direction to do it before I made a leap into something bigger than a changing color character counter.

We can probably just add a script that checks if maxlength > 0 then characters remaining or else character counter if that makes sense for the logic for that type of expression. Then a way to set the three different colors from an option setting as well to tell the color bar and characters when to change for each field.

As you can see from my settings in the JS I edited this is up for debate if was needed for default settings but I did a bit of research to come up with those numbers as a starting point.

[skramio]

Hi all - I was talking with Mitch today about a different item and this topic popped back into my head. Wanted to bump it accordingly.