malcoauri
Reputation: 12199
How to use base url in Modex CMS developing?
I have been developing my first Modex project, and now I've copied downloaded template into "assets/templates/site" and fixed all links + added base_url into header, result code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<base href="[(site_url)]" />
<title>PlusBusiness</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="/assets/templates/site/styles/layout.css" type="text/css" />
<script type="text/javascript" src="/assets/templates/site/scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/assets/templates/site/scripts/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="/assets/templates/site/scripts/jquery.jcarousel.setup.js"></script>
</head>
<body id="top">
<!-- ####################################################################################################### -->
<div class="wrapper col1">
<div id="header">
<div id="logo">
<h1><a href="#">+Business</a></h1>
<p>Free Open Source CSS Website Template</p>
</div>
<div id="topnav">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="style-demo.html">Style Demo</a></li>
<li><a href="full-width.html">Full Width</a></li>
<li><a href="#">DropDown</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li class="last"><a href="#">A Long Link Text</a></li>
</ul>
</div>
<br class="clear" />
</div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper col2">
<div id="featured_slide">
<div id="featured_content">
<ul>
<li><img src="/assets/templates/site/images/demo/1.gif" alt="" />
<div class="floater">
<h2>About This Template !</h2>
<p>This is a W3C standards compliant Open Source free CSS template from <a href="http://www.os-templates.com/" title="Open Source Templates">OS Templates</a>. This template is distributed under a <a target="_blank" rel="nofollow" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>, which allows you to use and modify the template for both personal and commercial use when you keep the provided credit links in the footer. For more free css templates visit <a href="http://www.os-templates.com/">Open Source Templates</a>.</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</div>
</li>
<li><img src="/assets/templates/site/images/demo/2.gif" alt="" />
<div class="floater">
<h2>Cursus penati saccum ut curabitur nulla.</h2>
<p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet. Nullain convallis ris elis vest liberos nis diculis feugiat in rutrum. Suspendreristibulumfaucibulum lobortor quis tortortor ris sapien sce enim et volutpat sus. Urnaretiumorci orci fauctor leo justo nulla cras ridiculum…</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</div>
</li>
<li><img src="/assets/templates/site/images/demo/3.gif" alt="" />
<div class="floater">
<h2>Cursus penati saccum ut curabitur nulla.</h2>
<p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet. Nullain convallis ris elis vest liberos nis diculis feugiat in rutrum. Suspendreristibulumfaucibulum lobortor quis tortortor ris sapien sce enim et volutpat sus. Urnaretiumorci orci fauctor leo justo nulla cras ridiculum…</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</div>
</li>
</ul>
</div>
<a href="javascript:void(0);" id="featured-item-prev"><img src="/assets/templates/site/images/prev.png" alt="" /></a> <a href="javascript:void(0);" id="featured-item-next"><img src="/assets/templates/site/images/next.png" alt="" /></a> </div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper col3">
<div id="container">
<div class="homepage">
<ul>
<li>
<h2><img src="/assets/templates/site/images/demo/60x60.gif" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</li>
<li>
<h2><img src="/assets/templates/site/images/demo/60x60.gif" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</li>
<li class="last">
<h2><img src="/assets/templates/site/images/demo/60x60.gif" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</li>
</ul>
<br class="clear" />
</div>
</div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper col4">
<div id="footer">
<div class="box1">
<h2>A Little Company Information !</h2>
<img class="imgl" src="/assets/templates/site/images/demo/imgl.gif" alt="" />
<p>Morbitincidunt maurisque eros molest nunc anteget sed vel lacus mus semper. Anterdumnullam interdum eros dui urna consequam ac nisl nullam ligula vestassa. Condimentumfelis et amet tellent quisquet a leo lacus nec augue</p>
<p>Portortornec condimenterdum eget consectetuer condis.</p>
</div>
<div class="box contactdetails">
<h2>Our Contact Details !</h2>
<ul>
<li>Company Name</li>
<li>Street Name & Number</li>
<li>Town</li>
<li>Postcode/Zip</li>
<li>Tel: xxxxx xxxxxxxxxx</li>
<li>Fax: xxxxx xxxxxxxxxx</li>
<li>Email: [email protected]</li>
<li class="last">LinkedIn: <a href="#">Company Profile</a></li>
</ul>
</div>
<div class="box flickrbox">
<h2>Latest Flickr Images !</h2>
<div class="wrap">
<div class="fix"></div>
<div class="flickr_badge_image" id="flickr_badge_image1"><a href="#"><img src="/assets/templates/site/images/demo/80x80.gif" alt="" /></a></div>
<div class="flickr_badge_image" id="flickr_badge_image2"><a href="#"><img src="/assets/templates/site/images/demo/80x80.gif" alt="" /></a></div>
<div class="flickr_badge_image" id="flickr_badge_image3"><a href="#"><img src="/assets/templates/site/images/demo/80x80.gif" alt="" /></a></div>
<div class="flickr_badge_image" id="flickr_badge_image4"><a href="#"><img src="/assets/templates/site/images/demo/80x80.gif" alt="" /></a></div>
<div class="flickr_badge_image" id="flickr_badge_image5"><a href="#"><img src="/assets/templates/site/images/demo/80x80.gif" alt="" /></a></div>
<div class="flickr_badge_image" id="flickr_badge_image6"><a href="#"><img src="/assets/templates/site/images/demo/80x80.gif" alt="" /></a></div>
<div class="fix"></div>
</div>
</div>
<br class="clear" />
</div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper col5">
<div id="copyright">
<p class="fl_left">Copyright © 2010 - All Rights Reserved - <a href="#">Domain Name</a></p>
<p class="fl_right">Template by <a href="http://www.os-templates.com/" title="Open Source Templates">OS Templates</a></p>
<br class="clear" />
</div>
</div>
</body>
</html>
As you can see all links are correct. But when I execute it I will see the page without images and other elements, and the code of page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<base href="http://localhost/ModexProject/" />
<title>PlusBusiness</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="/assets/templates/site/styles/layout.css" type="text/css" />
<script type="text/javascript" src="/assets/templates/site/scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/assets/templates/site/scripts/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="/assets/templates/site/scripts/jquery.jcarousel.setup.js"></script>
<script src="http://localhost/ModexProject/assets/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<link type="text/css" media="screen" rel="stylesheet" href="http://localhost/ModexProject/assets/plugins/qm/css/colorbox.css" />
<style type="text/css">
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://localhost/ModexProject/assets/plugins/qm/css/images/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://localhost/ModexProject/assets/plugins/qm/css/images/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://localhost/ModexProject/assets/plugins/qm/css/images/internet_explorer/borderTopRight.png, sizingMethod='scale');}
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://localhost/ModexProject/assets/plugins/qm/css/images/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://localhost/ModexProject/assets/plugins/qm/css/images/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://localhost/ModexProject/assets/plugins/qm/css/images/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://localhost/ModexProject/assets/plugins/qm/css/images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://localhost/ModexProject/assets/plugins/qm/css/images/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}
</style>
<script type="text/javascript" src="http://localhost/ModexProject/assets/plugins/qm/js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function($)
{
$j("a.colorbox").colorbox({width:"80%", height:"90%", iframe:true, overlayClose:false, opacity:0.5, transition:"fade", speed:150});
// Bindings
$j(document).bind("cbox_open", function(){
$j("body").css({"overflow":"hidden"});
$j("html").css({"overflow":"hidden"});
$j("#qmEditor").css({"display":"none"});
});
$j(document).bind("cbox_closed", function(){
$j("body").css({"overflow":"auto"});
$j("html").css({"overflow":"auto"});
$j("#qmEditor").css({"display":"block"});
// Remove manager lock by going to home page
$j.ajax({ type: "GET", url: "http://localhost/ModexProject/manager/index.php?a=2" });
});
// Hide QM+ if cookie found
if (getCookie("hideQM") == 1)
{
$j("#qmEditor").css({"display":"none"});
$j("#qmEditorClosed").css({"display":"block"});
}
// Hide QM+
$j(".qmClose").click(function () {
$j("#qmEditor").hide("normal");
$j("#qmEditorClosed").show("normal");
document.cookie = "hideQM=1; path=/;";
});
// Show QM+
$j("#qmEditorClosed").click(function () {
{
$j("#qmEditorClosed").hide("normal");
$j("#qmEditor").show("normal");
document.cookie = "hideQM=0; path=/;";
}
});
});
function getCookie(cookieName)
{
var results = document.cookie.match ( "(^|;) ?" + cookieName + "=([^;]*)(;|$)" );
if (results) return (unescape(results[2]));
else return null;
}
</script>
<link rel="stylesheet" type="text/css" href="http://localhost/ModexProject/assets/plugins/qm/css/style.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="http://localhost/ModexProject/assets/plugins/qm/css/ie.css" /><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="http://localhost/ModexProject/assets/plugins/qm/css/ie7.css" /><![endif]-->
</head>
<body id="top">
<div id="qmEditorClosed"></div>
<div id="qmEditor">
<ul>
<li id="qmClose"><a class="qmButton qmClose" href="#" onclick="javascript: return false;">X</a></li>
<li><a id="qmLogoClose" class="qmClose" href="#" onclick="javascript: return false;"></a></li>
<li class="qmEdit">
<a class="qmButton qmEdit colorbox" href="http://localhost/ModexProject/manager/index.php?a=27&id=1&quickmanager=1"><span> �������������</span></a>
</li>
<li class="qmAdd">
<a class="qmButton qmAdd colorbox" href="http://localhost/ModexProject/manager/index.php?a=4&pid=1&quickmanager=1"><span>�������� ������</span></a>
</li>
<li class="qmManager">
<a class="qmButton qmManager" title="��������" href="http://localhost/ModexProject/manager/" ><span>��������</span></a>
</li>
<li class="qmLogout">
<a id="qmLogout" class="qmButton qmLogout" title="�����" href="http://localhost/ModexProject/manager/index.php?a=8&quickmanager=logout&logoutid=1" ><span>�����</span></a>
</li>
</ul>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper col1">
<div id="header">
<div id="logo">
<h1><a href="#">+Business</a></h1>
<p>Free Open Source CSS Website Template</p>
</div>
<div id="topnav">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="style-demo.html">Style Demo</a></li>
<li><a href="full-width.html">Full Width</a></li>
<li><a href="#">DropDown</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li class="last"><a href="#">A Long Link Text</a></li>
</ul>
</div>
<br class="clear" />
</div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper col2">
<div id="featured_slide">
<div id="featured_content">
<ul>
<li><img src="/assets/templates/site/images/demo/1.gif" alt="" />
<div class="floater">
<h2>About This Template !</h2>
<p>This is a W3C standards compliant Open Source free CSS template from <a href="http://www.os-templates.com/" title="Open Source Templates">OS Templates</a>. This template is distributed under a <a target="_blank" rel="nofollow" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>, which allows you to use and modify the template for both personal and commercial use when you keep the provided credit links in the footer. For more free css templates visit <a href="http://www.os-templates.com/">Open Source Templates</a>.</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</div>
</li>
<li><img src="/assets/templates/site/images/demo/2.gif" alt="" />
<div class="floater">
<h2>Cursus penati saccum ut curabitur nulla.</h2>
<p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet. Nullain convallis ris elis vest liberos nis diculis feugiat in rutrum. Suspendreristibulumfaucibulum lobortor quis tortortor ris sapien sce enim et volutpat sus. Urnaretiumorci orci fauctor leo justo nulla cras ridiculum…</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</div>
</li>
<li><img src="/assets/templates/site/images/demo/3.gif" alt="" />
<div class="floater">
<h2>Cursus penati saccum ut curabitur nulla.</h2>
<p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet. Nullain convallis ris elis vest liberos nis diculis feugiat in rutrum. Suspendreristibulumfaucibulum lobortor quis tortortor ris sapien sce enim et volutpat sus. Urnaretiumorci orci fauctor leo justo nulla cras ridiculum…</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</div>
</li>
</ul>
</div>
<a href="javascript:void(0);" id="featured-item-prev"><img src="/assets/templates/site/images/prev.png" alt="" /></a> <a href="javascript:void(0);" id="featured-item-next"><img src="/assets/templates/site/images/next.png" alt="" /></a> </div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper col3">
<div id="container">
<div class="homepage">
<ul>
<li>
<h2><img src="/assets/templates/site/images/demo/60x60.gif" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</li>
<li>
<h2><img src="/assets/templates/site/images/demo/60x60.gif" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</li>
<li class="last">
<h2><img src="/assets/templates/site/images/demo/60x60.gif" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
<p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
<p class="readmore"><a href="#">Continue Reading »</a></p>
</li>
</ul>
<br class="clear" />
</div>
</div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper col4">
<div id="footer">
<div class="box1">
<h2>A Little Company Information !</h2>
<img class="imgl" src="/assets/templates/site/images/demo/imgl.gif" alt="" />
<p>Morbitincidunt maurisque eros molest nunc anteget sed vel lacus mus semper. Anterdumnullam interdum eros dui urna consequam ac nisl nullam ligula vestassa. Condimentumfelis et amet tellent quisquet a leo lacus nec augue</p>
<p>Portortornec condimenterdum eget consectetuer condis.</p>
</div>
<div class="box contactdetails">
<h2>Our Contact Details !</h2>
<ul>
<li>Company Name</li>
<li>Street Name & Number</li>
<li>Town</li>
<li>Postcode/Zip</li>
<li>Tel: xxxxx xxxxxxxxxx</li>
<li>Fax: xxxxx xxxxxxxxxx</li>
<li>Email: [email protected]</li>
<li class="last">LinkedIn: <a href="#">Company Profile</a></li>
</ul>
</div>
<div class="box flickrbox">
<h2>Latest Flickr Images !</h2>
<div class="wrap">
<div class="fix"></div>
<div class="flickr_badge_image" id="flickr_badge_image1"><a href="#"><img src="/assets/templates/site/images/demo/80x80.gif" alt="" /></a></div>
<div class="flickr_badge_image" id="flickr_badge_image2"><a href="#"><img src="/assets/templates/site/images/demo/80x80.gif" alt="" /></a></div>
<div class="flickr_badge_image" id="flickr_badge_image3"><a href="#"><img src="/assets/templates/site/images/demo/80x80.gif" alt="" /></a></div>
<div class="flickr_badge_image" id="flickr_badge_image4"><a href="#"><img src="/assets/templates/site/images/demo/80x80.gif" alt="" /></a></div>
<div class="flickr_badge_image" id="flickr_badge_image5"><a href="#"><img src="/assets/templates/site/images/demo/80x80.gif" alt="" /></a></div>
<div class="flickr_badge_image" id="flickr_badge_image6"><a href="#"><img src="/assets/templates/site/images/demo/80x80.gif" alt="" /></a></div>
<div class="fix"></div>
</div>
</div>
<br class="clear" />
</div>
</div>
<!-- ####################################################################################################### -->
<div class="wrapper col5">
<div id="copyright">
<p class="fl_left">Copyright © 2010 - All Rights Reserved - <a href="#">Domain Name</a></p>
<p class="fl_right">Template by <a href="http://www.os-templates.com/" title="Open Source Templates">OS Templates</a></p>
<br class="clear" />
</div>
</div>
</body>
</html>
I see that not all links are correct; there are correct links, and there are links without using base url. How can I fix it?
Upvotes: 0
Views: 232
Answers (3)
frogabog
Reputation: 11
<base href="[(site_url)]" />
should be:
<base href="[[++site_url]]" />
Since it's a placeholder, you need to use the placeholder tag. Additionally, ( ) are not valid tag syntax for MODX. For MODx Evoloution, use the single brackets, i.e. [$chunk]. MODX Revolution uses two brackets, i.e. [[$chunk]].
You can also call the site url uncached if you want as it shows in the docs, just add an exclamation point, i.e. [[!++site_url]].
Upvotes: 1
Sean Kimball
Reputation: 4494
don't hard code the base url, it will cause problems if you ever move the site. the base url variable is taken from the system site url setting. you can control all the url formatting there.
Upvotes: 2
Jose Browne
Reputation: 4622
I would start by hard coding your base url instead of using the site url template variable. This way you can control the format and the trailing slash; so if you include the trailing forward slash in the base url make sure you exclude it in your links.
So if your base url would is <base href="http://www.yoursite.com/" /> all your links should be src="images/example.jpg
At this point modx should use that base path for all urls unless you prefix it with a protocol like HTTP. That's really all there is to it. Also make sure you clear cache often for accurate results.
Upvotes: 1
Related Questions
- Base url method in ci
- Any way to set base url in the without reinstalling?
- How configure base_url in codeigniter in server
- Codeigniter how to properly use base_url?
- Setting BaseURL for Codeigniter
- Addition Base url in drupal
- base_url codeigniter solution
- Base URL in Kohana 3
- Base url in joomla module
- ModX non-www resources ->www resources