AddStuff icon
Module Id
addstuff
Group Id
org.jahia.modules
Updated
Requires Jahia
8.0.0.0
Author
pvollenweider
Category
Tools and Utilities
Status
COMMUNITY info

AddStuff group_work

javascript styles html template

Simple Jahia module that allow to add HTML code in the HEAD or BODY part on all pages

Dependencies & Dependants

Dependencies
  • NONE
Dependants
  • NONE

Changelog 2.1.1

Remove unused dependency to templates-system

FAQ

I have deployed my module on my site, but I still can't view where I can add HTML
Right-click on the site node and update the site. Under the "Options" tab you will see a checkbox that allows adding stuff to your HTML code.

I did enter some HTML in the BODY part but I can't see the code in my page
This module only works for for live and preview mode.
 

Examples

CSS injection

If you need to inject some inline CSS classes on all pages, you can choose the global way, then enable the option and insert your code at the End of the HEAD section, so this code will override all your CSS assets coming from your existing modules or template set.

.header {
    background-color: #e9e9e9;
    padding: 10px; 
}

If you only need to insert some CSS on a single page, then you will need to do it on the page node instead of the site node.

JavaScript injection

For many reasons, you may want to inject some JavaScript into a page. This can be done at many places, on the HEAD or on the BODY part.

For instance, if you want to integrate a Google Tag Manager, you will need to add code on two different parts. The first part should be added as high in the of the page as possible, so you will choose the Top of the HEAD section

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-123456');</script>
<!-- End Google Tag Manager -->

And Additionally, you will need to paste some code immediately after the opening tag, so you will choose the Top of the BODY section

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-123456"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

How To Install

How to install and how to use

Installation: 

Please read the dedicated tutorial on https://academy.jahia.com/training-kb/tutorials/administrators/installing-a-module and select the AddStuff module from the store.

Usage:

The idea of this module is to allow any editor to inject some code in the HEAD or the BODY part of a page, without doing anything to your template set or any existing modules. As an example, you can add a JavaScript snippet on the bottom of the BODY, or some CSS inline style in the HEAD section.

There is 4 different placeholders to inject your code:

  • Top of the HEAD
  • End of the HEAD
  • Top of the BODY
  • End of the BODY

In term of HTML, here are the different placeholders:

<!doctype html>
<html lang="en">
  <head>
    <!-- Top of the HEAD -->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello, world!</title>

    <!-- Some CSS or JavaScript comming from the template:addResource tag -->
    <link href="/modules/anyModule/css/mystyle.css" rel="stylesheet">
    <script src="/modules/anyModule/jacasvript/my.js"></script>

    <!-- End of the HEAD -->
  </head>
  <body>
     <!-- Top of the BODY -->
     <h1>Hello, world!</h1>
     <p>Some content here...</p>

     
     <!-- End of the BODY -->
  </body>
</html>

You can do it using two different ways, the global (site) way or the single page way.

The global (site) way

You will choose the global way if you need to inject some code on all pages of your site.

On Edit mode, on the left panel, you need to right-click on your site node and choose the edit action.

Then, under the option part, you will need to enable the Add stuff in your HTML code (only for preview/live mode). Once it’s done, you will see the 4 placeholders.

You can insert your code in the chosen part, then save it.

As the site node is an auto-published node, you don’t need to start a public workflow.

The page way

If you need to inject some code only on a single page, you can edit your page node from the left panel and enable the Add stuff in your HTML code (only for preview/live mode) in the option part. Once it’s done, you will see the 4 placeholders. You can insert your code in the chosen part, then save it.

On the page way, you can preview this page to see the result (the code is only injected in preview or live mode), and you will need to start a publication workflow to view the result in live mode.

Images

Video

License

MIT License