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

    Hi,

    I would like to use the plugin “Category Images” to place an category image depending on the category on top of the category archive, and found this tutorial here, where to put the plugin’s code

    <?php if (function_exists('z_taxonomy_image_url')) { ?>

    " alt="<?php the_title(); ?>" />

    <?php } ?>

    to the category.php as they write in this tutorial.

    But CORONA does not have a “category.php” file. Where can I add instead this code, so that it outputs the category images at the category archive pages? (Each category gets an own image, which can be uploaded by using the plugin at category settings page.)

    thanks!

    #106251

    [UPDATE]

    okay, it seems to be in “framework” –> “php” the file “function-set-avia-frontend.php” around line 780.

    But due to I don’t know PHP well, could you please help me out with the PHP syntax, how to add this code

    <?php if (function_exists('z_taxonomy_image_url')) { ?>
    <img />" alt="<?php the_title(); ?>" />
    <?php } ?>

    in the right way to this CORONA file?

    I have tried with “try&error” a bit to this

    if (function_exists(‘z_taxonomy_image_url’)) {

    ” alt=”<?php the_title(); ?>” />”

    <?php } ?>

    but this gives me still a "syntax error" concerning the "?php" things ;-)

    Parse error: syntax error, unexpected ‘?’ in /home/www/web146/html/_wp/site2013/wp-content/themes/corona/framework/php/function-set-avia-frontend.php on line 784

    `

    line 784 is the line beginning with <img src … .

    If you have a solution for adding category images to CORONA without plugin, I would highly appreciate this!

    Thanks a lot for any help!

    #106252

    okay, I’ve found somewhere a quick and easy solution without using a plugin to show

    CATEGORY IMAGES in CORONA

    Here is the HOW TO:

    1. Create header images for all your categories, all in the same size. Mine are fullwidth: 930x250px, and upload them to your media library. Copy the URL of these images – you’ll need the URL later.
    2. Open CORONA’s archive.php and look around line 15; make the h2 headline inactive, if you only want to show your category image (as here in my case), like this:

      <!-- <h2 class='firstheading'><span class='container'><?php echo avia_which_archive(); ?></span></h2> -->

    3. Right after it add the following code:

      <div id="categoryimage">

      <img src='<?php

      if (is_home()) { // Home

      echo ' ';

      } elseif (is_category('photography')) {

      echo 'http://yoursite.de/wp-content/uploads/sites/2/2013/02/categoryimage-photography.jpg';

      } elseif (is_category('design')) {

      echo 'http://yoursite.de/wp-content/uploads/sites/2/2013/02/categoryimage-design.jpg';

      } elseif (is_category('paintings')) {

      echo 'http://yoursite.de/wp-content/uploads/sites/2/2013/02/categoryimage-paintings.jpg';

      }?>'>

      </div>

    4. Explanation of this code:

      you create a new div container, which is called here “categoryimage”, so that you can position right your category image.

      You need to add your own category name, where I have added my own category names “photography” and “design” and “paintings”; you can use instead the names also the IDs of your categories.

      If you have more than these 3 categories, you can extend this code, by copy&paste the last “elseif”-line.

      Add there your own paths to your category images as you have uploaded them before to your media library.

    5. You can now stop editing in the archive.php, if you do NOT like to use/add your category DESCRIPTIONS!
    6. If you like to use/add your category DESCRIPTIONS here, too, then you need to put the following code in the archive.php right AFTER the line

      <div class='container'> and before <div class='template-blog content'> . Use this code:

      <div id="category-description"><?php echo category_description(); ?></div>

      Now save your archive.php, we are ready with it.

    7. Now we need to position and style the category image and its description. Open your custom.css from the folder “css” and put in the following code:

      /************** Category Images *******************/

      #categoryimage {

      margin-left: 35px;

      margin-top: -25px;

      }

      #categoryimage img {

      -webkit-border-top-left-radius: 10px;

      -webkit-border-top-right-radius: 10px;

      -moz-border-radius-topleft: 10px;

      -moz-border-radius-topright: 10px;

      border-top-left-radius: 10px;

      border-top-right-radius: 10px;

      }

      #category-description {

      background-color: #ADA7AF;

      border-bottom-left-radius: 10px;

      border-bottom-right-radius: 10px;

      color: #FFFFFF;

      font-size: 12px;

      font-style: italic;

      letter-spacing: 0;

      line-height: 19px;

      margin-bottom: 20px;

      padding-left: 20px;

      padding-right: 20px;

      text-align: justify;

      }

      This adds the category image at the top of the category posts, as a fullwidth image and directly below the image a box with the description. The styling looks in my case now like this:

    8. Ready – quick and easy without a plugin. If you need/have more categories, then open again your archive.php and extend there the code as described above.

      You can tweak your styling using FIREBUG.

    #106253

    Hi,

    Excellent tutorial.

    The one problem I have personally with using such a style is the potential lost SEO value of not having that as a css enhanced text inside h2 or h3 tags. To make up for that loss, the image title, description, alt, needs to have proper info inside.

    The second problem which is from design stand point, is that the images need to be inside css, in different classes and in the code, the if/then statement only changes the class name , depending on which image to display. However, that’s just semantics, i personally believe that there are many ways to get the job done.

    Thanks for the tutorial!

    Nick

    #106254

    thanks, Nick, this all is done with my unfortunately only rudimentary knowledge of CSS and coding.

    If you or someone else have a better solution instead of this if/then statement, I would appreciate it!

    Let me know … thanks!

    #106255

    Hi,

    The if/then structure will always be there. The way you’ve done it is fine, but since google doesn’t read the text written inside an image, you just need to describe the purpose of the image for google as I written above.

    Thanks,

    Nick

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

The topic ‘What is CORONA's equivalent to category.php to add there category images code?’ is closed to new replies.