0 votes

ourHtagEditor

H-tag editor is a simple property editor that lets the editor pick a desired heading size (H1 down to H6) and  the text-alignment (left, center or right). Perfect for use in a Block Editor, where the editor can place the block in different combinations and letting them control the h-tag type.


Installation

Install ourHtagEditor via NuGet: Install-Package ourHtagEditor.
After restarting your site, you'll be able to create a new data type that uses the Headline property editor.

 

Using the Tag Helper

Browse to /Views/_ViewImports.cshtml in your Umbraco project and add the following line at the bottom

@addTagHelper *, OurHtagEditor

This will make it possible to use the following in your views:

<headline htag="@Model.Headline" />

Depending on your chosen settings on the property editor, it could render:

<h2 style="text-align: left;">This is my nice headline</h2>

The tag helper accepts the attributes class and link.
The link attribute accepts the model Link, coming from the Multi URL Picker.

Using both attributes could look like this:

<headline htag="@Model.Headline" class="css-class" link="@Model.Link" />

Which will render:

<a href="https://umbraco.com/" title="Visit Umbraco.com" target="_blank" rel="noopener">
    <h2 style="text-align: left;" class="css-class">This is my nice headline</h2>
</a>

Screenshots

NuGet install instructions for Umbraco 9+

dotnet add package ourHtagEditor

Package owner

Søren Mastrup

Søren Mastrup

Søren has 563 karma points

Package Compatibility

This package is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco Cloud
Version 8.18.x (untested)

You must login before you can report on package compatibility.

Previously reported to work on versions:

Package Information

  • Package owner: Søren Mastrup
  • Created: 12/08/2022
  • Current version 2.0.1
  • License MIT
  • Downloads on Our: 0
  • Downloads on NuGet: 3.9K
  • Total downloads : 3.9K