WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Having thumbnails and text (7 posts)

  1. kaicho
    Member
    Posted 9 months ago #

    This post was closed before an adequate answer given:
    http://wordpress.org/support/topic/show-post-title-over-images-during-rollover

    Here is how to add text to thumbnails in the menu for Spun theme.

    [Moderator note - these changes should only be made using a Child Theme - http://codex.wordpress.org/Child_Themes ]

    In content-home.php change:

    $thumb = wp_get_attachment_image( $attachment->ID, 'post-thumbnail', false, array( 'title' => esc_attr( get_the_title() ) ) );

    to:

    $thumb = wp_get_attachment_image( $attachment->ID, 'post-thumbnail', false, array( 'title' => esc_attr( get_the_title() ) ) ) . '<span class="txt-with-thumbnail"><span>' . get_the_title() . '</span></span>';

    Now add this code to style.css:

    .blog .hentry a span.txt-with-thumbnail,
    .archive .hentry a span.txt-with-thumbnail,
    .search .hentry a span.txt-with-thumbnail {
        position:absolute;
        top:0;
        left:0;
        height: 180px;
        width: 180px;
        z-index:100;
    }
    .blog .hentry a span.txt-with-thumbnail span,
    .archive .hentry a span.txt-with-thumbnail span,
    .search .hentry a span.txt-with-thumbnail span {
        position:relative;
        display: table-cell;
        font-family: Baskerville,"Playfair Display","Times New Roman",serif;
        font-size: 3.2rem;
        font-style: italic;
        width: 180px;
        height: 180px;
        line-height: 32px;
        overflow: hidden;
        text-align: center;
        vertical-align: middle;
        word-wrap: break-word;
        color:#ffffff;
      -webkit-text-stroke: 1px #818181;
      text-shadow:
       -1px -1px 0 #818181,
        1px -1px 0 #818181,
       -1px  1px 0 #818181,
        1px  1px 0 #818181;
    }
  2. rachellucie
    Member
    Posted 9 months ago #

    this is great. However, I have a question. I take it I create a new content-home.php file and upload to child-theme, which is fine. Is the code provided ALL the code that is needed in that file, or does it need to be added to a copy of the original php and added to the child version?

    thanks

  3. kaicho
    Member
    Posted 9 months ago #

    I was rather sloppy when it comes to 'child-themes'. I didn't bother. *slap my wrist, why don't you*.

    Ok, create the the child-theme folder. Throw a copy of content-home.php and style.css in the child-theme folder. Change the line of php code identified in content-home.php and add the new css code, either with the existing '.hentry a' css (to keep things tidy) or copy it at the end of all the existing code. Go to your site in a browser or refresh and, bobs your uncle, you have a thumbnail and correctly aligned text in conjunction.

  4. Sterikus
    Member
    Posted 9 months ago #

    Thx for you trouble, I was just looking for this. However, the original question was to display the title only during rollover. Could you maybe try to answer that as well? Would be nice!

  5. esmi
    Theme Diva & Forum Moderator
    Posted 9 months ago #

    And what about people who are not using a mouse? How will they access these titles?

  6. Sterikus
    Member
    Posted 9 months ago #

    I figured the hovering thing out, here are the links to the code used:

    style.css
    http://pastebin.com/kC4cyPb0

    content-home.php
    http://pastebin.com/eRAZi0RB

    please note: the name of the classes in this code is different than the code posted in this thread. I used code from a previous thread:
    http://wordpress.org/support/topic/put-test-inside-images-on-home-page?replies=1

    you can see how it looks here: http://tinyurl.com/pnvp4jy

  7. kaicho
    Member
    Posted 9 months ago #

    And what about people who are not using a mouse? How will they access these titles?

    I suppose the relevant information would come from the link information and a change would be necessary to the image alt tag and description. This has been overlooked somewhat in the original template. But I have to be honest, my requirements weren't for a 100% accessible solution. If yours is please feel free to contribute the necessary amendments/supplements to the post.

    I meant this as a starting point. In the previous post I spotted there hadn't been a satisfactory answer and I attempted to supply it. I've since amended various aspects to this, for instance to responsive display, but I expect people should take this 'as' a starting point, use initiative and adapt to their own requirements. Live and learn.

Reply

You must log in to post.

About this Theme

About this Topic