menu

Gatsby.js

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
Team

slideshow with gatsby-image

January 23, 2019 at 12:03am

slideshow with gatsby-image

January 23, 2019 at 12:03am

has anyone tried getting a slideshow to work in tandem with gatsby image?

been trying to figure out a fullscreen background auto-play slider and I just can't seem to get it to play nicely with gatsby image.

if anyone could possibly share an example that would be amazing.

ideally I wanted to utilize just css and styled-components to animate and delay a transition, however I couldn't get the array to add the animation delay in reverse order


January 23, 2019 at 4:19pm

I've done some experimenting with gatsby-image and react-spring transitions over on my site https://jordnjones.com. Im not sure if this is what you might be looking for but the concept seems similar to me.

Here's the source: https://github.com/Pr0x1m4/jordnjones.com

Edited
  • reply
  • like

January 24, 2019 at 4:26am

Have you managed to get all your images into your pages/posts? See this issue I opened: https://github.com/gatsbyjs/gatsby/issues/11246

An animated slideshow would be a next step for me.

Edited
  • reply
  • like

January 28, 2019 at 3:21pm

yeah I actually got something working nicely now. I wanted to have the images fading in/out so that's the effect I went for. I used gatsby-image inside a parent div, which I use to control the "animation"

  • reply
  • like

@glennnglennn I can share my component with you if you'd like!

  • reply
  • like

@artemartemo I don’t fully understand components and how to use them yet other than what I learned from the Gatsby Tutorial, that they’re used for reusable parts of your site like a main menu, sidebar or footer that appear across your whole site.

I actually figured out a solution that seems to work pretty well. I'm a react newbie so don't know if my approach is right but what I did was add fileAbsolutePath to my gatsby-node.js:

const path = require("path");
const { createFilePath, createFileNode } = require(`gatsby-source-filesystem`);
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions;
const blogPostTemplate = path.resolve(`src/templates/post.js`);
return new Promise((resolve, reject) => {
resolve(
graphql(`
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
limit: 1000
) {
edges {
node {
fileAbsolutePath
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`).then(result => {
if (result.errors) {
console.log(result.errors);
return reject(result.errors);
}
const blogTemplate = path.resolve("./src/templates/post.js");
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: blogTemplate,
context: {
slug: node.fields.slug,
absolutePathRegex: `/^${path.dirname(node.fileAbsolutePath)}/`
} // additional data can be passed via context
});
});
return;
})
);
});
};
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions;
if (node.internal.type === `MarkdownRemark`) {
const slug = createFilePath({ node, getNode, basePath: `posts` });
createNodeField({
node,
name: `slug`,
value: slug
});
}
};

Then in my post template post.js I did this:

import React from "react";
import Img from "gatsby-image";
import { graphql } from "gatsby";
import Layout from "../components/layout";
export default ({ data }) => {
const post = data.markdownRemark;
return (
<Layout>
<div>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
<div>
{data.allFile.edges.map(({ node }, index) => (
<Img
key={index}
alt={node.name}
fluid={node.childImageSharp.fluid}
/>
))}
</div>
</div>
</Layout>
);
};
export const query = graphql`
query($slug: String!, $absolutePathRegex: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
allFile(
filter: {
extension: { regex: "/(jpg)|(png)|(tif)|(tiff)|(webp)|(jpeg)/" }
absolutePath: { regex: $absolutePathRegex }
}
) {
edges {
node {
name
childImageSharp {
fluid(maxWidth: 1600, quality: 90) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
}
}
`;
Edited
  • reply
  • like

@artemartemo I'd be keen to see your solution for the functioning slideshow, what I'm doing is just rendering images down a page. Your taking it the next step by putting them into a slideshow.

  • reply
  • like

April 18, 2019 at 4:25am

Not sure if anyone has solved this problem but I did a write up on how to create a slideshow with gatsby-image and hooks over at https://dev.to/pr0x1ma/building-a-slideshow-with-gatsby-image-and-react-hooks-4ajf

Edited
like-fill
1
  • reply
  • like

April 19, 2019 at 12:52am

I used Gatsby image with react-photo-gallery and hooks which worked pretty well https://bushblade.co.uk/woodlore-clone/ most of the logic is in the Gallery component https://github.com/bushblade/bushblade-knives-website/blob/master/src/components/Gallery.js

like-fill
1
  • reply
  • like

April 19, 2019 at 12:16pm

I'm using a nuka-carousel atm but not entirely happy with the current component, might need to mess with settings more or try some others out, I did recall having issues with two others I had tried prior to it though.

import React from 'react'
import styled from "styled-components"
import Img from 'gatsby-image'
import Carousel from 'nuka-carousel';
// Hides controls until hovered
const StyledCarousel = styled(Carousel)`
&.slider {
.slider-control-centerleft,
.slider-control-centerright,
.slider-control-bottomcenter {
opacity: 0;
}
}
&:hover {
.slider-control-centerleft,
.slider-control-centerright,
.slider-control-bottomcenter {
opacity: 1;
}
}
`
// Carousel component with settings, provide an array of objects with fluid props
export default ({images}) => (
<StyledCarousel autoplay autoplayInterval={3000} pauseOnHover wrapAround dragging
transitionMode="fade" easing={"easeExpOut"} speed={1600} >
{images.map((image, i) => {
return <Img key={i} fluid={image.fluid} backgroundColor/>
})}
</StyledCarousel>
)

This is my component for it mostly(I just ripped it out into it's own file and changed a few things, but tested it and it works the same. You could probably use children instead of the internal map with images prop I have shown up there.

Edited
  • reply
  • like

April 19, 2019 at 9:32pm

I'm using react-reveal's makeCarousel function - works well so far for me. https://www.react-reveal.com/tutorials/carousel/

  • reply
  • like

August 16, 2019 at 4:43pm

@will-adams Hi, Will. I'm trying to implement the same but I'm struggling to query all images from my /images/gallery. Where do you use the query for the images or how do you do it? I don't see it on your repo.

  • reply
  • like