Magento CMS Tutorial/Reference

I was helping someone learn how to use Magento CMS static blocks and pages and I couldn’t find a great reference. I’ve decided to write my own. 

Pages – Pages are what shows up in the front-end. The URL key is what you use to access the page (yoursite.com/urlkey) and the content is what appears in the page. Title shows up in the title bar. Simple.

Static Blocks – These can be inserted into any page and repeated. For example, if you had a page that had a block of text that you want to appear on another page but you didn’t want to rewrite it and have to sync between both pages then you would want to create a static block and include that static block in each page’s content. The static block si referenced by the Identifier field. Here’s an example of how this would be used. Static blocks and contain other static blocks too. 

Page Content Codes

When working in the Magento CMS you can enter any HTML into the content box, but you can also put in these special things:

  1. Store URLs: {{store url=”path_to_your_media_file_goes_here”}}
  2. Skin Image URLs: {{skin url=”path_to_your_media_file_goes_here”}} 
  3. Media Image URLs: {{media url=”path_to_your_media_file_goes_here”}}
  4. Static Block Content: {{block type=”cms/block” block_id=”page_identifier_goes_here”}}
  5. Other Data Blocks (advanced): {{block type=”module/blockclass” block_id=”choose_a_name” template=”template_file_path”}}

Now I’ll go into a bit more detail:

1. Store URLs
{{store url=”path_to_your_media_file_goes_here“}}

If you want to link to a CMS page or some other page on your site you should use this code.

Example: Click here for customer service

2. Skin Image URLs
{{skin url=”path_to_your_media_file_goes_here“}} 

Skin image urls can be inserted into a page as paths to a skin image or file. These are relative to the skin/frontend/*package*/*theme*/ directory in your website.

Example: Here is a picture of our company logo: <img src=”{{skin url=’images/logo.png’}}” />

3. Media Image URLs
{{media url=”path_to_your_media_file_goes_here“}}

Skin image urls can be inserted into a page path to point to an uploaded image or file. These are relative to the media/ directory of your website.

Example: Here is a picture of a duck: <img src=”{{media url=’ducks/duckpicture.png’}}” /> and click here for a PDF that we created for you.

What’s the difference between skin images and media images?

Great question! Skin images are store layout/theme dependent and may change depending on the store view, but media images are static and don’t care about what theme is currently being displayed to the user. Media images are typically files that are very likely to change over time where skin images 

4. Static Block Content
{{block type=”cms/block” block_id=”page_identifier_goes_here“}}

Static block content can be inserted into the content of one or more pages. This allows you to have repeated content in your pages without having to manage multiple content page coppies every time you make an update.

Example: Here is your navigation menu: {{block type=’cms/block’ block_id=’my_navigation_menu’}}

5. Other Data Blocks (advanced)
{{block type=”module/blockclass” block_id=”choose_a_name” template=”template_file_path}}

If you are coding template files nad custom block classes, you can include any block class as a singleton using this method .The type attribute is the code to create the block class and the block ID is a custom name you can choose for the block. This block name is used in caching sometimes. Finally, the template file path is a reference to the template file from the app/design/frontend/*package*/*theme*/template directory.

TIP: You can also set the the blcok type to core/template to create a simple block that does not have a specific block class.

Example: Here is my footer block content: {{block type=’core/template’ block_id=’footer_block’ template=’page/html/footer.phtml’}}

 

Static_block_within_static_block

 

Advertisements

One thought on “Magento CMS Tutorial/Reference

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s