Posted by : at

Category : gatsby   react


Part 5 - Working with Images

In this part, we are going to create a Card component, The Card will contain a thumbnail image, title, summary, and a button link.

We are going to use this component in various places like, displaying our projects, blog posts etc. We will fetch

There are different ways to import images, gatsby provides out of the box.

Using Static Images

In this component, we gonna use the concept of static images. Lets create a new folder static in our root directory, where we will store our images. This is where gatsby looks for its static assets by default

Lets now create our Card Component,

card.js

import React from "react"
import styled from "styled-components"
const CardContainer = styled.div`
    width: 300px;
    height: 350px;
    display: inline-block;
    background-color: #fff;
    margin:20px;
`
const Card = ({title, summary, imgSrc, imgDescription, link}) => (
  <CardContainer>
      <img src={imgSrc} alt={imgDescription}></img>
      <h3> {title} </h3>
      <p> {summary}</p>
      <button><a href={link} rel="noopener noreferrer" target="_blank">Know More</a></button>
  </CardContainer>
)

export default Card

The card component takes in four arguments, basically a title - heading text, summary - short description text, imgSrc - source of the image , imgDescription - description of the image and a link which holds the url of the button.

Also lets create a ProjectGrid Component, where we will use our Card Component.

projects-grid.js

import React from "react";
import styled from "styled-components";
import Card from "../card";

const ProjectsGridContainer = styled.div`
    margin: 50px;
`

const ProjectsGrid = () => (
  <ProjectsGridContainer>
    <Card
      title="devlopr-jekyll"
      summary="A Jekyll Theme built for Developers"
      imgSrc="../../devlopr-jekyll.png"
      imgDescription="devlopr jekyll"
      link="https://devlopr.netlify.com"
    ></Card>
    <Card
      title="hackr-jekyll"
      summary="A Jekyll Theme built for Hackers"
      imgSrc="../../hackify.png"
      imgDescription="hackify-ui"
      link="https://atom.io/themes/hackify-ui"
    ></Card>
  </ProjectsGridContainer>
)

export default ProjectsGrid

As you can see we are passing the params in the Card component.Moreover we haven’t used our ProjectGrid Component anywhere yet, lets call that in our homepage

index.js


import React from "react";
import styled from "styled-components";
import Jumbotron from "../components/jumbotron";
import Layout from "../components/layout";
import ProjectsGrid from "../components/projects/projects-grid";
import SEO from "../components/seo";

const Section = styled.div`
    text-align:center;
    padding-top:50px;
`
const SectionTitle = styled.h1`
    font-family: verdana;
    font-size: 30px;
    font-weight: 100;
`
const SectionSubtitle = styled.p`
    font-family: verdana;
    font-size: 20px;
    font-weight: 100;
`

const IndexPage = () => {
    return (
      <>
        <Layout>
          <SEO title="Home"></SEO>
          <Jumbotron
              heading="Welcome to Ninja Coders Club "
              subheading="Community of Open Source Developers, Solving Real World Challenges"
              buttontitle="Join the Club"
              buttonlink="/join"
          >
          </Jumbotron>
          <Section>
             <SectionTitle> What we do </SectionTitle>
             <SectionSubtitle> We build products that solves real world challenges utilizing Open Source Technologies</SectionSubtitle>
          </Section>
          <Section>
             <SectionTitle> Our Work </SectionTitle>
             <SectionSubtitle> Showcasing some of our recent projects </SectionSubtitle>
              <ProjectsGrid></ProjectsGrid>
          </Section>
          <Section>
             <SectionTitle> Recent Articles</SectionTitle>
             <SectionSubtitle> Latest articles from our blog</SectionSubtitle>
          </Section>
        </Layout>
      </>
    )
}
export default IndexPage

Great ! We got a awesome project grid, showcasing our projects. Though we will convert that in to markdown and use graphql to fetch the projects in the next part.

Stay Tuned ! Don’t forget to subscribe to my weekly newsletters :D