Miscellaneous Magento tips that came handy recently.

CSS Background Image Map - Ok this first one isn’t directly related to Magento, but it can certainly come in handy! Need to turn a background into a clickable link? Using Image mapping you can make multiple clickable areas of various sizes that can link to different content. Thanks to Debbie Campbell at Position-Relative.

Magento: Change Image Sizes in Product List or Grid View - Handy code snippet that is useful almost anytime you want to edit or create a new Magento Theme. In summary, navigate to app/design/frontend/…/…/template/catalog/product/list.phtml. Within list.phtml there are hard coded values for image size. Just change them there to what you want. Then you adjust your css styles of the product list & grid items to properly fit the image. Remember to use a handy DOM inspector extension like Firebug to easily determine css stylings and selectors. In Internet Explorer just hit the F12 key to open of Web Developer Tools.

Magento: Add CMS Pages to Menu Navigation - You would think is simple to do with such a powerful platform like Magento, like just clicking a checkbox to add or remove it from the navigation. That however is not the case. Luckily there is a pretty easy solution where you can programmatically call for the CMS pages and then loop through them and output additional links in the navigation.

Magento Resources - The team over at Inchoo.net know a ton about Magento, so if you’re looking for more information on developing with Magento, check out their blog!

Magento: Change number of Products per Row - There is a forum string that goes back and forth over this subject, but I found two different solutions useful.

#1

go to:

/var/www/html/matrixgames/app/code/core/Mage/Catalog/Block/Product/Abstract.php and change the following line from: protected $_defaultColumnCount = 3

to: protected $_defaultColumnCount = #desired

#2 Try this in your app/design files template/catalog/product/list.phtml