New Topic

Featured images in category view?

Home › Forum › Customization › Featured images in category view?

This topic contains 10 replies, has 2 voices, and was last updated by  kezdovega 4 years, 7 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 25, 2014 at 5:38 AM #1810

    kezdovega
    Participant

    How can i set this theme to display little versions of the featured images in category view beside the title and the intro text?

    August 25, 2014 at 2:32 PM #1812

    StartupWP
    Keymaster

    You’ll want to edit entry-summary.php (this can be done via a child theme: https://startupwp.com/topic/child-theming/) and just below this line:

    <section class="entry-summary">

    add:

    <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>

    From there we can help you style the featured image in size and placement, please provide a link to one of your category pages and let us know how you want to style it.

    August 25, 2014 at 10:22 PM #1817

    kezdovega
    Participant

    Thank you!
    The site is on my wamp server so cannot give you a link.

    I made an .entry-summary img { class to the css and managed to make it smaller and float to the left. I would love to look like that, the picture is on the left, and all the texts (including the title and the author part and even the tags beside it. Is that possible?

    August 26, 2014 at 12:04 PM #1819

    StartupWP
    Keymaster

    Yes, anything is possible, but difficult to test without something live to see.

    August 28, 2014 at 1:41 AM #1825

    kezdovega
    Participant

    I plan to upload it next week. I ll give a shout! :)
    Thank you!

    August 28, 2014 at 2:57 PM #1828

    StartupWP
    Keymaster

    Sounds good.

    September 11, 2014 at 2:25 PM #1871

    StartupWP
    Keymaster

    Add:

    .archive .post header {
  display: block;
  float: right;
  width: 67%;
}
.archive .post .entry-summary {
  clear: both;
}

    Update your .entry-summary img style to:

    .archive .entry-summary img {
  float: left;
  height: 150px;
  margin-right: 10px;
  margin-top: -61px;
  width: 200px;
}

    And finally, add:

    @media all and ( max-width: 999px ) {

.archive .post header {
  width: 100%;
}

.archive .entry-summary img {
  float: none;
  margin-top: 0;
}

}
    September 11, 2014 at 10:52 PM #1872

    kezdovega
    Participant

    Thank You! Works perfectly when the modify words are not there under every title! :)

    September 12, 2014 at 3:12 PM #1873

    StartupWP
    Keymaster

    You’re welcome.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.