[Resolved] Post title on featured image

[Aleksey]

Can You help me please.
How to do at frontpage featured posts whith posttitle above featured image.

[Aleksey]

I mean something like this:

[Tom]

Hmm, this is possible but involves a bit too much custom coding for me to provide here.

Basically, you would need the content to be positioned absolutely and the image would need to take up the whole container.

[Aleksey]

Thank you Tom!
if I’m not mistaken, I need to make the appropriate changes in CSS file?
Sorry for stupid questions, I just a beginner in web 😉

[Tom]

You would need to use a child theme, which would include a style.css file for the CSS.

Been looking for a plugin that could display posts like that because the code would actually get pretty complicated into HTML/PHP, but I haven’t had any luck.

I may need to do something to a future project, and will provide my finished code in here once I do that.

Thanks!

[Aleksey]

Thank you very much Tom! 🙂
Good luck in your projects! 🙂

I have 2 more questions:
1. How can I change padding in masonry blocks?
2. How to do (for example every 10-th block of masonry) an advertising block?
Please help a newbie! 🙂
Thanks!

[Tom]

1. This CSS should work:

.masonry-post .inside-article {
      padding-top: 40px;
      padding-right: 40px;
      padding-bottom: 40px;
      padding-left: 40px;
}

2. I wish I knew – been on the lookout for this kind of functionality for a while – if you find anything definitely let me know 🙂

[Aleksey]

1. It works! 🙂
Thanks! 🙂
2. Ok, if I find smth I’ll provide it in here )

[Nick]

I was able to accomplish this with the magic of CSS. On my site, I have the featured image as a fixed background inside the div that contains it. The effect this creates is when the reader scrolls down, different parts of the featured image are displayed. I have the post title in the top left corner of the featured image. You can see the end result on my web site at http://www.pc.solutions.

I used the Simple Custom CSS plugin to add CSS. I added the following CSS to move the post title.

.inside-article {
  position: relative;
}

h1.entry-title {
  background-color: #FFF;
  position: absolute;
  top: 30px;
  left: 30px;
  margin-right: 30px;
  padding: 5px;
}

With Tom’s help, I was able to get the featured image to be the background of the containing div. I added the following to the wp_head sedction of GP Hooks.

    <?php 
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );

if ( $thumb && is_single() ) {
    ?>
    <style type="text/css">
        div.page-header-image-single {
            width: 100%;
            background-image: url('<?php echo $thumb['0'];?> ');
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: 100%;
            height: 400px;
            margin: 0px;
            padding: 0px;
        }
        img.wp-post-image {
            display: none;
        }
        img.attachment-full {
            display: none;
        }
    </style>
    <?php
}
?>

You’ll need to make sure you have “Execute PHP” checked. Hope this helps!

[Tom]

Great solution!

You may be interested in our upcoming Page Header update in GPP 1.4: https://vimeo.com/223381628

[Author]

Posts