Forum Discussion

Lindsey's avatar
Lindsey
Leader
6 years ago

How to make the short title the primary display?

I need to make the long title in lower case because that is the title appearing in the url, and I need the url to be in lowercase. Can I then make the short title in regular casing and have that one ...
  • cike's avatar
    6 years ago

    Hi Lindsey ,

    the title is displayed by a Lithium  component (common.widget.page-title). Unfortunately, this component do not offer any configuration options to switch between long and short title.

    But you can replace the Lithium default component with a custom component, which uses the Freemarker context object coreNode to display the short title:

    ...
    <h1>
      ${coreNode.shortTitle}
    </h1>
    ...

    To check where Lithium's default title component is used, you can use the component browser from the Studio:

     

     

    Best regards,

    Christian

  • ClaudiusH's avatar
    6 years ago

    Another visual workaround would be writing the long title in lower case and then use CSS text-transform: capitalize to ensure the display on the page title is capitalized. Keep in mind that this will only be a visual difference. If some content consumers (search engines, rich page previews) rely on proper capitalization they would still show it lowercase.

    Out of curiosity: What is forcing you to have the URL all lowercase?

  • luk's avatar
    6 years ago

    Lindsey or instead of creating a completely new custom component, you can simply override the existing one with your own version (e.g. you do not have to change very single quilt where the original/standard component is used, which are probably A LOT for something like page-title...), you just create a new component with the name common.widget.page-title@override (exactly like that, same name as the original, add @override at the end), then you can output whatever HTML you like in place of the original output, so going with cike 's example, you would simply add:

    <h1>
        ${coreNode.shortTitle}
    </h1>

    if you're not sure what the actual output of the original component is and you do not want to risk breaking your site, you can simply replace the the text within the original code with a bit more work:

    <#assign markup>
        <#-- outputs the original code -->
        <@delegate />
    </#assign>
    
    ${markup?replace(coreNode.title, coreNode.shortTitle)}