Often you have call-to-action images that you want to display in several locations on your Magento site. Perhaps you are pushing a certain line of merchandise, offering a promotion, etc. These types of call-to-action images are referred to in Magento as callouts.
There are three ways to display a callout image in Magento:
- Calling it directly in a PHTML template file
- Selecting a CMS block in Magento’s category manager
- Updating Magento’s layout XML
The first option is perhaps the easiest — you figure out which template your image needs to be placed in, and drop the image code in the template PHTML file. The problem with this approach is that it’s neither modular nor flexible. Template files are used across different pages as defined by Magento’s layout XML. Perhaps you want to place a banner image above product listings on category pages, but not have the banner show when the product listings template is called on the search results page. Or, more specifically, you want to display the banner above the product listings on a specific category. In either case you would be writing code that is completely unnecessary to accomplish your design objectives.
The second option is much better than the first. Creating a static block in Magento’s CMS allows you to specify what category pages the image should display on. This way, you can manage what pages callout images are displayed on a selective basis. The problem with this approach is that selecting a CMS block from a dropdown in the Magento admin interface is limited to Category pages and further restricted depending on if the layout or template used to render a given category page calls the CMS block. Lastly, CMS blocks cannot be selected the admin for product pages.
The third option is the best. Using Magento’s XML layout engine provides the most flexibility. You can either create callout images inside a Magento CMS static block, or create them directly via XML. On category and product pages, you can call the XML within the Magento admin. Furthermore, category pages allow you to inherit layout definitions among subcategories. This means that you can define a callout image once and display on any/all descendant categories. If you require callout images on other types of pages (ie: the search results page, or customer dashboard), you can do so in your theme’s layout files using the proper XML layout syntax.
Magento CMS + Admin Approach to Callout Blocks
Below are the steps to display a callout image on multiple category pages by creating a CMS static block, and calling it in the Magento admin.
Always perform the types of operations listed below in a development environment.
- Login to the Magento admin and navigate to CMS > Static Blocks.
- Click the Add New Block button in the top right.
Provide a title, identifier and HTML for the static block, then click Save Block.
- Navigate to the Custom Design tab for the category that the static block should be displayed on.
Add the proper XML in the Custom Layout Update field and click Save Category.
before="-"attribute instructs the Magento layout engine to place the CMS block before any other block within the
Confirm the callout image is present in the category page(s) on the frontend.
Magento Theme Approach to Callout Blocks
Below are the steps to display a callout image in the customer account dashboaord by updating a Magento XML layout file in your theme.
- Login to the Magento admin and navigate to System > Configuration > Developer (the developer link is under the Advanced heading at the bottom of the page).
- Select the Current Configuration Scope in the top left of the page.
Click the Debug heading and set Template Path Hints to Yes.
- Open up the frontend of the site and login to a customer account.
Take note of the template path that is in the location you want your callout image to appear.
- Open the XML layout file in in your theme that is in charge of loading the template file from the previous step.
- Find the XML block inside the layout file that is responsible for loading the template file identified in step 5.
Add the proper XML to display your callout block.
While this is a perfectly valid way to update your theme’s XML layout files, a better approach to layout updates is accomplished by creating a
local.xmlfile for your theme. While that is outside the scope of this post, there is a good reference on the local.xml approach on Inchoo’s blog.
Save the XML layout file and confirm the callout image is present in the customer dashboard on the frontend.
Magento “Callout” Approach to Callout Blocks ~ bonus
Magento is flexible enough that you can create callouts entirely in XML (no CMS block required). The nice thing about a pure XML approach is that you don’t have to clutter your CMS with static blocks that perform the very simple task of displaying callout images. The downside of this approach is that changes to the callout are more reliant on developers than the previous options. So, if your team manages content more efficiently/effectively in the Magento CMS, this probably is not the best approach. Onward…
Inside the default theme of Magento’s base package, there is a directory named
callouts. That directory contains two template files named
right_col.phtml. These files are responsible for rendering callouts on the frontend. The former is intended for callouts displayed in the left sidebar, the latter is for the right sidebar. Instead of using a
<block type="cms/block"> in your XML layout, you will use a
<block type="core/template">. Below, I’ll show you how to create a new callout template to display the cat banner in your customers’ dashboard.
Copy the template files from
calloutsdirectory in your theme. Since I am using Magento’s rwd package, I’ll copy the files to the
calloutsdirectory of the default theme located at
- Inside your theme’s
calloutsdirectory, copy the
left_col.phtmlto a new template file named
main_col.phtmland adjust the code as needed. I’ll echo some “Hello World” text for the example.
Add the proper XML to display your callout block using the new
main_col.phtmltemplate file to render it.
Above we use a few new
<action>methods. There is a good overview of Magento’s action methods on StackOverflow. Again, a better way to modify your theme’s XML is to use the local.xml approach explained on Inchoo’s blog.
Save the XML layout file and confirm the callout image is present in the customer dashboard on the frontend, along with the “Hello World” text.