Tutorials: How to Convert a Generic Theme to Exponent

Here is a tutorial that will be appearing on the docs site which walks you through converting a generic web theme/template found on the internet into an Exponent theme.

Here's how you can create a custom theme using a generic web theme template.  There are countless free and paid web templates available on the internet.  You may search one of the template collection web sites to locate a 'theme' you would like to incorporate into Exponent.  For the purposes of this tutorial, we'll select a simple 3-column liquid template.

The template we've chosen can be found at http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths and we'll use the 3 Column (Blog Style) Liquid Layout which can be downloaded here.  Most themes are very easy to convert EXCEPT for the menu.  In this case the menu is an easy drop in replacement since the basic template doesn't really feature a menu,  Other templates might require custom styles to make it look similar, where others might require a near rewrite to create a duplicate menu.

Extract the template package to a new subfolder within the /themes folder.  Rename the folder to 'blogtheme'.  ALL themes MUST use a folder name that ends with the 'theme' phrase!  Inside the folder you'll note several files, one of which is 'index.htm.'  Open it in your browser to see what we've got.  You'll also note several graphics and a single stylesheet file in the folder.

Next we'll need to reorganize the folder to conform to Exponent theme requirements.  Create a 'css' folder and place all the stylesheets there (in this case only screen.css).  Create an 'images' folder and place all the images there (in this case none of the images are really used in the theme).  Next edit the index.htm and css/screen.css files to update the references to the new locations.

  • In index.htm, you'll need to change the stylesheet and image references (this isn't necessary, but a good troubleshooting step).
    • <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />

      to

      <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
    • <img src="mjt-125x125.gif"

      to

      <img src="images/mjt-125x125.gif"

      there are several of these.

  • In css/screen.css, you need to change the references to graphics.  This is NOT necessary in this tutorial since there are NO graphics referenced by this particular css file, HOWEVER this is not simply a trouble shooting step!

    • Search for every instance of 'background : url(' and correct the url.  In this sample if there were any images, we could add an '../images' prefix to point to the new location of images.

  • Refresh the sample page in the browser and you should see NO changes if everything went well.  Otherwise you need to check your edits.

Next we'll create the theme class file.  Copy the 'class.php' file from the simpletheme folder.

  • Change the following line:
    if (class_exists('simpletheme')) return;
    to
    if (class_exists('blogtheme')) return;
  • and change the following line:
    class simpletheme extends theme {
    to
    class blogtheme extends theme {
  • Change the string in the name() function to "3-Column Blog Theme", you could also eidt the author() and description() strings as desired.

Now we'll convert the index.htm file into a theme template.

  • Rename index.htm to index.php
  • Replace the contents of <head>...</head> with expTheme::head() since Exponent handles this for us:
    <head>
        <?php 
        expTheme::head(array(
    	    "xhtml"=>false,
        	"css_core"=>array("common"),
        	"css_links"=>true,
        	"css_theme"=>true
            )
        );
        ?>
    </head>
  • We'll also need to add the mandatory Exponent footer just above the closing </body></html> tags since this is what actually places the css and javascript on our pages

    <?php expTheme::foot(); ?>

You should now be able to select your new (useless) theme in Exponent, so log on to your site and Manage Themes and select your new "3-Column Blog Theme".  Don't expect too much just yet as we have NO dynamic content.  If you can select the theme and the site displays properly with the Exponent menu, we can proceed.  Otherwise you'll need to check the above steps and your editing for accuracy.

Next we'll clean the dead wood (static content) out of our template, index.php and replace it with dynamic content code.

  • Delete all the lines between <div id="header"> and its closing </div> tag, about 13 lines and replace it with our header and menu 
    <h1>
        <a href="<?php echo URL_FULL; ?>" title="<?php echo SITE_TITLE; ?>"><?php echo ORGANIZATION_NAME; ?></a> <sub><?php echo SITE_HEADER; ?></sub> 
    </h1> 
    <?php expTheme::module(array("controller"=>"navigation","action"=>"showall","view"=>"showall_YUI Top Nav","source"=>"@top")); ?>
  • Look for the <!-- Column 1 start --> comment and delete all the lines to the <!-- Column 1 end --> comment and replace it with our main container

    <?php expTheme::main(); ?>
  • Look for the <!-- Column 2 start --> comment and delete all the lines to the <!-- Column 2 end --> comment and replace it with our left column container
    <?php expTheme::module(array("module"=>"container","view"=>"Default","source"=>"@left")); ?>
  • Look for the <!-- Column 3 start --> comment and delete all the lines to the <!-- Column 3 end --> comment and replace it with our right column container
    <?php expTheme::module(array("module"=>"container","view"=>"Default","source"=>"@right")); ?>
  • Finally, replace all the lines between <div id="footer"> and it's closing </div> with our footer text module
    <?php expTheme::module(array("controller"=>"text","action"=>"showall","view"=>"single","source"=>"@footer","chrome"=>1)) ?>

We're almost done, but need to add some styling to the .css file to ensure Exponent menus, etc.. are always in front of other items.

  • The easiest way to do this is to create a 'base-styles.css' file in the /css folder.  We'll need to ensure the <div> id's match the one's used in the template.  Here's what our's would look like
    #header, #bd, #footer {
        position:relative;
    }
    #header {
        z-index:3;
    }
    #header {
        position:relative;
        z-index:5;
    }
    #bd {
        z-index:2;
    }
    #footer {
        z-index:1;
    }

