Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #13211

    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.

    #78277

    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

    #78278

    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.

    #78279

    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

    #78280

    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"> <!-- your own CSS for category image -->

    <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.

    #78281

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

    Regards,

    Mya

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Special image for each category’ is closed to new replies.