WordPress.org

Ready to get started?Download WordPress

Forums

issues with styling image caption (16 posts)

  1. achenn
    Member
    Posted 2 years ago #

    I've managed to place the image caption directly under the post title, which is exactly what I want, however I'm having a hard time styling it.

    I'm using the css below, which is exaclty what is used for the h2/title, but for some reason .wp-caption-text isn't grabbing it.

    .detail .wp-caption-text {
    	padding-left: 20px;
    	padding-bottom: 8px;
    }

    Relevant files:
    index.php
    style.css


    I've had issue with getting help with this theme in the past because of something to do with the developers. Hopefully an issue as far removed from the specific theme as this is can be answered. Also, I'm aware that wordsPOP has support forums, but it's been overrun by spam.

  2. luckdragon
    Member
    Posted 2 years ago #

    when you "inspect element" in FF or Chrome, is that the correct css?

    i.e. is it in a div that is class="detail" and then another that is class="wp-caption-text"?

  3. achenn
    Member
    Posted 2 years ago #

    Ah, I originally overlooked the fact that it was <p class="wp-caption-text"> so I changed the css to the below which I believe is semantically correct, however, the problem persists.

    .detail p.wp-caption-text {
    	padding-left: 20px;
    	padding-bottom: 8px;
    }
  4. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    Unless you post a link to the page where the problem is, it's impossible for anyone to help much.

  5. achenn
    Member
    Posted 2 years ago #

    Sorry, I thought I included the live site in with the pastebin links.

    Live site.

  6. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    Don't see any image captions or h2 tags on that page at all??? Just below the post title is the meta text...

  7. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    the problem is in this line:

    <?php if (the_post_thumbnail_caption()) { echo '<p class="wp-caption-text">' . the_post_thumbnail_caption() . '<p>'; }?>

    because the function the_post_thumbnail_caption() echos the text, it can therefore not be used in a conditional statement;

    what you see is the output of the first use of the functions within the if() - not the part in { ... }.
    therfore no html tag with css class, and no formatting.

    can you paste the full code of the function into a pastebin and post the link to it here?

  8. achenn
    Member
    Posted 2 years ago #

    @alchymyth functions.php

    @WPyogi I'm not sure what you mean.. In index.php, which I linked to in my initial post, there is the following:

    <div class="detail">
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php if (the_post_thumbnail_caption()) { echo '<p class="wp-caption-text">' . the_post_thumbnail_caption() . '<p>'; }?>
  9. luckdragon
    Member
    Posted 2 years ago #

    what WPyogi means is that we need a link to the page that is causing the problem, not to the site itself.

  10. luckdragon
    Member
    Posted 2 years ago #

    alchymyth answered your question, the line that says if (the_post_thumbnail_caption()) { should say if (get_post_thumbnail_caption()) {

  11. achenn
    Member
    Posted 2 years ago #

    changing it to get_post_thumbnail_caption i both index.php and functions.php still doesn't allow me to style it..

  12. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    suggestion:

    change the function name to get_post_thumbnail_caption()

    chnage all echo to return

    change from returning the thumbnail title to the thumbnail caption

    see:
    http://pastebin.com/sy6mKuJ7

    also change this line in index.php:

    <?php if (the_post_thumbnail_caption()) { echo '<p class="wp-caption-text">' . the_post_thumbnail_caption() . '<p>'; }?>

    to:

    <?php if (get_post_thumbnail_caption()) { echo '<p class="wp-caption-text">' . get_post_thumbnail_caption() . '<p>'; }?>

  13. achenn
    Member
    Posted 2 years ago #

    alchymyth, thanks for your time and attention.
    I made the changes you recommended, and the caption that was once there, just in the wrong place, has now disappeared. Any ideas?

    new index.php
    new functions.php

  14. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    the caption that was once there, just in the wrong place, has now disappeared.

    possibly my fault - I changed this part of the function to this here (because you are talking about the caption):

    //show thumbnail title
         //return $thumbnail_image[0]->post_title; 
    
         //Uncomment to show the thumbnail caption
         return $thumbnail_image[0]->post_excerpt;

    which would have been before (showing the image title):

    //show thumbnail title
         return $thumbnail_image[0]->post_title; 
    
         //Uncomment to show the thumbnail caption
         //return $thumbnail_image[0]->post_excerpt;

    please change it back.

    you featured images possibly have no image caption added;

  15. achenn
    Member
    Posted 2 years ago #

    the images definitely have captions- they were showing previously, just not in the right position.

  16. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    the images definitely have captions - they were showing previously, just not in the right position

    those were - as far as I interprete the code - image titles;

    simple make the edits I suggested in my last reply - this should show it as before.

Topic Closed

This topic has been closed to new replies.

About this Topic