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.
Can anybody offer any help with this?
Thank you.
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
with
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
with
or
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.
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.
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.
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.
My header.php file for the theme Greek Yogurt has this link
I tried changing it to:
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.
<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.
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
This will create a new stack called 'Header Image' where you can add an image block.
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.
Change it to this