At this point we should have a fully functioning theme suitable for use.  In most cases you may need to tweak the theme styles to override system styling or other conflicts resulting from the theme's styles.  This may be as simple as too much/little spacing to the menus don't work because most menus are actived by css styling or javascript which rests on using css styling.

The last thing we might want to do is to create a CKEditor css file.  You can find those details here.

On-Page SEO Tips for Your Exponent CMS Website

On-page SEO is essential to ensure the pages of your site are indexed according to certain keyword targets. On-page SEO, or on-page optimization, is the art of using specific keywords throughout the content of a page.

As a result, pages of your site will be stored in the right 'search engine deck' or keyword category, and your potential to rank on those keywords is optimized. When it comes to on-page SEO, having an Exponent CMS website offers many advantages. Exponent aids the on-page optimization process by providing content editing fields for the page elements that have the most impact on SEO.

Three of those page elements are the Page Title, Meta Description, and Page Copy (or text). In short, it's critical that you establish keyword relevancy in these three areas of the page. For the context of this article, we'll assume you've done your keyword research and move forward with the on-page SEO process.

Optimizing Page Titles

The page title highlights the main focus or subject matter of a page. The text of the page title makes up the hyperlink that's shown on a Google search engine results page. Page titles have the most weight for on-page SEO and establishing keyword relevancy for a page.

It is thus important to write well-balanced page titles that are both keyword optimized and user focused. Below are several tips to keep in mind when creating well optimized page titles:

  1. Always include the exact phrase match of your primary keyword target for each page. It also helps to introduce the keyword phrase as early as possible in the page title.
     
  2. Make sure the page title accurately describes the content of the webpage (and is not overly keyword-stuffed.) This gives search engine users a good representation of what the page is about.
     
  3. Try to keep the length of each page title between 60 and 70 characters. Google will only display so many characters, so keep your titles tight and to the point.
     
  4. Ensure that the title for each page is unique. This is extremely important for ecommerce SEO, for some deep websites have automatically generated page titles that are duplicated throughout the site. Taking the time to customize and keyword optimized the title for each page is critical for SEO.

Optimizing Meta Descriptions

In essence, Meta descriptions are short summaries of a page that are displayed just below page titles in a search results listing. Similar to page titles, Meta descriptions are not visible on the actual page (only in the search results,) yet they still carry a great deal of importance for SEO and establishing keyword relevancy.

In addition to including keywords for SEO, good Meta descriptions are informative, value-oriented, and will usually include a call to action. Below are a few tips for writing quality Meta descriptions with both SEO and users in mind.

  1. Keep your Meta descriptions about one sentence long, or between 150 and 200 characters. Google and other search engine will only display about 160 characters.
     
  2. Use your primary keyword target early in the Meta description. If you have room or if it makes sense in the copy, try using a keyword variation towards the end, but do this respectively and avoid keyword stuffing.
     
  3. Write creative and compelling Meta descriptions. Include verbs and call to action statements, and really promote what’s unique and valuable about the page or what's being offered.

Optimizing On-Page Copy

