Special image for each category « Support Forum | Kriesi.at

Support Forum » Newscast

Special image for each category

6 posts from 3 voices

Started 11 months ago by colorit2
Latest reply from Mya
This topic is closed
This topic is resolved

Tags:

colorit2
Member

Hi,

my category archive is looking at the moment like this:

http://i50.tinypic.com/2dsfqja.jpg

I would like to have an image over the whole width on top of each category archive;
each category should have its own image.

I've made a composing with Elements, how it should look like:

http://i46.tinypic.com/v45g1t.jpg

How can I do this?

And when it is too hard to code in the theme itself, can you recommend perhaps a plugin for it?

Thanks a lot in advance.

Posted 11 months ago #
Mya
Hi colorit2,

I believe the easiest route would be to use a plugin like http://wordpress.org/extend/plugins/category-images-ii/. Personally, I've never used it so I can't attest to its workability but from the summary it sounds as if it will work.

The template you will need to edit is archive.php. Here's the code:
```
<?php /* If this is a category archive */ if (is_category()) { ?>
<?php _e('Archive for','newscast'); ?>  <?php echo single_cat_title(); ?>
```
Regards,
Mya
Posted 11 months ago #
colorit2
Member

I have installed the plugin, uploaded my category thumbnails, but I have no know-how about editing template files.

I have used your code above and placed there the tempalte tag from the plugin (mentioned here: http://wordpress.org/extend/plugins/category-images-ii/other_notes/)

<?php ciii_category_images(); ?>

and put in in archive.php of NEWSCAST here, so I have this:

<?php /* If this is a category archive */ if (is_category()) { ?> <?php _e('Kategorie: ','newscast'); ?> <?php ciii_category_images(); ?> <?php echo single_cat_title(); ?>

But I have no images, and I don't know what the plugin's author means with "You will need to style the HTML output yourself", what and where I need to edit what :-(

So if you cannot help me with this issue, do you have perhaps another solution for my question which is much easier to implement or much automatic?

Thanks a lot in advance.

Posted 11 months ago #
Devin
Moderator

Hi colorit2,

Unfortunately we really are unable to offer support on third party plugins. If you are unfamiliar with html/css and php I would recommend looking into a Freelance Web developer to finish the customization for you. Implementing something a plugin should take less than 2 hours depending on your sepcifications.

Regards,

Devin

Posted 11 months ago #
colorit2
Member

Hi Devin and @all,

thanks, but I've found out, that a plugin isn't necessary for my initial question.

If someone needs a solution, here is mine, found at a German tutorial yesterday;

If you like to show a header image above a category page, then follow these steps:

1)
prepare your header images: right/desired size (I used for example full width images with 960x250px)

2)
upload them in Wordpress' media library; note/copy the path of the image, you'll need it for the following code.

3)
Open archive.php and find at around line 11 <div id="main">

4)
directly after this, insert this (note the explations within the code):
<div id="categoryimagestyle">  <img src='<?php if (is_category('167')) { // the ID of your category echo 'http://yoursite.de/files/2012/06/categoryimage-167.jpg'; } elseif (is_category('photography')) { // you can enter the ID or the slug of the category echo 'http://yoursite.de.de/files/2012/06/categoryimage-photography.jpg'; } elseif (is_category('164')) { echo 'http://yoursite.de.de/files/2012/06/categoryimage-164.jpg'; } elseif (is_category('design')) { echo 'http://yoursite.de.de/files/2012/06/categoryimage-design.jpg'; }?>'> </div>

5) Save and you're ready; use Firebug to adjust your CSS style for category image, here: #categoryimagestyle

6) Explanations:

- you can enter the ID of your categories or the name: (is_category('167')) or (is_category('photography'))

- the CSS for the category header image is just this:

#categoryimagestyle { margin-left: 20px; margin-top: -6px; }

Result:

http://i46.tinypic.com/10dhd05.jpg

Hope this helps, if anybody needs this, too. It's a great possibility for an "eye-catcher" at top of the category pages.

Posted 11 months ago #
Mya

Glad you were able to find a solution. Thanks for posting!

Regards,
Mya

Posted 11 months ago #