{post}
.excerpt.rendered
.list.js
. You could check for the truthiness of the isDestinationsArchive
property and return different content, or differently styled content, if it's true.<Post>
and <Page>
components in separate post.js
and page.js
files so that posts and pages can be displayed differently. This was useful for learning purposes, but is not optimal. A single component can handle both cases.<Page>
component, and so that the <Post>
component handles both posts and pages.<Post>
component should conditionally check the isPost
property and display the posted date and author information only if it is true. If it is not true but isPage
is true then this additional information should not be displayed.<Switch>
in the root component as the <Page>
component will no longer exist.<Page>
component to render its content. Create a new component that displays destinations differently.index.js
to load your new component when data.isDestinations
is true.<Header>
in its own component<Header>
component is currently part of the main <Root>
component in index.js
. This makes the index.js
file rather long.<Header>
component into its own file along with the related CSS-in-JS styling.<Header>
component into index.js
. As the header contains data from the state and action methods you will also need to connect your new component with the connect
HOC.featured_media
property. This contains the ID of the featured image for that post. You can then retrieve the data pertaining to the image in state.source.attachment[{id}]
, including the link
and source_url
properties.frontity.settings.js
- see the documentation here. You should then update list.js
, or at least the part of it that you implemented in 2 above.