The on-page copy or visible text is what users read while on your pages. It is also what spiders crawl after they hit the page title and Meta description. Thus it is important that your page copy is user-focused in that it reads smoothly and expresses value to visitors, as well as keyword-focused in that the copy includes a balance of keywords in the right places. Writing keyword-optimized copy is not always easy. The process is a balancing act of writing with a natural, creative flow while making sure your targeted keywords are mentioned throughout the copy. Below are some on-page optimization tips to keep top of mind while scribing optimized webpage copy.

  1. Use different types of headers in your page copy. That is, group or chunk your copy based on various ideas and concepts, and make use of H1's, H2's, and H3's while separating each idea. Think of H1's as the primary title of a page, while h2's and h3's are supportive sub-headers for each topic. Respectively include your keyword targets in headers.
     
  2. Strong tag (not bold) instances of keywords in the copy. This tells search engine spiders that a specific word or phrase is a bit more significant.
     
  3. Apply other text styling attributes, like italics or underlining, to the copy. Whether or not your keywords are involved, these styling elements can offer a bit more stimulation for users when reading your page copy.
     
  4. Reference your primary keyword target a few times in the page copy. Mention your keyword target in first H1 and in the first few sentences of the copy, but avoid keyword-stuffing. Use keywords naturally while writing optimized copy.
     
  5. Try to include a sufficient amount of text on each page. Pages that have been well optimized will have between 200 and 2,000 words of text, depending on the nature of the page. Typically, the more (unique and valuable) content you include on your optimized pages, the better potential they'll have of ranking well in the search engines.

Optimizing the Page Title, Meta Description, and Page Copy is not rocket science, and neither is search engine optimization. The focus of on-page SEO is to establish keyword relevancy with creative and logical use of certain semantics. Although this phase is essential for SEO, it is only half the battle of achieving a top ranking. Off-page SEO holds just as much importance to the website optimization process.

(updated) Two Column Forms (or something like that...)

(Updated Aug 2nd) We've had several requests lately to 'make forms look like they did in versions prior to v0.97.'  Meaning, place the label and input control on the same line instead of the label above the input control.  Since we're trying to move away from using tables to format the layout (the html5 way of doing things), it's not an easy fix, HOWEVER we can simulate the look using css styles.  (NOTE: we have implemented a Single column/Two Column form settings option in the next version 2.0.9 which will easily implement this feature)

Forms in 2.0

Forms in 0.96

Restyled Forms in 2.0

Though you won't necessarily end up with an exact reproduction, it will look similar.  One drawback is the width of the label is a hard width and will truncate long labels.  This more robust styling below prevents the label truncation.  Enter/Change this into your theme stylesheet: (updated Aug 2nd)

.control  {
    overflow: auto;
}

.control .label {
    display: block;
    float: left;
    width: 150px;  /* non-flexible part truncates label */
    text-align: right;
}

.control.radio .label {
    width: auto;  /* make radio buttons look normal */
}

.control.checkbox .label {
    width: auto;  /* make checkboxes look normal? may not be needed */
}

.datetime.date, .control table, .control.radiogroup table, .control.radio table, .control.checkbox table {
    display: inline;
}

.control-desc {
    margin-left: 160px;  /* make description fall directly under input */
}

.formmoduleedit .item-actions {
    display: inline;
    float:  right;
}

 

The Shape of Things to Come?

In recent conversations in the #exponent-cms irc chat on irc.freenode.net we’ve been discussing how best to maintain Exponent using the most current software technology.  Though Exponent has been based on YUI (Yahoo User Interface) for years, there are more commonly supported libraries which might be worth considering.  Some of these have familiar names in the developer community such as ‘jQuery’, ‘Twitter-Bootstrap’, and the ‘LESS’ css stylesheet compiler.  What’s more, several aspects of YUI are currently broken and unusable in Exponent (e.g., we ship v3.4.0 because newer versions such as v3.4.1, v3.5.x and the soon to be released v3.6.x break our displays).  (Rest assured, we'll maintain backwards compatibility) So here’s where Exponent MIGHT go within the next several releases.

The LESS css stylesheet compiler will likely be implemented and ship with v2.0.8, though not necessarily in its final configuration.  LESS allows a designer to create stylesheet templates with variables and other programming commands to allow the ‘machine’ to do most of the work rather than the designer needing to continually re-write redundant styles.  More information can be found at http://leafo.net/lessphp.  You will be able to fully use .less files in v2.0.8, however their location MAY have to be moved and their inclusion statements MAY need to be edited in future versions once we finalize support.

jQuery is a javascript library similar to YUI, but is designed for smaller projects.  However, it is more widely used and supported across the developer community.  If you were to browse the internet for examples of coding solutions, you’d most likely see several based on jQuery and very few solutions based on YUI.  There are tons of interface add-ons and other solutions available for jQuery.  More information can be found at http://jquery.com/.

Twitter-Bootstrap is a new user interface library of components and styles similar to YUI .  It uses both jQuery & LESS.  In many ways it is much simpler to implement than YUI and is more responsive to various display sizes without the need for multiple stylesheets or themes.  More information can be found at http://twitter.github.com/bootstrap/.
We already have locally running copies of Exponent using these technologies in the form of a custom theme which could easily be dropped into an existing v2.0.8 installation if desired.  So a future version of Exponent with a Bootstrap theme could look like this:

Theming for the iPad

I have been working this week on updating some of my Exponent sites to take advantage of the mobile theming feature now available in Exponent 2. In a nutshell, the feature allows you to define a separate index.php file that will be viewed by clients using mobile browsers. You can also use specific CSS code to adjust the appearance of your page to better suit the browsing of small screen mobile devices.

Enter the iPad. With a maximum screen width of 1024 px you have a screen size equivalent to most laptop screens but with the handicap that dropdown menus (Such as the YUI Top Menu) do not work in the safari browser on the iPad.

Now if you talk to other web designers you will find many who advocate that dropdown menus are a poor way to provide efficient navigation to your users and the fact that they do not work on the iPad calls for a solution.

In my early testing, I made changes in  /themename/mobile/index.php  and was not able to see them  on my iPad. I later found that the iPad was not included in the array that is used to identify browsers in expTheme.php  (fixed for 2.0.7) Once past this hurdle it was not too hard to provide specific code to replace the dropdown menus with a tabbed interface.

That same page has dropdown menus when viewed with a regular PC.

The code in the template for the above tabbed interface contains two embedded navigator modules, each in their own div.

<div id="nav">
<?php expTheme::module(array("module"=>"navigation","view"=>"Tab Nav","source"=>"@top")); ?>
</div>

<div id="top-sub-nav">    
<?php expTheme::module(array("module"=>"navigation","view"=>"children-only-top-nav","source"=>"@top")); ?>
</div>

Included in the CSS directory is a stylesheet for mobile devices.

iPad.css contains some CSS3 specific code which recognizes the iPad and displays css which will work on its 1024 pixel wide screen.

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px)
{
/* Navigation */
#top-sub-nav .navigationmodule.children-only-top-nav ul li a:link {
background:#e2e2e2;
text-decoration:none; }
}

​The CSS above is just an example, obviously there is a whole lot more code needed to display the tabs but you get the idea. The CSS declarations are all wrapped in curly braces and the @media screen and max-device-width designations make this css specific to the iPad.

I have not done a lot of testing with other mobile devices (iPod Touch, iPhone or Droid) but for my purposes where my school sites are increasingly being visited by iPads, I think this will be a workable solution.

You can read a bit more about Mobile theming in this exponent docs site article.

Upgrading Templates from Smarty v2 to v3

When Exponent v2.0.2 was released at the end of October 2011 it incorporated a fairly major change under the hood that could 'break' some custom themes or mods.  The template engine (what is used to display everything) was upgraded from Smarty v2.5.x to v3.1.x.  This was a major upgrade, but the syntax basically remained the same...the issue is that 'bad' template code which worked under previous versions will likely break with this version.  However, Smarty v3 adds many enhancements including the ability to use inline computations/math.  Details on how to identify problems and fixes is at the end of this post.

