bejamas / gatsby-storyblok-image Goto Github PK

import { getFixedGatsbyImage } from "gatsby-storyblok-image"

const TypeImages: FC<typeImagesProps> = ({ type }) => {
  // Extract the active type from context
  const { activeType, activeFragranceIndex } = useContext(ProductContext)
  if (!activeType || !activeType) return null

  const { type: typeName, image: typeImage } = type

  const image = getFixedGatsbyImage(typeImage, { width: 900 })

import SbEditable from 'storyblok-react'
import Img from 'gatsby-image'
import { getFixedGatsbyImage } from 'gatsby-storyblok-image'
import { getFluidGatsbyImage } from 'gatsby-storyblok-image'

const FluidImage2 = ({ imgUrl }) => {
  const fluidProps = getFluidGatsbyImage(imgUrl, {
    maxWidth: 900,
    quality: 100,
  })

  return (
    <SbEditable content={imgUrl}>
      <Img
        fluid={fluidProps}
        style={{ width: '100%', height: '100%' }}
      />
    </SbEditable>
  )
}

import React from 'react';
import SbEditable from "storyblok-react"
import Img from "gatsby-image";
import { getFluidGatsbyImage } from 'gatsby-storyblok-image'
import { render } from "storyblok-rich-text-react-renderer"

const Program = ({ blok }) => {
    const img = blok.image
    const fluidProps = getFluidGatsbyImage(img, {
    maxHeight: 400
  })
    return (
             <SbEditable content={blok} key={blok._uid}>
    <Layout pageTitle="title">

      <PageHeader title={blok.pagetitle} />
    <section>
      <div>
        <div>
          <div>
            <div>
                <div>
                    <Img fluid={fluidProps} />
                </div>
                <div className="blog-one__content">
                  <h1>{blok.title}</h1>             
                  {render(blok.description)}
              </div> 
            </div>
          </div>
        </div>
      </div>
    </section>
</Layout>
            </SbEditable>
  );
}

export default Program;

import React from 'react'
import SbEditable from 'storyblok-react'
import Img from 'gatsby-image'
import { getFixedGatsbyImage } from 'gatsby-storyblok-image'

const FixedImage = ({ blok }) => {
  if (blok.image !== 'undefined' && blok.image !== '') {
    const fixedProps = getFixedGatsbyImage(blok.image, {
      width: 900
    });

    return (
      <SbEditable content={blok}>
        <Img fixed={fixedProps} />
      </SbEditable>
    )
  }
  return (
    <SbEditable content={blok}>
      <p>Please upload image</p>
    </SbEditable>
  )
}

export default FixedImage