Commit 4ce5bbd6 authored by David Rhoderick's avatar David Rhoderick
Browse files

Using SBI Instagram Feed plugin more than custom solution.

parent e526ac7d
......@@ -14,7 +14,6 @@ const Home = ({ state }) => {
const post = state.source[data.type][data.id];
const options = state.source.get("acf-options-page");
const { acf } = post;
console.log(options);
useEffect(() => {
if (window?.location?.hash) {
......
import React, { useEffect } from "react";
import React, { useEffect, useRef } from "react";
import { styled, connect } from "frontity";
import document from 'global/document'
import Content from "../../content";
const Instagram = ({ instagramData, decoration_image, state }) => {
const Instagram = ({ instagramData, decoration_image, }) => {
useEffect(() => {
const sbiFeedStyle = document.createElement("link");
sbiFeedStyle.href =
......@@ -11,56 +13,35 @@ const Instagram = ({ instagramData, decoration_image, state }) => {
sbiFeedStyle.type = "text/css";
sbiFeedStyle.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(sbiFeedStyle);
}, [])
const processedShortcode = document.createElement("div");
processedShortcode.innerHTML = instagramData.shortcode;
const images = document.getElementById("instagram_images");
processedShortcode.querySelectorAll(".sbi_photo").forEach((node) => {
let link = document.createElement("a");
link.href =
"https://www.instagram.com/greetingsfrommarthasvineyard/?hl=en";
link.target = "_blank";
let processedShortcode = document.createElement('div')
let item = document.createElement("img");
item.src = JSON.parse(node.getAttribute("data-img-src-set")).d;
item.className = "sbi-photo";
link.append(item);
images.append(link);
console.log(node);
});
const processedShortcodeDiv = useRef(null)
// Not sure if this admin-ajax definition is needed for loading images
// const sbiFeedScriptTag = document.createElement('script')
// const sbiFeedScript = document.createTextNode('var sbiajaxurl = "https://wpadmin.toursmv.com/wp-admin/admin-ajax.php";')
// sbiFeedScriptTag.appendChild(sbiFeedScript)
// document.body.appendChild(sbiFeedScriptTag)
// jQuery dependent scripts; remove if not using jQuery or uncomment if switching to jQuery
// const sbiFeedScriptSrcsBase = 'https://wpadmin.toursmv.com/wp-content/plugins/instagram-feed/js/'
// const sbiFeedScriptSrcs = [
// 'jquery.matchHeight-min.js',
// 'sb-blocks.js',
// 'sb-instagram-2-2.min.js',
// 'sb-instagram.min.js',
// 'sbi-scripts.min.js'
// ]
// sbiFeedScriptSrcs.forEach(src => {
// const sbiFeedScript = document.createElement('script')
// sbiFeedScript.src = sbiFeedScriptSrcsBase + src
// document.body.appendChild(sbiFeedScript)
// })
}, []);
useEffect(() => {
if(instagramData.shortcode) {
processedShortcode.innerHTML = instagramData.shortcode
processedShortcode.querySelectorAll(".sbi_item").forEach((node) => {
node.classList.remove('sbi_transition')
const link = node.querySelector('.sbi_photo')
const img = link.querySelector('img')
img.src = JSON.parse(link.getAttribute("data-img-src-set")).d
});
processedShortcodeDiv.current.innerHTML = processedShortcode.outerHTML
}
}, [instagramData.shortcode, processedShortcodeDiv])
return (
<InstagramContent>
<Heading decorationImg={decoration_image.url}>
{instagramData.title}
</Heading>
{/* <div dangerouslySetInnerHTML={{ __html: instagramData.shortcode }} /> */}
<div id="instagram_images"></div>
<InstagramFeedContainer ref={processedShortcodeDiv} />
</InstagramContent>
);
};
......@@ -72,108 +53,15 @@ const InstagramContent = styled(Content)`
flex-direction: column;
background: rgba(0, 0, 0, 0.4);
border-radius: 2rem;
`;
#instagram_images {
const InstagramFeedContainer = styled.div`
#sbi_images {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
img {
height: 150px;
max-width: 150px;
width: auto;
margin: 1rem;
}
}
@media screen and (max-width: 768px) {
#instagram_images {
img {
height: 300px;
max-width: 300px;
width: auto;
margin: 1rem;
}
}
}
@media screen and (max-width: 660px) {
margin: 3rem 1rem;
#instagram_images {
img {
height: 250px;
max-width: 250px;
width: auto;
margin: 1rem;
}
}
}
@media screen and (max-width: 560px) {
#instagram_images {
img {
height: 200px;
max-width: 200px;
width: auto;
margin: 1rem;
}
}
}
@media screen and (max-width: 480px) {
#instagram_images {
img {
height: 140px;
max-width: 140px;
width: auto;
margin: 1rem;
}
}
}
@media screen and (max-width: 375px) {
#instagram_images {
img {
height: 120px;
max-width: 120px;
width: auto;
margin: 1rem;
}
}
}
@media screen and (max-width: 360px) {
#instagram_images {
img {
height: 100px;
max-width: 100px;
width: auto;
margin: 1rem;
}
}
}
@media screen and (max-width: 320px) {
#instagram_images {
img {
height: 80px;
max-width: 80px;
width: auto;
margin: 1rem;
}
}
}
@media screen and (max-width: 280px) {
#instagram_images {
img {
height: 70px;
max-width: 70px;
width: auto;
margin: 1rem;
}
}
}
`;
`
const Heading = styled.h2`
width: 100%;
......@@ -189,22 +77,8 @@ const Heading = styled.h2`
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 50%;
width: 25%;
padding-bottom: 6%;
margin: 0.5rem auto;
}
`;
const InstagramLink = styled.a`
max-width: 200px;
margin: 0 auto;
img {
max-width: 100%;
transition: transform 0.75s ease;
}
&:hover img {
transform: rotate(720deg);
}
`;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment