In a new MODx installation and I have a very crowded head section. The reason is that I have 14 different image galleries. Each gallery requires 3 lines of javascript in the header, but I was able to slim it down to 2 lines per gallery by re-using one of the lines. That means I have to add 29 javascript lines to the header of my gallery template. I already have a homePage template (with 1 of these galleries), a regular template for the rest of my site with none of these gallery javascript lines, and last one template for all my image gallery pages, which is my problem.
The image gallery template header (which is my problem) currently looks like this:
<head>
<meta charset="utf-8">
<title>My Site - [[*pagetitle]]</title>
<base href="[[++site_url]]" />
<link href="[[++site_url]]css/landScape.css" rel="Stylesheet" type="text/css">
<link href="[[++site_url]]Nav%20Menu.css3prj_files/css3menu1/style.css" rel="stylesheet" type="text/css" />
<!-- Start slideshow HEAD section -->
<script type="text/javascript" src="[[++site_url]]core/components/gallery/app/web/js/jabb-0.3.js"></script>
<script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadJs&id=2"></script>
<link type="text/css" rel="stylesheet" href="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadCss&id=2" />
<script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadJs&id=3"></script>
<link type="text/css" rel="stylesheet" href="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadCss&id=3" />
<script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadJs&id=4"></script>
<link type="text/css" rel="stylesheet" href="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadCss&id=4" />
<script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadJs&id=5"></script>
<link type="text/css" rel="stylesheet" href="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadCss&id=5" />
<script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadJs&id=6"></script>
<link type="text/css" rel="stylesheet" href="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadCss&id=6" />
<script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadJs&id=7"></script>
<link type="text/css" rel="stylesheet" href="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadCss&id=7" />
<script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadJs&id=8"></script>
<link type="text/css" rel="stylesheet" href="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadCss&id=8" />
<script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadJs&id=9"></script>
<link type="text/css" rel="stylesheet" href="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadCss&id=9" />
<script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadJs&id=10"></script>
<link type="text/css" rel="stylesheet" href="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadCss&id=10" />
<script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadJs&id=11"></script>
<link type="text/css" rel="stylesheet" href="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadCss&id=11" />
<script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadJs&id=12"></script>
<link type="text/css" rel="stylesheet" href="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadCss&id=12" />
<script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadJs&id=13"></script>
<link type="text/css" rel="stylesheet" href="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadCss&id=13" />
<script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadJs&id=14"></script>
<link type="text/css" rel="stylesheet" href="[[++site_url]]core/components/gallery/index.php?controller=Front&action=loadCss&id=14" />
<!-- End slideshow HEAD section -->
</head>
On each corresponding gallery page I have coding that then displays the gallery on that specific page. For instance on the gallery #2 page this is my coding (in the content section):
<h1>Design Gallery</h1>
<p id="galleryShow"><script type="text/javascript" src="[[++site_url]]core/components/gallery/index.php?controller=Front&action=load&id=2"></script></p>
This in the content area of each page and combined with the header javscript (which is my crowding issue) each page displays the correct gallery properly.
So having to put all the javascript lines in only one template for all my galleries seems is what is leading to my crowding problem.
I am assuming having this much to load is going to bog down lots of devices and someone with a slow internet connection but I am not sure. I already have 3 templates, what am I to do create a new template for each gallery page? Is there a way that I can add 3 lines of these into the header based upon the page? Maybe a template variable?
I just don't know what to do short of creating a new template for each and every gallery page? But that just seems wrong. I feel I am overlooking something very simple. Any suggestions to help clean this up?
☆ A M B ☆