Solved

replace category title text with an image in magento 1.7

Posted on 2013-02-03
3
777 Views
Last Modified: 2016-03-02
I have a store run by magento v1.7, it has a custom theme which works flawlessly apart from the fact that I can't get the title text to be replaced by an image.

If possible it would be great if an image could be displayed with the title text over the top for seo purposes.

I have tried several scripts and the image has been uploaded correctly to the media/catalog/category folder, also shows in the backend fine.

This is the script in the view.phtml;

<?php
    $_helper = $this->helper('catalog/output');
    $_category = $this->getCurrentCategory();
    $_imgHtml   = '';
    if ($_imgUrl = $_category->getImageUrl()) {
        $_imgHtml = '<p class="category-image"><img src="'.$_imgUrl.'" alt="'.$this->htmlEscape($_category->getName()).'" title="'.$this->htmlEscape($_category->getName()).'" /></p>';
        $_imgHtml = $_helper->categoryAttribute($_category, $_imgHtml, 'image');
    }
?>


Any assistance would be greatly appreciated. I am new to magento so please explain clearly. Thanks.
0
Comment
Question by:Dan_Lapodo
  • 2
3 Comments
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 38850849
The code you've posted generates the HTML for the image and stores it in the $_imgHtml variable, but it doesn't output it anywhere. You need to make sure you're echoing that variable out wherever in your page you want the image to display. Something like this:

<?php if($_imgUrl): ?>
    <?php echo $_imgHtml ?>
<?php endif; ?>

Open in new window

0
 

Author Comment

by:Dan_Lapodo
ID: 38851067
Thanks for that ChrisStanyon, it works well and loads the image.

Is there any chance you know how to make the image responsive, the magento theme we have is responsive and when resized the image doesn't degrade?
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 38851207
There're several ways of using images in responsive design, but unfortunately no 'official' way of doing it. They all seem to have their own pros and cons - some rely on extra HTML markup, some just on CSS, and some use Javascript. One solution may be preferred over another but that will be down to your own personal choice / ability / restrictions etc.

I would advise Googling it (responsive design images). There's a lot of good articles out there which discuss the various methods, and you'll likely find one that suits your particular project.

Don't get too hung up on the fact that it's Magento - simply concentrate on the HTML, CSS etc.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you’re thinking to yourself “That description sounds a lot like two people doing the work that one could accomplish,” you’re not alone.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question