Wisdom of Wombats website
Created with Gridsome, Bulma and headless Wordpress
Wisdom of Wombats is an improv theater group based in Zurich Switzerland
This website requires Wordpress with the Tribe Events Manager plugin.
Install the headless theme, by copying the files from folder wordpress-headless-theme-wombats into wp-content/themes/headless-wombats of the Wordpress installation, then navigate to WordPress admin and activate this new theme.
The code in functions.php enables the additional fields in the Tribe Events Manager plugin.
-
Add instagram feed - Waiting for a fix to the vue-instagram plugin - See below
-
Manage differently carousel and video in the insta feed
-
Cookies - use this plugin - With this plugin, BUILD does not work.
-
"Get involved" section
-
Friends page
-
Page with the group members
-
Add more comments - Use WPM Testimonial plugin Endpoint (wp-json/wp/v2/wpm-testimonial)
-
Random top image
-
List of shows
-
Archive of previous events
-
Review the "About us" section
-
Messages in case of no events or no news
-
Pagination of the "News" section
-
Create 404 page
-
Make the homepage link to the next show dynamic
-
Website Statistics - Open Website Analysis
-
"About us" section
-
"Contacts" section
-
"News" section - List of posts (as calendar) and Posts pages
-
MailChimp, register and subscribe mail from the website
-
Instagram link
-
Update Gridsome WordPress plugin
-
Gallery of images -
Make "Next show" a component
Who we are - OUR VISION
What kind of show we do - Why we do what we do - We push our boundaries - Experiment - Get out of our comfort zone
Team members page, with personal statement
-
I have a venue and I want you to play here
-
I am a musician and I want to play with you
-
I do other art forms and I want to collaborate with you
On Netlify or when installing node modules the following error message might appear:
(undefined) assets/js/app.748fd6eb.js from Terser
TypeError: Cannot read property 'minify' of undefined
The solution is here.
-
run
npm install --save-dev terser@3.14.1 --save-exact -
edit package-lock.json > locate: "terser-webpack-plugin" > inside it's tree: change: "terser": "^3.8.1" (or whatever), to "terser": "3.14.1" and make sure there is no “^” in front of the version
Code to use when issue #21 on vue-instagram is solved
<!-- Impressions/Instagram feed -->
<section class="section hero" id="impressions">
<div class="hero-head">
<div class="container">
<h1 class="title">Impressions from our Instagram feed</h1>
</div>
</div>
<div class="hero-body container">
<vue-instagram :token="instaToken" :count="6" class="columns is-multiline is-mobile">
<template slot="feeds" slot-scope="props">
<div class="column is-4-desktop is-6-tablet is-6-mobile">
<div class="card">
<a class="card-image" :href="props.feed.link" target="_blank">
<figure class="image is-square">
<img :src="props.feed.images.standard_resolution.url" alt="Image">
</figure>
</a>
<div class="card-content">
<div class="subtitle is-6" style="height: 100px; overflow: auto;" v-html="props.feed.caption.text"/>
</div>
</div>
</div>
</template>
</vue-instagram>
</div>
<div class="hero-foot level container">
<div class="level-item">
<a class="button is-dark is-medium is-fullwidth" href="https://www.instagram.com/wombatsimprov/" target="_blank">More on our Instagram</a>
</div>
</div>
</section>
Add a link in the website
<a href="https://api.instagram.com/oauth/authorize/?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=code">Get Started</a>
An Instagram login screen will popup. Once the user is authenticated, Instagram will redirect the browser to the "YOUR_REDIRECT_URI" and the token is in the redirected URL
http://localhost:8080/#access_token=xxxxx.xxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxx
To register the client follow the steps in this Medium page
References: