Display featured post image as a book cover

  • Hi there!

    Sorry to ask, but I could not find an answer to this anywhere. I’m building a site where I can shere my stories. Some are short, some are big stories. My problem is that my featured inmages should look like book covers and not be cropped as they are.

    The best look would be something like Wattpad or Sweek interface where featured image is shown as a book cover (the sane aspect ratio). Thare should be no excerpts, unless mouse hover over the image, or the excerpts should be at the side of the imagem without forcing the image to crop.

    I’m not sure if there is a theme that already do that or if I could get it easily done with Author Pro (there is no place to test if I can achieve it before buying), but I’m no coder and I’m no able to get it done with a child theme.

    So, my questions are:

    1. Is it possible to get it done with Author Theme?
    2. If not, would it be possible with Author Pro (at least in an easier way)?
    3. If not, is there any other theme that do this even though I love Author?

    Thanks a lot,
    – Daniel Bittar.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hi Daniel,

    Thanks for using Author!

    I think these changes can be accomplished with some CSS. Start by adding this CSS which will remove cropping from the Featured Images:

    .featured-image {
	padding-bottom: 0;
	height: auto;
	position: static;
}
.featured-image > a,
.featured-image > img,
.featured-image > a > img {
	position: static;
	display: block;
}
.featured-image img  {
	object-fit: none !important;
	width: 100% !important;
	height: auto !important;
}

    Please copy and paste that code into the Additional CSS section in the Live Customizer (Appearance > Customize), and it will take effect right away.

    And you can add this CSS as well to hide the excerpts from the main blog page so that only the Featured Images are displayed:

    .blog article,
.archive article,
.search article {
	display: none;
}
    Thread Starter danielbittar

    (@danielbittar)

    Hi Ben!

    Thank you very much for your support. I tried your suggestions and it is almost there. However, it got some odd spacings in the main page and in the post page. If you can, please take a look in those links:

    https://danielbittar.com.br/
    https://danielbittar.com.br/category/contos/drama/
    https://danielbittar.com.br/o-violino/

    I believe the image should be close to the top and not with such a big spacing. Also, inside the post, it could be good not to have the featured imagame inside, so I can add the image together with the text.

    At last, if possible, is there a way to get the next post in the same line. Something like 3 or 4 posts per line in the front page. At least when reading from the computer or a tablet, but be authomatically reflowed in smaller screens?

    Thanks again for your support!
    – Daniel Bittar.

    Theme Author Ben Sibley

    (@bensibley)

    Sorry for that visual bug. It should work better if you delete this line from the code I shared:

    object-fit: none !important;

    Since the image is only 300px wide, it might end up looking a bit pixelated. If you have a larger resolution for your Featured Image it should look very nice.

    There isn’t a multi-column layout available for Author, but I think that’s a good idea. I’ll see if I can have it included in a future update.

    Thread Starter danielbittar

    (@danielbittar)

    Hi Ben!

    Thank you very much for your support.

    I was able to achieve a look close to what I want with the modifications you provided. I also changed the following from

    width: 100% !important;

    to

    width: 30% !important;

    Now there is no pixelation. To be perfect now it just needs a multi-colum layout or at least the abilitie to add the excerpt at the side of image and not under it.

    But thanks again!
    – Daniel Bittar

    Thread Starter danielbittar

    (@danielbittar)

    Hi Ben!

    Is there a way to remove the featured image from inside the post? The final result looks great as a front page but got ugly in the post.

    Thanks again!
    – Daniel Bittar.

    Theme Author Ben Sibley

    (@bensibley)

    Sure, you can add this CSS to hide the Featured Image on the post page:

    .single-post .featured-image {
  display: none;
}

    Hi Ben!
    These CSS solutions are useful for me, too.
    Thanks!

    Tamás

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Display featured post image as a book cover’ is closed to new replies.