I am not able to get feature images from WordPress

🙋Get Help
1

Hi,

I am not able to get featured images to my page. I try to use it in list-item.js file, please see the pictures below.

These warnings and errors came to Developer’s console:
Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type text/html. See for more details.
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

11
Screenshot 2019-05-22 at 11.36.11.png2880×1800 1.21 MB

56
Screenshot 2019-05-22 at 12.01.56.png1143×917 110 KB

1 Like
4

Hi @marika.kononen!

I’ve implemented featured images on the list for mars-theme and will be available in the next release, but here is the implementation. I created a component called FeaturedMedia as the following:

// featured-media.js

import React from "react";
import { connect, styled } from "frontity";

const FeaturedMedia = ({ state, id }) => {
  const media = state.source.attachment[id];

  if (!media) return null;

  const srcset = Object.values(media.media_details.sizes)
    // Get the url and width of each size.
    .map(item => [item.source_url, item.width])
    // Recude them to a string with the format required by `srcset`.
    .reduce(
      (final, current, index, array) =>
        final.concat(
          `${current.join(" ")}w${index !== array.length - 1 ? ", " : ""}`
        ),
      ""
    );

  return (
    <Image alt={media.title.rendered} src={media.source_url} srcSet={srcset} />
  );
};

export default connect(FeaturedMedia);

const Image = styled.img`
  margin-top: 16px;
  height: 300px;
  width: 100%;
  object-fit: cover;
`;

Then, it’s imported in list-item.js, and passed an id prop as shown below:

// list-item.js

import FeaturedMedia from "./featured-media";

const Item = ({ state, item }) => {
  const author = state.source.author[item.author];
  const date = new Date(item.date);

  return (
    <Container>
      { ... }
      <FeaturedMedia id={item.featured_media} />
      { ... }
    </Container>
  );
};

export default connect(Item);

As you can see, I’m using the field source_url of the attachment to get the link, because the field link is not always pointing to the image itself, but to the WP page associated to the attachment. That might be the problem you encountered in your implementation.

Also, to facilitate development, we exposed the store as a global variable so you can explore it easily from the console, as shown in the following video:

I hope this helps! :slight_smile:

7 Likes
5

Thank you so much @orballo for quick and thorough answer!
It works now perfectly and yes of course it should be own component, I tried to just test it inside of list-item.

I am learning many things at the same time, so it feels sometimes a little overwhelmed. :grin::sweat_smile:

6

got it working. is this the correct way to use it?

img src ={fmedia.source_url}

7

Hi @sonicares

Yes you are able to fetch featured images with below combination in list-item.js file (I tested it), but I think it’s better to use separate component ‘FeaturedMedia’ like @orballo shared above .

const fmedia = state.source.attachment[item.featured_media]
img src ={fmedia.source_url}

2 Likes
8

Yep, as @marika.kononen wrote, that’s the right way :slight_smile:

We are all there from time to time! :smile:

I’m glad my response helped both of you. If you have any other questions feel free to open more topics!

4 Likes
10

I have created a custom theme, but this solution doesn’t work for my post excerpt on the frontpage, it only renders the featured image inside the post.

Is there a solution for putting it also with the excerpt on the frontpage?