How to add a featured image to the post component

👨‍💻 Framework Development 📖 Documentation
1

@marika.kononen wrote this awesome guide on how to add a featured image to the post component. I thought it could be helpful to share it here as well:

https://codeformylife.fi/how-to-add-a-featured-image-to-the-post-component-on-the-frontity-framework/

Thank you Marika! :raised_hands:

2 Likes
2

You’re welcome! :relaxed:

1 Like
3

Hello
Link not wokring For

4

Hi, thanks for reporting this, Mehul!

@marika.kononen, could you please share the new link to this blog post (if available)? Thanks! :slight_smile:

1 Like
5

Hi Reyes,

Here is a new link: https://codeformylife.fi/how-to-add-a-featured-image-to-the-post-component-on-the-frontity-framework/

I removed my blog site and did a new one, so all my past blog posts haven’t exists anymore. I started now to move those in a new blog.

Sorry for that! :slight_smile:

2 Likes
6

Thanks Marika!

I’ve just updated the firts post with the new link.

2 Likes
7

Hi All,
I can’t seem to get this to work. This is the code i’m using below but I get the error
“ModuleNotFoundError: Module not found: Error: Can’t resolve ‘./featured-media’ in ‘/home/russell/sites/russelldavies.studio/packages/rd-theme/src/components’”

// File: /packages/my-first-theme/src/components/post.js

import React from "react"
import { connect, styled, Head } from "frontity"
import dayjs from "dayjs"
import FeaturedMedia from "./featured-media"

const Post = ({ state, libraries }) => {
  const data = state.source.get(state.router.link)
  const post = state.source[data.type][data.id]
  const author = state.source.author[post.author]
  const formattedDate = dayjs(post.date).format("D MMMM YYYY")
  const Html2React = libraries.html2react.Component
  const fmediaId = post.featured_media
  console.log("fmediaId", fmediaId)
  
  return (
    <div>
        <Head>
            <title>{post.title.rendered}</title>
            <meta name="description" content={post.excerpt.rendered} />
        </Head>
        <FeaturedMedia id={post.featured_media} />
      <h2>{post.title.rendered}</h2>
      <PostInfo>
      <p>
        <strong>Posted: </strong>
        {formattedDate}
      </p>
      <p>
        <strong>Author: </strong>
        {author.name}
      </p>
      </PostInfo>
      <Html2React html={post.content.rendered} />
    </div>
  )
}

export default connect(Post)

const PostInfo = styled.div`
    background-image: linear-gradient(to right, #f4f4f4, #fff);
  margin-bottom: 1em;
  padding: 0.5em;
  border-left: 4px solid lightseagreen;
  font-size: 0.8em;
  & > p {
    margin: 0;
  }