1.0.24 • Published 3 years ago

@seansly/gatsby-source-strapi-images v1.0.24

Weekly downloads
-
License
0BSD
Repository
-
Last release
3 years ago

Ideal for SSR since this image does not get processed by image-sharp

🚀 Quick start

Add the plugin

  1. Initialize a new plugin from the starter with gatsby new
yarn add @seansly/gatsby-source-strapi-images
  1. Include the plugin in a Gatsby site

Inside of the gatsby-config.js file of your site (in this case, my-gatsby-site), include the plugin in the plugins array:

module.exports = {
  plugins: [
    // other gatsby plugins
    // ...
    "@seansly/gatsby-source-strapi-images",
  ],
};
  1. Define a urlBuilder function, you would create this based on what media options are in your strapi configuration.
export default function urlBuilder({
  baseUrl,
  width,
  height,
  format,
  options,
}: any) {
  let formats = baseUrl.formats;
  console.log(baseUrl, width);
  if (width > 2000 || width == baseUrl.width) {
    return baseUrl.url;
  } else if (formats.large && width > 750) {
    return formats.large.url;
  } else if (formats.medium && width > 500) {
    return formats.medium.url;
  } else {
    return formats.small.url;
  }
}
  1. Use the component
import {
  StrapiImage,
  StrapiImageApiResponse,
} from "@seansly/gatsby-source-strapi-images";
interface SSRPageProps {
  data: {
    attributes: {
      Image: StrapiImageApiResponse,
    },
  };
}

const SSRPage = ({
  data: {
    attributes: { Image },
  },
}: SSRPageProps) => {
  return <StrapiImage image={Image} />;
};
1.0.24

3 years ago

1.0.23

3 years ago

1.0.22

3 years ago

1.0.21

3 years ago

1.0.20

3 years ago

1.0.19

3 years ago

1.0.18

3 years ago

1.0.17

3 years ago

1.0.16

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago