Overlay featured image with post title and excerpt

Hi, @maryhelenmaccarthy ! I would recommend the plugin Newspack Blocks to achieve this effect. It adds a block called the Homepage Posts Block which, despite its name, can be used anywhere. Once it’s inserted, you would toggle on the block’s “Show Featured Image” and “Show Excerpt” settings, then set the block to “Show media behind”, so that the featured image appears behind the post title.

This plugin is not in the www.remarpro.com plugin repository, but it is developed by a division of Automattic called Newspack, which I’m on.

Let me know if that suits your needs!

I guess I have to download the three files listed on that page to upload to www.remarpro.com, right?

Hi @maryhelenmaccarthy – you’ll just need the newspack-blocks.zip file – which you can then install by going to Plugins > Add New in your admin menu.

Here’s a direct link to download that file

Oh!!! It’s lovely!! It’s really beautiful!! This is exactly what I wanted!! Looks the same as the wordpress.com block!! Thank you so much, both of you!!!

The only problems I find are that:
1o) The color of the Excerpt is shown in black when overlapping with the image, and despite wanting to customize it choosing #ffff it continues to show the same.

2o) I can’t customize the font size either. By putting scale 1, 2 or 3 it shows exactly the same.

I don’t know what could be happening. How could I solve both issues?

• This reply was modified 1 year, 3 months ago by maryhelenmaccarthy.

There is another thing @jordesign @kgagne :
3o) The shape image aren’t working either.

At the moment, if there is no possible solution, I have no choice but to continue working with the query loop and use Custom CSS. Again, I am making a page with a grid of publications. I would like the title and excerpt of those posts to overlay the featured image of those posts.

Someone who claims to know about code gave this example, which for me does not make any sense or use, but I share it:

body {
  margin: 1em;
  font-family: sans-serif;
}
.my-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1em;

  > div {
    position: relative;
    box-shadow: 0 0 10px rgb(0 0 0 / 0.2);

    > img {
      display: block;
      max-width: 100%;
    }

    > div {
      position: absolute;
      bottom: 0;
      padding: 0 1em;
      color: white;
      background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgba(0 0 0 / 0.8) 100%);
      text-shadow: 0 0 10px black;

      > h3 {
        text-transform: uppercase;
      }
    }
  }
}
<div class="my-post-grid">
  <div>
    <img src="https://picsum.photos/id/98/400/225">
    <div>
      <h3>Title One</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie enim at ipsum maximus ultrices.</p>
     </div>
  </div>
  <div>
    <img src="https://picsum.photos/id/197/400/225">
    <div>
      <h3>Title Two</h3>
      <p>Suspendisse vel lectus fringilla, convallis ex ut, porttitor tortor. Mauris ut sem vitae quam consectetur mattis nec non ante.</p>
    </div>
  </div>
 </div>

• This reply was modified 1 year, 3 months ago by maryhelenmaccarthy.
• This reply was modified 1 year, 3 months ago by maryhelenmaccarthy.

Hey @maryhelenmaccarthy – as these are things which are being handled directly by the plugin itself now – it’s a little beyond what we can offer help with from here.

If you have a link to share – I can take a quick look at the layout and see if I can tell anything with the colors and font sizes.

The issue is that the plugin is not working as it should. It does not allow changing the font color and size, nor the size of the images nor their height in px/em/rem. I thought I had expressed myself clearly enough on this point. The options are there to make any changes you want, but the plugin doesn’t seem to work. If there is an option to change the text color, and you should know there is because you created the plugin, if selecting a color nothing happens, the problem is the plugin. The same goes for almost all the options it brings. The plugin is not working.

That’s why I’m still waiting for someone to help me with the Advanced CSS to customize the grid that I’m making of posts. Again, as I’ve said three times already, I want to overlay the title and excerpt with the image. I am using the QUERY LOOP. I know I have to write “position:absolute”, but I can’t complete the code correctly.

I’m going to start a new thread, because apparently my original idea has been misinterpreted. If you fix the problems of the Newspack Block plugin, and create a new version let me know @jordesign @kgagne .

I just wanted to clarify that regarding the Newspack Block, the features that this plugin brings regarding the Homepage-Posts-Block are not working as they should. You said:

These are things that are now handled directly by the plugin

@jordesign

And that’s the problem!!! They’re not being handled at all!! Within the extensive options it provides, many of the Homepage-Posts-Block are not working at all!!

@kgagne @jordesign

• This reply was modified 1 year, 3 months ago by maryhelenmaccarthy.
• This reply was modified 1 year, 3 months ago by maryhelenmaccarthy.

I’ve been doing some testing @jordesign @kgagne . I was wrong about the four shape images that the Homepage-Post-Block has. However there is a bug regarding these two issues:

By superimposing the image with the title, the excerpt, and the author, the excerpt remains in black making it impossible to read it. The other elements i.e. title, author and date remain white.

The scales 1, 2 and 3 that allow you to adjust the size of the font remain exactly the same without any change between them. This causes a sudden and abrupt change in the scale 4.

I tried a version of the Newspack Block from September of last year to see if the same problems existed, and indeed they did.

• This reply was modified 1 year, 3 months ago by maryhelenmaccarthy.

I would really appreciate it if you could provide me some information on this to understand why the inconveniences that I have highlighted occur, and a solution to be able to use the Newspack-Block which would otherwise be very useful to me if it weren’t for the bugs that I have found. @kgagne @jordesign

Thanks in advance!

• This reply was modified 1 year, 2 months ago by maryhelenmaccarthy.

Hi @maryhelenmaccarthy – as I’m just a volunteer in these forums, and don’t work for Newspack specifically I’m afraid I’m not really able to comment much further.

Another path for reporting issues specifically with the Newspack Plugin would be to open an Issue on the Github repo – where development is managed.

https://github.com/Automattic/newspack-blocks/issues

Thank you!! I will do it right now!! I hope this can be fixed.

P.S: This thread has not been resolved.