issues with styling image caption

  • achenn

    (@achenn)


    11 years, 10 months 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.

Viewing 15 replies - 1 through 15 (of 15 total)
  • luckdragon

    (@luckdragon)

    11 years, 10 months 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”?

    Thread Starter achenn

    (@achenn)

    11 years, 10 months 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;
}
    WPyogi

    (@wpyogi)

    11 years, 10 months ago

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

    Thread Starter achenn

    (@achenn)

    11 years, 10 months ago

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

    Live site.

    WPyogi

    (@wpyogi)

    11 years, 10 months ago

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

    Michael

    (@alchymyth)

    11 years, 10 months 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?

    Thread Starter achenn

    (@achenn)

    11 years, 10 months 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>'; }?>

    luckdragon

    (@luckdragon)

    11 years, 10 months ago

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

    luckdragon

    (@luckdragon)

    11 years, 10 months ago

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

    Thread Starter achenn

    (@achenn)

    11 years, 10 months ago

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

    Michael

    (@alchymyth)

    11 years, 10 months 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>'; }?>

    Thread Starter achenn

    (@achenn)

    11 years, 10 months 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

    Michael

    (@alchymyth)

    11 years, 10 months 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;

    Thread Starter achenn

    (@achenn)

    11 years, 10 months ago

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

    Michael

    (@alchymyth)

    11 years, 10 months 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.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘issues with styling image caption’ is closed to new replies.