The Smarty v3 template engine adds a parser/lexer feature to better handle inline code (javascript and php) and also better parses commands such as handling inline math, etc...  However, because the parsing has changed slightly, it tends to choke when running across 'bad syntax' conditions that used to work (slipped by) in earlier versions.  So, if you have any custom templates you are using, you may have to update/edit them to work. 

  • We'd recommend you first install v2.0.2 as a test installation on a server with php debug extensions loaded, and have DEVELOPMENT (Error Reporting) turned on (1).  This will point out which file and line number is causing any problems.
    • In most cases the error message will be somewhat descriptive of what needs changing e.g.,
      • Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error in template "C:xampphtdocsexp2frameworkmodulestextviewstextshowall.tpl" on line 49 "<a href="{link action=delete id=$text->id enabled=0}">{img src=`$smarty.const.ICON_RELATIVE`toggle_on.gif}</a>" - Unexpected "`"' in C:xampphtdocsexp2externalSmarty-3libssyspluginssmarty_internal_templatecompilerbase.php on line 617
      • This error tells you that the file '/framework/modules/text/view/text/showall.tpl' has a problem on line 49 which is an unexpected backtick
  • When updating/changing Smarty versions or plugins, you MUST ALWAYS clear the smarty cache
  • $smarty->_tpl_vars was deprecated without notice, so we MUST now use the getTemplateVars() method instead
  • Smarty v2 automatically disabled error reporting in templates, not so under v3 therefore there are TONS of warnings (missing indexes, etc...) with our plugins and templates.
    • A partial interim solution is that we've turned off error reporting after creating the Smarty object
    • In future versions we may turn error reporting back on to ensure we have clean plugin code which will expose a lot of warnings.
  • Smarty v3 allows expressions or variable references almost anywhere, and (apparently) isn't very tolerant of the backticks required to perform this in v2 (though this shouldn't be the case according to the documentation)...we use a lot of backticks for variables inside of plugin calls in templates.
    • In most cases you can simply remove the backticks in the 'offending' statement.
    • Look for any math statements in backticks such as rank=`$text->rank+1
      • Should be rank=$text->rank+1
    • This will NOT work in pre-2.0.2 since it handles math pretty poorly
  • Because of the better parsing, some of the formerly unescaped characters in template strings will break. The fix is to escape them by adding a backslash before.
  • You MUST enclose filenames containing symbols such as a period or dash, inside quotes now.
  • Look for any unquoted filenames in the {icon call with the img param
    • Search for '{icon' in the *.tpl files in your theme folder
    • {icon img=image.png ...}, should be {icon img='image.png' ...}
    • This will also work well in pre-2.0.2
  •  Concatenation of variables in strings can work by simply placing the text next to the closing brace {$variable}text, but you might best be served by using the 'cat' modifier such as $variable|cat:'text'
    • E.g., search for '{img' in the *.tpl files in your theme folder
    • Typically seen more in filenames such as {img src=`$smarty.const.ICON_RELATIVE`clean.png} or src={$smarty.const.ICON_RELATIVE}clean.png
    • Should be {img src=$smarty.const.ICON_RELATIVE|cat:'clean.png'
    • This will also work well in pre-2.0.2
    • In some server configurations, the $smarty.const.ICON_RELATIVE|cat:'clean.png' resolves literally to .const.ICON_RELATIVE|cat:'clean.png' instead of something like home/path/icons/clean.png.  Therefore it might be best to use the older backtick-delimted variation src='`$smarty.const.ICON_RELATIVE`clean.png'
  • Variables for arrays and objects in Smarty MUST be preceded with the dollar ($) sign. This should be obvious, but even Smarty v3.1.3 still allows basic variables to be referenced without the $.
    • Sometimes shows up as error '...Unexpected "[", expected one of: "}" , " "' in...'
  • And last, but not least...some of these required changes won't work under the older Smarty v2 (Exp v2.0.1 or older) so you'll have to wat least install a test using 2.0.2 to begin any updates.

(This article was originally a news post)

The introduction of YUI 2in3

YUI 3.2 and earlier had no browser based detection loading, and worked well with YUI PHP Loader, allowing for Exponent to load YUI dependencies on the server side. Since the introduction of YUI 3.3.0, which loads (and skips loading) JavaScript based on your browser, it's now only YUI 2.x that can take advantage of server-side dependency calculation and loading, since PHP has no sure-fire way to detect the user's browser. The result: Exponent YUI 2 loading up on the server, and YUI 3 loading via YUI3's built-in Loader.

It's always been the goal to migrate fully to YUI 3 once certain aspects of the library offer comparable widgets to YUI 2. Until we can fully drop YUI 2 from the system, we can at least streamline the YUI loading mechanisms by making use of the YUI 2in3 library. YUI 2in3 is written by the YUI team as a compatibility layer that allows the loading and usage of the YUI 2 library within the YUI 3 ecosystem.

Integrating YUI 2in3 offered many advantages compared to sticking with YUI PHP loader. For one, it streamlines using the YUI environment, setting up a general usage pattern for using both versions of YUI. It also drops 2 external library dependencies: YUI PHP Loader, and Lissa (ties YUI PHP Loader together with minify).

With these changes, however, you stand a good chance of breaking existing views making use of YUI 2 code. We've corrected the themes shipping with Exponent that previously made use of this, like cool waters override for YUI Top Nav.

To help alleviate some migration pains, we've added some helper mechanisms to the {script} plugin, looking for the yui2mods or yuimodules parameter, parsing out whichever modules were passed, and plugging them in to yui3 wrapper code for you. This helps keep 90% of code from breaking, but isn't bullet-proof. Any custom views should definitely be adjusted.

Here's a gist of the old vs new pattern:


A good read that helped me integrate YUI2in3:
http://blog.endpoint.com/2011/02/locally-served-yui3.html

Tips: How to set-up, maintain, and update a web site using git and github

Here are some basics of using git and github to initially get or update the code to your site.  I've found this is an easy way to initial install, and the perform updates on my web sites.  There is a little bit of overhead (~105 MBytes), however the reduction in effort is worth it in most cases.

We’ll assume you have shell access to the server, and git is installed (‘git –v’ should work).

To (initially) Install ExponentCMS as your website:

  • ‘cd’ to the root folder of your web (this folder should be empty since you are building a site from scratch.)
  • To get the latest released code contained in the “master” or default code branch:
git clone git://github.com/exponentcms/exponent-cms.git .
  • HOWEVER, the folder MUST be empty for the clone to work.  The work-around is to leave the "." off the end of that last command and then mv it to the root folder
    • git clone git://github.com/exponentcms/exponent-cms.git
    • mv exponent-cms/* .
  • Launch the web site installer and complete the installation. (www.mysite.org/install/index.php)
  • Install any custom themes or other local mods.

To update the code on your site to the most recent released version:

  • ‘cd’ to the root folder of your web (this folder should be empty since you are building a site from scratch.)
  • First save any local modifications to prevent any (merge) conflicts:
git stash save
  • Next, download and merge the updated code:
git pull
  • Next, restore any local modifications, if you choose (optional).  If you are (still) using a standard/shipped theme your theme configuration settings were reset to default unless you restore them):
git stash pop
  • Then, log into your site as an admin user.  It's always a good idea to run an 'upgrade' so the database and any other changes are incorporated. (www.mysite.org/install/index.php)  In many cases, you'll see a message recommending the upgrade with a link to start the upgrade process.

To switch the code on your site to a development or pre-release testing version:

  • ‘cd’ to the root folder of your web (this folder should be empty since you are building a site from scratch.)
  • First save any local modifications in the current (master) branch:
git stash save
  • Next, switch to and download the development/testing code:
  • To get the bleeding edge code contained in the “develop” branch:
git checkout develop
  • (or) To get and help test a version prior to its release contained in the “release/xxx” branch:
git checkout release/xxx
  • (of course you’ll need to know the release tag or do a ‘git branch –a’ to list the branches)
  • Please bear in mind the release/xxx branch is temporary and will only exist between code freeze and code release.  The “xxx” will be the actual release tag like “v2.0.8”
  • If you’re having problems establishing the develop branch when working from an earlier clone:
git fetch
git checkout –-track –b develop origin/develop
git pull
  • If you’re having problems establishing the release/xxx branch when working from an earlier clone:
git fetch
git checkout –-track –b release/xxx origin/release/xxx
git pull
  • If you are using a custom theme or modifications (in the custom theme folder), your customizations remain intact.  However, if you were modifying system code, it'll have been replaced by the code from the git repo.
  • Log into your site as an admin user and run the upgrade process (www.mysite.org/install/index.php)

To switch the code on your site BACK to the release version:

  • ‘cd’ to the root folder of your web (this folder should be empty since you are building a site from scratch.)
  • First save any local modifications to your development/testing branch:
git stash save
  • Next, switch to the release code branch:
git checkout master
  • Next, download any updated code:
git pull
git stash pop

 

Tips: Resize Your Images Before Uploading to Your Exponent CMS Website

As a general rule of thumb, any images that will be placed into text modules should be resized using an external image editing program such as Microsoft Picture Manager or Picasa before it is uploaded to the Exponent CMS File Manager.

Resizing your images to the exact pixel dimensions that they will appear on the website helps:

  • Reduce the amount of time it takes to upload the image to the File Manager
  • Optimize loading time for the page the image(s) is on
  • Control the amount of disk space and bandwidth that is being used by the website

Example Image that Needs Resized

The image below is a prime example of an image that should have been resized before it was uploaded to the File Manager and inserted into the text module. The image looks slightly distorted and hangs over the side nearly into the next content module beside it.

By right clicking on the image and selecting “View Image” the image will open up in a new tab and show the actual size of the image.

As you can see in the image above, is the actual size of the image is substantially larger (1085px wide by 695 px tall in reality) than how it appears in the text box that is only 273px wide. This image should have been resized to 273px wide by 185px tall.

Resizing Images

To properly resize the image you must first open it up in your picture editing software. For the purposes of this Blog Tip, I'm using Microsoft Picture Manager.

Once you've opened the image in Picture Manager, select the “Edit Picture” button at the top of the editor.

After you've selected “Edit Pictures,” on the right side you can select to “Resize” the image.

Once you select "Resize" on the right hand column, you have the option to type in the new pixel dimension size that you want for the image, or you can reduce the image size by percentage until you reach the dimensions that fit the space that your image will be placed in.

Once your image has reached the desired size, you can choose to save over the existing image or save a new smaller version of the image.

Once you've re-saved your image to the size it needs to be on the website, you can then upload it to the Exponent CMS File Manager and place it onto the site. Read more on uploading files to the Exponent CMS File Manager.

As you can see below, the new resized image is crisper and no longer hangs outside of the boundaries of the text module. Read more on Inserting Images into Text Modules.

This is the proper way to manage images on your Exponent CMS website!

Tutorials: How to Insert an Image into an Exponent CMS Text Module

To insert an image from the Exponent CMS File Manager into a Text module, you must first click the edit icon on the text module to begin editing the module.

Exponent CMS Text Editor

Once you've clicked the edit icon, you will be directed to Exponent's text editor:

Exponent CMS Text Editor

To insert an image into a text module, you must first place your cursor before the sentence in which you want the photo to flow.

Exponent CMS Text Editor

Once you've selected where in the text you want the image to flow, you can then go and select the image you want by clicking on the Insert/Edit Image button in the text editor tool bar.

Exponent CMS Insert/Edit Image Button

Once you've clicked the Insert/Edit Image button, you will be prompted with an Insert/Edit Image dialogue box. To select the image you want to insert into the module, you must then click the “Browse Server” button.

Exponent CMS Insert Image Configuration

After you click the “Browse Server” Button, the Exponent CMS File Manager will open, allowing you to navigate to the image you want to insert (Read more information on how to upload new files to the Exponent CMS File Manager):

Exponent CMS File Manager

To select the image you wish to insert into the text module, you must find the image in the File Manager and then click on the Green arrow next to the image underneath the “Actions” Column of the File Manager:

Exponent CMS Insert Image Configuration

After you've selected your image, the Exponent CMS File Manager will automatically close and your image will be inserted into the Insert/Edit Image dialogue box where you can select positioning, linking and padding for your image as well as giving your image an Alternative text title:

Exponent CMS Insert Image Configuration

The Image properties dialogue box also has two tabs called "Links" and "Advanced" where you have other image configuration options. If you want to embed a link into the image, click on the "Link" tab. Here you can define the URL you'd like to link to and also determine whether that link should open up into a new window.

Exponent CMS Insert Image Configuration

On the Advanced tab, you have the option to type in a pre-determined CSS style class for your image such as "border" if there has been a CSS style sheet created that puts a border around your images. Here you can also add an Advisory title for the search engines to let them know what the image is that's being displayed.

Once you've finished configuring your image, click the “OK” button. You will now see the image pop into your text editor in the position you've defined:

Exponent CMS Text Editor

After you've clicked save, you're all done! Your image has successfully been inserted into the module and will appear on the page:

Exponent CMS Image Editing