WordPress.org

Ready to get started?Download WordPress

Forums

More than one instance of category images (18 posts)

  1. Jinsan
    Member
    Posted 9 years ago #

    Right,

    So I'm starting with Gespaa and playing with it to get what I want.

    http://sekhu.net/wp/

    What I want to do is:

    1) include a category image where the category is titled, above the title itself. There would be a square image of x amount that would fill the white gap for that specific post with a relevant category image. I know how to use the plugin to some extent, but there's more.

    I want to place the words "Filed under" as they are no, but at the top of the image, so you have the said words, the image and then the category title. Make sense?

    2) Now, I will set the page to display only one post from any category, which would display the image. I also want a list of recent entires to have the category image placed as a drop cap at the bottom of the page. I'm playing with the boxes right now, but just think of any site which has Recently posted, they have a list of posts, so let's say I have the latest five, and they all have an excerpt and as a drop cap or next to the date of the post the category image.

    3) More over, when a user clicks a post, I want the image to shift up to another space.

    Here's a revised perhaps equally ambitious attempt at what I want to do:

    http://sekhu.net/stuff/layout1.jpg

    So instead of about and the user image, in the single.php (post entry) it would replace the user image with the and isntead say currently viewing at the top of the category image. The empty side where there was white space will probably contain any related posts within that category.

    4 (ish) It can be done, I'm sure but difficult to implement and how would the plugin work with regards to refrencing a cat image for a post entry but with the image perhaps in a different container, or could they both be on the same page?

    Please don't say it's ambitious, I don't know how much simpler I can make the design.

  2. Joshua Sigar
    Member
    Posted 9 years ago #

    Wheew, what a long read. I couldn't tell which ones are the questions. So one thing at a time.

    Let's start from the frontpage. Is the following a question?

    I want to place the words "Filed under" as they are no, but at the top of the image, so you have the said words, the image and then the category title. Make sense?

    You know how to use the plugin, so I guess you know what to do to make the category image show up. For the ordering, though you could radically manipulate the positioning with css, I suggest, to make it easy, you change their order in html markup. So just have roughly the following in html.

    Filed under:
    <?php get_category_image(); ?>
    <?php the_category(); ?>

    Did I just answer one of your questions? :)
    p.s. Please number the questions so that is easier to keep track and to refer to.

  3. Jinsan
    Member
    Posted 9 years ago #

    Yeap numbered them, and thanks for the reply I was thinking CSS rather than the actual file which is why I found it so confusing. BUt yeah that looks good, though...

    What I want is the text to remain on its own on the left hand side and the image to be on right hand side, where the category title is. At the moment I seem to have difficulty doing this as reducing the width of the entry body pulls in the category title.

    1) Will I have to make a new container in order to hold the image?
    2) if 1 is true, then will the category image call still be able to post the correct image?

    Thanks for the info, it gives me something to start with.

  4. Joshua Sigar
    Member
    Posted 9 years ago #

    After seeing the mockup, all makes sense now. :)

    <div class="post">

    // Float right and apply width=X
    <div class="postcategory">
    Filed under:
    <?php get_category_image(); ?>
    <?php the_category(); ?>
    </div>

    // Apply margin right=X to allocate space for cat stuff
    // for each blocks
    <h2 class="postdate"></h2>
    <h3 class="posttitle"></h3>
    <div class="postbody"></div>

    </div>

    1. Above is you'd want to do it
    2. Yes, as long it's within the same one Loop block.

  5. Jinsan
    Member
    Posted 9 years ago #

    yeah that worked take a look I haven't added the category image but it's just a formality, I want to sort the structure before I start adding junk to the site.

    So far so good, that's one obstacle out of the way.

    Now, if I was to do number 3 and 4, I take it would be the same idea - that is, the location of the where I want the image would be placed within the same loop.

    In order to have the precontent boxes (the about bit and such) I may have to place the category image within the header.php for the single.php to display the full post and with the image at where user image is in the mockup. The left hand side where it says "about" would turn into a list of links for related posts. How do I get about this problem? With the category image text I can change wit hno porblme to Currently Viewing, but the problme is how does it link?

    Thanks in advance

  6. Joshua Sigar
    Member
    Posted 9 years ago #

    Before you move on, what I proposed is not what you implemented. You have .postcategory after everything and then you apply negative margin-top on it. It will become an issue when the posts have different length ( or number of lines). The top alignment of .postcategory would be inconsistent as a result, unless you meant to bottom-aligned the .postcategory.

  7. Joshua Sigar
    Member
    Posted 9 years ago #

    So, we're on single.php, now?

    In order to have the precontent boxes (the about bit and such) I may have to place the category image within the header.php for the single.php to display the full post and with the image at where user image is in the mockup.
    I don't get why you have to touch header.php

    The left hand side where it says "about" would turn into a list of links for related posts. How do I get about this problem? With the category image text I can change wit hno porblme to Currently Viewing, but the problme is how does it link?
    How'd you turn "about" into "related post"? Well, in index.php you'll have "about" box, while in single.php you'll have "related post" box; easy as that, isn't
    Don't you have a plugin to grab the related posts?

    but the problme is how does it link?
    Can't understand the question.

  8. Jinsan
    Member
    Posted 9 years ago #

    Ok back to the first thing, if I want to apply the condition as set out in 1 and 2 how SHOULD it be implemented? I was cautious about using negative margin as IE doesn't seem to like it. Just to clarify I will be only showing the single, latest post for any category. The other posts are there simply because I haven't got around to creating the template so it displays as such.

    Will the negative margin, and the form in which I have applied the code still cause problems later on?

    with regards to single.php

    When a user clicks on the post link, they will go to the post where the content of the full post is displayed. Above the content, the container which has about and the user image will become the related posts link, the user image is replaced by the category image instead.

    The reason I suggest I may have to modify the header.php is because the main content div begins in header.php - I believe this to be true of pretty much all themes. If this is't a problem, and I can move main content div/wrap etc into the index.php file, then this will allow me to modify the about section to create the effect for single.php. The about container is placed before the main content container.

    Is that any clearer, or am I still talking gibberish?

  9. Joshua Sigar
    Member
    Posted 9 years ago #

    Ok back to the first thing, if I want to apply the condition as set out in 1 and 2 how SHOULD it be implemented?

    Are you talking about 1 and 2 of your first post? or second post?

    Will the negative margin, and the form in which I have applied the code still cause problems later on?
    The problem with it was that the .postcategory will go up and down (bottom-aligned with the post text) depending on the length of the post. The problem may not exists if you excerpt or fixed-length post.

    The reason I suggest I may have to modify the header.php is because the main content div begins in header.php - I believe this to be true of pretty much all themes.
    header.php: opening #wrapper, #header, #topnavigation
    index.php/single.php: #content, #subcontent(s), #sidebar
    footer.php: #footer, closing #wrapper

  10. Jinsan
    Member
    Posted 9 years ago #

    ah, so I can move the main content over to the other files. Great that simplifies things a bit for me. I see what you mean with regards to alignment if your reply was related to the mock up then I'll try implement it that way.

    <div class="post">

    // Float right and apply width=X
    <div class="postcategory">
    Filed under:
    <?php get_category_image(); ?>
    <?php the_category(); ?>
    </div>

    // Apply margin right=X to allocate space for cat stuff
    // for each blocks
    <h2 class="postdate"></h2>
    <h3 class="posttitle"></h3>
    <div class="postbody"></div>

    </div>

    Now do place the entirety of that into the index.php and apply the CSS accordingly? replacing the current method by which I've applied the styling?

    Thanks for putting up with this far! :)

  11. Joshua Sigar
    Member
    Posted 9 years ago #

    Yeah, you put all that into index.php and do the CSS. (Of course you need to replace all the fake tags with the actual ones.)

  12. Jinsan
    Member
    Posted 9 years ago #

    Ok I've tried it, and it's done what I did before but without the ngative margin usage. It's also, unfortunately, borked the footer -

    any suggestions?

    You can take a look tomorrow if you want it's kinda late here anyway

    thanks again

  13. Joshua Sigar
    Member
    Posted 9 years ago #

    The html validator says that you have unbalanced div. Fix it first.

  14. Jinsan
    Member
    Posted 9 years ago #

    should be fixed now. just revalidated it. footer still not being friendly.

    Cheers again

  15. Joshua Sigar
    Member
    Posted 9 years ago #

    Is #maincontainer the one that should wrap everything? I see that #footer is not inside it.

  16. Jinsan
    Member
    Posted 9 years ago #

    I belive so, though I'm not 100% certain it's an existing theme I'm playing with by ifelse.

    I'm not sure what I did to the footer, but what do you mean when yuo say #footer is not inside it?

    In the index.php the last line says:

    <?php get_footer(); ?>

  17. Joshua Sigar
    Member
    Posted 9 years ago #

    What you have from looking at the source code.

    <div id="maincontainer">

    // all other stuff

    <div id="footer"><div>

    You don't have #maincontainer closing div after #footer. I don't know if you deleted it accidently or whatever. It's supposed to be something like the following.

    <body>
    <div id="maincontainer">

    //all other stuff
    <div id="footer"></div>
    </div> closes the #maincontainer
    </body>

    The closing for #maincontainer is to be in footer.php

  18. Jinsan
    Member
    Posted 9 years ago #

    hmm you know that div error that I got? Well...I removed the div...so I don't know if there is supposed to be an extra div at the start somewhere? It validates fine, which is odd something has gone awry.

    I'll take a look at it tomorrow as I'm feeling the strain. Thank you immensely for yur help on getting me this far, I will reply to this thread tomorrow to update.

    Again, many thanks for your help and your patience.

    Cheers

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.