Forums

How To Make Header Image a Link

Permalink
Hello, I am trying to make the image in my header a link. I am using a theme (Natural Essence) that does not have an image block. I changed the image picture by going through my cpanel and replacing the header.jpg, but I do not know how to make it a link.

Can anybody offer any help with this?

Thank you.
TheSandDuneandTheSnowMan
 
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Edit your header.php file and find this
<div class="header">
               <img src="<?php   echo $this->getThemePath()?>/img/header.jpg" alt="header image" align="middle" />
            </div>

Change it to this
<div class="header">
               <a href="http://www.YOUR_PAGE.com">
               <img src="<?php   echo $this->getThemePath()?>/img/header.jpg" alt="header image" align="middle" /></a>
            </div>
adajad replied on at Permalink Best Answer Reply
adajad
Option 1 - Hard code in a link

1. Download and open the file header.php (in 'root/packages/theme_natural_essence/themes/natural_essence/elements)
2. Replace line 27
<img src="<?php echo $this->getThemePath()?>/img/header.jpg" alt="header image" align="middle" />

with
<a href="http://www.yourlink.com"><img src="<?php echo $this->getThemePath()?>/img/header.jpg" alt="header image" align="middle" /></a>

3. Save the file and upload it to your host again (same path as in #1)


Option 2 - Create an editable area and manage image and link from inside concrete5

1. Download and open the file header.php (in 'root/packages/theme_natural_essence/themes/natural_essence/elements)
2. Replace line 27
<img src="<?php echo $this->getThemePath()?>/img/header.jpg" alt="header image" align="middle" />

with
<?php  
    $a = new GlobalArea('Header Image');
    $a->display();
?>

or
<?php  
    $a = new Area('Header Image');
    $a->display();
?>

3. Save the file and upload it to your host again (same path as in #1)


If you choose a global area you can manage your image and link from dashboard/stacks where you will find a stack now named Header Image. A global area will use the same content on all pages. You can also manage the content in a global area from any page if you put it in edit mode.

The basic area will create an area much like your 'Main' or 'Sidebar' where you can add content in edit mode. My suggestion would then be to set up page defaults in your header. The upside with this approach is you can have different images on every page if you like.

When you create an area you can add any type of block to it, and in your case the core Image block will be enough as you then have an option to add a link to your image. You will also need to upload your image(s) to the File Manager.

I would highly recommend using option 2 (creating an area) as it will be more flexible and easier to work with over time.

May I also suggest some links for further reading:
http://www.concrete5.org/documentation/how-tos/designers/absolute-b...
http://www.concrete5.org/documentation/getting-started/...
http://www.concrete5.org/documentation/how-tos/editors/another-prim...
http://www.concrete5.org/documentation/how-tos/editors/share-conten...

The How-To section and the Forum search are excellent places to find answers to many of your questions.
TheSandDuneandTheSnowMan replied on at Permalink Reply
TheSandDuneandTheSnowMan
Thanks both you guys.
adajad, I used option two with a global area. The only thing is that when I make changes to the new image header block it says access denied, but after I publish the edits the correct image is reflected, so it doesn't seem to be creating a problem.
I will go through your suggested reading list. Thank you.
wpatters1229 replied on at Permalink Reply
wpatters1229
My header.php file for the theme Greek Yogurt has this link

<div id="header-image">
            <?php  
         $a = new Area('Header Image');
         $a->display($c);
         ?> 
      </div>

I tried changing it to:
<div id="header-image">
            <?php  
         $a = new Area('Header Image');
         $a->display();
         ?> 
      </div>

To see if it would create a Stack called Header Image but it doesn't. What is wrong. I created a stack called Header Image and placed an image block into it with the image I want and all these changes did was put up a line of code where the image was suppose to be.
mhawke replied on at Permalink Reply
mhawke
See my full explanation here:

http://www.concrete5.org/community/forums/themes/modifying-greek-yo...

You're close to a solution. Basically the magic happens when you change an "Area" to a "Global Area"
(also notice that $a->display() is missing the $c for Global Areas)

Insert this in your header.php
<div id="header-image">
<?php  
$a = new GlobalArea('Header Image');
$a->display();
?> 
</div>


This will create a new stack called 'Header Image' where you can add an image block.