1.0.24 • Published 3 years ago
@seansly/gatsby-source-strapi-images v1.0.24
Ideal for SSR since this image does not get processed by image-sharp
🚀 Quick start
Add the plugin
- Initialize a new plugin from the starter with
gatsby new
yarn add @seansly/gatsby-source-strapi-images
- 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",
],
};
- 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;
}
}
- 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