CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

Best way to set-up Head / Meta / Include JS / CSS

https://forum.cmsmadesimple.org/viewtopic.php?t=74969

Page 1 of 1

Best way to set-up Head / Meta / Include JS / CSS

Posted: Thu May 26, 2016 12:01 pm
by naturelab
I am trying my best to simplify the way I set up the <head> area in my sites, but have run into a bit of trouble and could do with some pointers.

I am trying to use :-
  • CGHeadMaster
    {cgjs_render}
    {cms_jquery}
    {share_data}
But confused as to whether how much 'overlap' there is to these items.
My sites all use Bootstrap so I need to adhere to this (http://getbootstrap.com/getting-started/) in terms of the order of Meta tags:-

Code: Select all

<!DOCTYPE html>
<__html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

So far, my head looks like this ( although some of it IS NOT working )

Code: Select all

{strip}
{content assign="capturedcontent"}
{$theme_path = "{uploads_url}/cp/"}
{cms_selflink dir='previous'  assign='prev_page'}
{cms_selflink dir='next'  assign='next_page'}
{share_data scope=global vars='theme_path,capturedcontent,prev_page,next_page,year' }

{process_pagedata}
{/strip}

<!DOCTYPE html>
<__html lang="en">
<head>

{cghm_set key='description' val="{$capturedcontent|strip_tags|truncate:155:"...":false}" }
{if isset($workpage)}
{cghm_config_set key='title' val="{$year}" }
{else if $page_alias == "home"}
{cghm_config_set key='title' val="{sitename} - {global_content name='strap'}" }
{/if}

{metadata}

{cgjs_require cssurl='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'}
{cgjs_require cssurl='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'}

<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

{cgjs_render}

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<__script__ src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></__script>
<__script__ src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></__script>
<![endif]-->


{cms_stylesheet}

{cms_selflink dir='start' rellink=1}
{cms_selflink dir='prev' rellink=1}
{cms_selflink dir='next' rellink=1}

{cms_jquery  cdn='true' exclude='nestedSortable,json,migrate,jquery-ui' append='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js,/dev/uploads/cp/js/owl.carousel.min.js,/dev/uploads/cp/js/jquery.themepunch.tools.min.js,/dev/uploads/cp/js/plugins.js,/dev/uploads/cp/js/scripts.js' }

</head>
My global settings look like this:-

Code: Select all

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{cghm_render}
The {cgjs_require cssurl= part is not working.
I cannot see a way to include the fonts other tahn how I am already doing it.
Ideally, I'd like to minify all css and js
Also the <Title> tag generation part {cghm_config_set key='title' val="{$year}" } is not working. I can't seem to access the value of $year.

How can I do this better ? / Make it work.
Any help greatly appreciated

Re: Best way to set-up Head / Meta / Include JS / CSS

Posted: Thu May 26, 2016 2:04 pm
by calguy1000
I will look at the font issue (system info would be nice) as some bugs have been fixed in recent versions of CGExtensions...

Here are some tips:

a: I would call {cghm_render} directly after (or before) {metadata} in the template. This way you have the option of overriding meta tags in either CGHM or in the page metadata section (depending on what works best for you).

b: Avoid use of both {cgjs_render} AND {cms_jquery}. {cgjs_render} will combine the javascript and css into one url each. whereas {cms_jquery} does not... and is quite honestly... dated. You will have less URL's and therefore fewer requests if you use {cgjs_render}.

c: Avoid mixed content in <link> url's. or <__script__> tags. It doesn't matter for {cgjs_require} as it physically copies the supplied URL down to your server.

Re: Best way to set-up Head / Meta / Include JS / CSS

Posted: Thu May 26, 2016 2:43 pm
by naturelab
Thanks for the quick reply.

I have eliminated {cms_jquery} from my template and tried to get {cgjs_render} to work. Having a few problems still, but 'looks' neater.

RE:Fonts

The REMOTE css inclusion doesn't seem to work at all :-
Like this ? or am I misunderstanding ?

Code: Select all

{strip}
{content assign="capturedcontent"}
{$theme_path = "{uploads_url}/cp/"}
{cms_selflink dir='previous'  assign='prev_page'}
{cms_selflink dir='next'  assign='next_page'}
{share_data scope=global vars='theme_path,capturedcontent,prev_page,next_page,year' }

{process_pagedata}
{/strip}

<!DOCTYPE html>
<__html lang="en">
<head>

{cghm_set key='description' val="{$capturedcontent|strip_tags|truncate:155:"...":false}" }
{if isset($workpage)}
{cghm_config_set key='title' val="{$year}" }
{else if $page_alias == "home"}
{cghm_config_set key='title' val="{sitename} - {global_content name='strap'}" }
{/if}

{metadata}

{cgjs_require cssurl='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300'}
{cgjs_require cssurl='http://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic'}
{cgjs_require cssurl='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'}
{cgjs_require cssurl='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'}

{cgjs_require jsurl='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'}
{cgjs_require jsfile='/dev/uploads/cp/js/owl.carousel.min.js'}
{cgjs_require jsfile='/dev/uploads/cp/js/jquery.themepunch.tools.min.js'}
{cgjs_require jsfile='/dev/uploads/cp/js/plugins.js'}
{cgjs_require jsfile='/dev/uploads/cp/js/scripts.js'}

{cgjs_render}

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<__script__ src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></__script>
<__script__ src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></__script>
<![endif]-->


{cms_stylesheet}

{cms_selflink dir='start' rellink=1}
{cms_selflink dir='prev' rellink=1}
{cms_selflink dir='next' rellink=1}


</head>

My system INFO


Code: Select all

----------------------------------------------

Cms Version: 2.1.3

Installed Modules:

    AdminSearch: 1.0.1
    CGBlog: 1.13.6
    CGContentUtils: 2.1
    CGExtensions: 1.53.6
    CGHeadMaster: 1.0.9.2
    CGSimpleSmarty: 2.1
    CGSnapshot: 1.1
    CMSContentManager: 1.1
    CMSMailer: 6.2.14
    DesignManager: 1.1.1
    FileManager: 1.5.2
    FormBuilder: 0.8.1.4
    Gallery: 2.1.5
    JQueryTools: 1.3.9
    MicroTiny: 2.0.3
    ModuleManager: 2.0.2
    Navigator: 1.0.3
    News: 2.50.5
    Search: 1.50.2
    SimpleSiteInfo: 3.1

Re: Best way to set-up Head / Meta / Include JS / CSS

Posted: Thu May 26, 2016 2:52 pm
by calguy1000
Here is the top portion of my page template...

Code: Select all

{strip}{process_pagedata}
{$pagetitle="{title}" scope=global}{content adminonly=yes assign='content'}{$content=$content scope=global}
{/strip}<!DOCTYPE html>
<__html lang="en">
  <head>
    {if isset($canonical)}<link rel="canonical" href="{$canonical}" />{elseif isset($content_obj)}<link rel="canonical" href="{$content_obj->GetURL()}" />{/if}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {cgjs_require lib='ui,fancybox'}
    {cgjs_require cssurl='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'}
    {cgjs_require jsurl='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'}
    {cgjs_render}
    {metadata}
    {cms_stylesheet}
    {cms_selflink dir="start" rellink=1}
    {cms_selflink dir="prev" rellink=1}
    {cms_selflink dir="next" rellink=1}
    <title>{$pagetitle} | {sitename}</title>
  </head>
I have validated that the {cjs_require cssurl=} stuff is working by:
a: clearing the cache
b: refreshing the page
c: looking at the generated html source... clicking on the css link and searching for the string 'jsloader' until I found the bootstrap stuff.

It looked like this:

Code: Select all

/* jsloader//css remote //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css */

Re: Best way to set-up Head / Meta / Include JS / CSS

Posted: Thu May 26, 2016 2:56 pm
by naturelab
Thankyou. That's *REALLY* helpful.

So you put all your {cghm_set} tag's into the global settings - Metadata ? NOT in the page template, or haven't you used any on this particular template ?

Re: Best way to set-up Head / Meta / Include JS / CSS

Posted: Thu May 26, 2016 3:15 pm
by calguy1000
On that particular template I haven't used CGHM. CGHM is separate and distinct from {cgjs_render} and there should be no conflict.

Re: Best way to set-up Head / Meta / Include JS / CSS

Posted: Thu May 26, 2016 3:34 pm
by calguy1000
Just for an exercise I installed CGHeadMaster on that dev site and turned it on (very trivially) in my template.

My template now looks like this:

Code: Select all

{strip}{process_pagedata}
{$pagetitle="{title}" scope=global}{content adminonly=yes assign='content'}{$content=$content scope=global}
{/strip}<!DOCTYPE html>
<__html lang="en">
  <head>
    {*
    {if isset($canonical)}<link rel="canonical" href="{$canonical}" />{elseif isset($content_obj)}<link rel="canonical" href="{$content_obj->GetURL()}" />{/if}
    *}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {cgjs_require lib='ui,fancybox'}{* libs from JQueryTools *}
    {cgjs_require cssurl='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'}
    {cgjs_require jsurl='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'}
    {cgjs_render}
    {cghm_render}
    {metadata}
    {cms_stylesheet}
    {cms_selflink dir="start" rellink=1}
    {cms_selflink dir="prev" rellink=1}
    {cms_selflink dir="next" rellink=1}
    {*<title>{$pagetitle} | {sitename}</title>*}
  </head>
Note: I commented out the <title> and canonical URL stuff. and simply added {chm_render} there are absolutely no {cghm_set} calls in any of the page metadata or other places in any of the pages (brand new CGHeadMaster install).

My HTML source (head section) went from this:

Code: Select all

<!DOCTYPE html>
<__html lang="en"><head>
    <link rel="canonical" href="https://mywebsite/cms2_svn/" />    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="https://mywebsite/cms2_svn/" />
    <meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-2015. All rights reserved." />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <__script__ type="text/javascript" src="https://mywebsite/cms2_svn/tmp/cache/cgejs_292affd903664628b5c6bc040adc8cb2.js"></__script>
<link type="text/css" rel="stylesheet" href="https://mywebsite/cms2_svn/tmp/cache/cgejs_292affd903664628b5c6bc040adc8cb2.css"/>
    <link rel="stylesheet" type="text/css" href="https://mywebsite/cms2_svn/tmp/cache/stylesheet_combined_206f62fcb1f7ba59301e884c619b31e3.css" />
    <link rel="start" title="Home c" href="https://mywebsite/cms2_svn/" />
    <link rel="next" title="NMS test15" href="https://mywebsite/cms2_svn/nms" />
    <title>Home c | CMS2 SVN</title>
</head>
To This:

Code: Select all

<!DOCTYPE html>
<__html lang="en"><head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <__script__ type="text/javascript" src="https://mywebsite/cms2_svn/tmp/cache/cgejs_292affd903664628b5c6bc040adc8cb2.js"></__script>
    <link type="text/css" rel="stylesheet" href="https://mywebsite/cms2_svn/tmp/cache/cgejs_292affd903664628b5c6bc040adc8cb2.css"/>
    <link rel="canonical" href="https://mywebsite/cms2_svn/"/>
    <meta name="copyright" content="2015"/>
    <title>Home c - CMS2 SVN</title>
    <meta name="title" content="Home c - CMS2 SVN"/>
    <meta name="robots" content="index,follow"/>
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:uri" content="https://mywebsite/cms2_svn/"/>
    <meta name="tweetmeme-title" content="Home c - CMS2 SVN"/>
    <meta property="og:title" content="Home c - CMS2 SVN"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="https://mywebsite/cms2_svn/"/>
    <meta property="og:site_name" content="CMS2 SVN"/>
    <meta name="apple-mobile-web-app-capable" content="0"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <link rel="apple-touch-icon" href="https://mywebsite/cms2_svn/favicon_cms.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="https://mywebsite/cms2_svn/favicon_cms.ico" type="image/x-icon" sizes="32x32"/>
    <base href="https://mywebsite/cms2_svn/" />
    <meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-2015. All rights reserved." />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="https://mywebsite/cms2_svn/tmp/cache/stylesheet_combined_206f62fcb1f7ba59301e884c619b31e3.css" />
    <link rel="start" title="Home c" href="https://mywebsite/cms2_svn/" />
    <link rel="next" title="NMS test15" href="https://mywebsite/cms2_svn/nms" />
</head>
You can see that the rel=canonical link is regenerated and is the same... as well as the title tag. Additionally I have alot more meta tags as provided by CGHeadMaster. All done by removing two lines from my template, and adding one call to {cghm_render}

If you could be potentially modifying meta tags within content pages I would just put the {cghm_set} calls in the 'Smarty data specific to this page' field of the appropriate content pages as this would then be picked up in the {process_pagedata} tag.

Re: Best way to set-up Head / Meta / Include JS / CSS

Posted: Thu May 26, 2016 3:37 pm
by naturelab
Brilliant. Again *REALLY* helpful. Appreciate your time. I will look at this closely.

Re: Best way to set-up Head / Meta / Include JS / CSS

Posted: Thu May 26, 2016 6:50 pm
by naturelab
OK, been working on this most of the day, now my HEAD section looks like this :-

Code: Select all

{strip}{process_pagedata}
{content assign='content'}{$content=$content scope=global}
{$theme_path = "{uploads_url}/cp/" scope=global}
{/strip}
<!DOCTYPE html>
<__html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

{cghm_set key='description' val="{$content|strip_tags|truncate:155:"...":false}" }
{if isset($workpage)}
{cghm_config_set key='title' val="{$year}" }
{else if $page_alias == "home"}
{cghm_config_set key='title' val="{sitename} - {global_content name='strap'}" }
{/if}

{cghm_render}

{metadata}

{cgjs_require cssurl='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300'}
{cgjs_require cssurl='http://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic'}
{cgjs_require cssurl='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'}
{cgjs_require cssurl='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'}

{cgjs_require jsurl='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'}
{cgjs_require jsurl='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'}
{cgjs_require jsfile='uploads/cp/js/owl.carousel.min.js'}
{cgjs_require jsfile='uploads/cp/js/jquery.themepunch.tools.min.js'}
{cgjs_require jsfile='uploads/cp/js/plugins.js'}
{cgjs_require jsfile='uploads/cp/js/scripts.js'}

{cgjs_render}

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<__script__ src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></__script>
<__script__ src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></__script>
<![endif]-->

{cms_stylesheet}

{cms_selflink dir='start' rellink=1}
{cms_selflink dir='prev' rellink=1}
{cms_selflink dir='next' rellink=1}
</head>
This bit :-

Code: Select all

{cgjs_require jsurl='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'}
{cgjs_require jsurl='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'}
{cgjs_require jsfile='uploads/cp/js/owl.carousel.min.js'}
{cgjs_require jsfile='uploads/cp/js/jquery.themepunch.tools.min.js'}
{cgjs_require jsfile='uploads/cp/js/plugins.js'}
{cgjs_require jsfile='uploads/cp/js/scripts.js'}

{cgjs_render}
Works fine.

This bit :-

Code: Select all

{cgjs_require cssurl='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300'}
{cgjs_require cssurl='http://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic'}
{cgjs_require cssurl='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'}
{cgjs_require cssurl='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'}
Doesn't work properly and I can't work out why.
It generates a Rel Link OK :-

Code: Select all

<link type="text/css" rel="stylesheet" href="http://mysite.com/dev/tmp/cache/cgejs_69bb1c2285ebb700aa0fc33d70d48a66.css"/>
The fonts don't work & I get errors in Firebug :-

Code: Select all

"NetworkError: 404 Not Found - http://mysite.com/dev/tmp/fonts/fontawesome-webfont.woff2?v=4.6.1"
fontawe...v=4.6.1
"NetworkError: 404 Not Found - http://mysite.com/dev/tmp/fonts/fontawesome-webfont.woff?v=4.6.1"
fontawe...v=4.6.1
"NetworkError: 404 Not Found - http://mysite.com/dev/tmp/fonts/fontawesome-webfont.ttf?v=4.6.1"
This bit still doesn't work either. The {$year} variable is not recognised. :-

Code: Select all

{cghm_set key='description' val="{$content|strip_tags|truncate:155:"...":false}" }
{if isset($workpage)}
{cghm_config_set key='title' val="{$year}" }
{else if $page_alias == "home"}
{cghm_config_set key='title' val="{sitename} - {global_content name='strap'}" }
{/if}

Re: Best way to set-up Head / Meta / Include JS / CSS

Posted: Thu May 26, 2016 11:15 pm
by naturelab
As a follow up please disregard the last section ( I cannot edit or delete this post ) regarding The {$year} variable not being recognised. It was a scope issue. Now fixed by :-

Code: Select all

{content_module module='CGContentUtils' block='Year' assign="year" tab='Year' }{$year=$year scope=global}

Re: Best way to set-up Head / Meta / Include JS / CSS

Posted: Fri May 27, 2016 7:01 am
by Rolf
In short hand

Code: Select all

{$year = "{content_module module='CGContentUtils' block='Year' tab='Year'}" scope=global}
More examples at http://www.cmscanbesimple.org/blog/smar ... e-examples

Re: Best way to set-up Head / Meta / Include JS / CSS

Posted: Fri May 27, 2016 7:02 am
by naturelab
Thanks Rolf !
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited