Skip to content

Instantly share code, notes, and snippets.

Avatar

Ilias Haddad IliasHad

View GitHub Profile
View index.js
import React, { useState, useEffect } from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import Img from "gatsby-image"
const IndexPage = ({ data }) => {
const [posts, setPosts] = useState([])
useEffect(() => {
setPosts(data.allGoogleSheetSheet1Row.nodes)
}, [])
View gatsby-node.js
const { createRemoteFileNode } = require("gatsby-source-filesystem")
exports.onCreateNode = async ({
node,
actions,
store,
cache,
createNodeId,
}) => {
const { createNode } = actions
if (node.internal.type === "googleSheetSheet1Row") {
View gatsby-config.js
{
resolve: 'gatsby-source-google-sheets',
options: {
spreadsheetId: 'get this from the sheet url', worksheetTitle: 'ie the name in the worksheet tab', credentials: require('./secret.json')
}
}
@IliasHad
IliasHad / product.js
Created Apr 21, 2020
How to Gatsby Image in Strapi Multiple Image
View product.js
query {
strapiProducts(slug: { eq: ""}) {
title
description
images {
localFile {
childImageSharp {
fixed(height: 100, width: 100, quality: 100) {
...GatsbyImageSharpFixed
@IliasHad
IliasHad / gatsby-node.js
Last active Oct 5, 2020
How to Gatsby Image in Strapi Multiple Image
View gatsby-node.js
exports.onCreateNode = async ({
node,
actions,
store,
cache,
createNodeId,
}) => {
const { createNode } = actions
let multipleImages = node.images
View bg-image.liquid
Accepts:
- image: {Object} Image object
Usage:
In your liquid template file, copy the following line
<div class="lazyload" data-bgset="{% include 'responsive-bg-image', image: article.image %}"></div>
View image.liquid
Accepts:
- max_width: {Number} Max width of the image container
- max_height: {Number} Max height of the image container
- image: {Object} Image object
- image_class: {String} class name of the <img />
- image_attributes: {String} additional HTML attributes of the <img />
- wrapper_class: {String} class name of the <div> wrapper
- wrapper_attributes: {String} additional HTML attributes of the <div> wrapper
Usage:
View responsive-bg-image.liquid
<div class="lazyload" data-bgset="{% include 'bgset', image: article.image %}"></div>
View responsive-image.liquid
{% include 'responsive-image'
with image: featured_image,
image_class: "css-class",
wrapper_class: "wrapper-css-class",
max_width: 700,
max_height: 800 %}
View theme.liquid
<! - [if (gt IE 9)|!(IE)]><! →<script src="{{ 'app.js' | asset_url }}" defer="defer" async></script><! - <![endif] →
 <! - [if lte IE 9]><script src="{{ 'app.js' | asset_url }}"></script><![endif] →
You can’t perform that action at this time.