Jump to content

Insert any HTML tag with attributes, using Hanna Code

Jonathan Lahijani

Recommended Posts

Here's a little Hanna Code snippet I wrote that allows you to insert a tag that contains any HTML element of your choice along with any attributes.  The only defined Hanna Code variables are "element" and "comment".  If you leave element empty, it will automatically use the "div" HTML element.  The "comment" variable is optional and doesn't get outputted on the frontend.  It is only for internal use and if you want to actually describe what the Hanna Code is doing.

Import these two into Hanna Code:





Now for some examples:

Example 1: Section

[[tag element="section"]]

will output...

Example 2: Section with class

[[tag element="section" class="myclass myotherclass"]]

will output...
<section class="myclass myotherclass">

Example 3: Section with id

[[tag element="section" id="myid"]]

will output...
<section id="myid">

Example 4: Section with inline styles

[[tag element="section" style="color:red"]]

will output...
<section style="color:red">

Example 5: Section with any attributes you want (data attributes for instance)

[[tag element="section" my-custom-attribute="test-value" data-something="cool"]]

will output...
<section my-custom-attribute="test-value" data-something="cool">

Example 6: Same as above with "element" not defined (defaults to "div")

[[tag my-custom-attribute="test-value" data-something="cool"]]

will output...
<div my-custom-attribute="test-value" data-something="cool">

Example 7: Same as above with "comment" set (which does not get outputted)

[[tag my-custom-attribute="test-value" data-something="cool" comment="Don't remove this line or your page will get totally messed up!"]]

will output...
<div my-custom-attribute="test-value" data-something="cool">

Example 8: Close section tag

[[end-tag element="section"]]

will output...

Example 9: Close div tag


will output...

Example with a common Bootstrap rows and columns scenario:

[[tag class="row"]]

[[tag class="col-sm-6"]]

This is the first col.

[[end-tag comment="end of first col"]]

[[tag class="col-sm-6"]]

This is the first col.

[[end-tag comment="end of second col"]]

[[end-tag comment="end of row"]]


Note the following article regarding the terms "element" and "tag": http://perfectionkills.com/tag-is-not-an-element-or-is-it/

  • Like 8
Link to comment
Share on other sites

  • 11 months later...
  • 4 years later...
  • 2 weeks later...

Just a heads-up on this,

Really strange, when using nested hannacode, each nested hannacode add 100ms to TTFB. I saw old issue on Github and a commit about nested hannacode but I ask myself if it was tested with a lot of content and something than more than 30 hannacode in the same body field.

I used RockReplacer from @bernhard and the whole page load in 200ms instead of 1.8s.


It was used like: [[tag element="div" class="row"]] [[tag element="div" class="col-6"]] $content [[end-tag]] [[end-tag]]

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By fruid
      I'm trying to pass a variable from one hannacode occurence to the next.
      hannacode: [[nextimage]]
      if (isset($next)) : $next++; else: $next=0; endif; $nextimage = $page->images->eq($next); echo '<img title="'.$nextimage->title.'" alt="'.$nextimage->title.'" src="'.$nextimage->url.'"/>'; But everytime the hannacode runs, it's a different scope so to say.
      Any ideas?
    • By Greg Lumley
      Hi, this has me stumped, please help. 😳

      I'm using a field 'page_body' in a page-template as well as a blog-template. 
      HannaCodeDialogue is enabled for the field page_body.
      HannaCode works perfectly in Pages but not in Posts. 

      The dropdown is visible in the pages edit template but not in the posts edit template. 
      If I manually put the code into the Posts Template i.e. : [[YouTubeVideo videoName="my_vid"]] it simply displays the tag. 
      I'm quite sure this is a config error of some sort but for the life of me, I can't find it. 
      Thank you. 
    • By msavard
      I have a situation where I have links to a bunch of forms on my site. Every year the links to the forms change slightly, adding the current year to the end. So it is something like http://www/somewhere.com/form1/2017. Next year it will be the same thing but with 2018 in the URL.
      I was hoping HannaCode could help me out here by letting me create a snippet that would read the year from a settings page and insert that at the end of any links I specify. So in the CKEditor I create a link, add [[cyr]] (my HannaCode snippet that pulls back the year from the settings page and I verified that it is indeed working properly) to the end and instead of pulling in the year it is just encoding the [[cyr]] into the URL. I was expecting
      http://www.somewhere.com/form1/2017  and I'm getting
      http://www.somewhere.com/form1/%5b%5bcyr%5d%5d .
      Is HannaCode not able to work with raw HTML this way? Is there some other way to do what I'm trying to accomplish? I really don't want to go around the site updating 100 links when a new year comes around.
      All the links are to forms on an external site in case that helps...
    • By spacemonkey95
      Hi all,
      I've got a Table field on one of my pages. The first column requires the use of Hanna Code so I can add custom icons to the table cell. As per the settings for that particular field, I've set the textformatter option as TextformatterHannaCode (as the screenshot will show, for this particular field it's not possible to just select text formatters from a select dropdown. Instead I have to type in the value).
      Now, if I manually type in my HannaCode label (e.g. [[icons_copy]] )  then it will output correctly onto the page, but I need to also have the HannaCode selection menu which normally shows up in CKEditor when right-clicking in the textarea field. Does anyone know how I can achieve this? Do I need to apply a different setting in the Settings area as shown in the screenshot?
    • By tsdtsdtsd
      the HannaCode snippets are currently stored in site/assets/cache/...
      I was wondering if this is the right place for them. Usually people tend to skip cache/* folders in backups and repositories (.gitignore etc). This could lead to serious data loss if one isn't aware of the fact where the snippets are stored.
      What do you think?
  • Create New...