Digital Insanity Magazine by Bruno Amaral

Import Instagram Posts Into Hugo

Thu, 25 Jun 2020 13:35:26 +0100

I do love Instagram and the cool ways we can connect through with, see other cities, people we miss. It’s just hard to deal with having my photos kind of trapped there.

It is possible to export them, but that process takes a while. So this last weekend I took some time to improve a script that I used to extract my photos from there and onto this site.

They are in the pages of the Photos section.

Here is a step by step on what I did for those more tech-inclined.

Some things to take into account before moving on:

We are assuming the website is ran by Hugo.
You need some knowledge in using the Command Line of your computer.
Some of the information below includes what is useful for me, your needs will vary.

Instaloader

Instaloader is a tool to download pictures (or videos) along with their captions and other metadata from Instagram.

This command line tool does the heavy lifting, it authenticates you to Instagram, queries your profile and posts and saves everything to a nice file structure.

What we are going to do is take those files, extract data from them, and save it as environment variables. Those will then be picked up by the Hugo Archetype we defined for new posts in that section.

Archetype for Instagram Posts

When you create new content, Hugo uses a template for that file. That template is called an Archetype.

There are some Hugo functions you can use in these templates, and we are using getenv that allows us to use environment variables in your new post.

Take a look:

---
categories:
date: {{ getenv "post_datetime"}}
description:
draft: false
resources:
- src: {{ getenv "post_image" }}
  name: "header"
layout: instagram
location:
  - link: {{ getenv "google_maps_link"}}
  - latitude: {{ getenv "latitude" }}
  - longitude: {{ getenv "longitude" }}
stories:
subtitle:
title: "{{ getenv "post_title" }}"
tags: {{ getenv "post_tags"}}
---

{{ getenv "post_content" }}

You can tweak this file to add more information, as long as you also do the same in the script that puts it all together. More on that later.

Import and update script

The script became a little more complex than what was to be expected. To keep things in order, it’s hosted on GitHub.

Steps

Edit the config section of the script
Run the setup with ./instagram-posts-from-instaloader.sh setup
Execute the update ./instagram-posts-from-instaloader.sh run-update

Running setup, you will be asked for your username and password. Instaloader will setup a directory with your username where it will store your photos alongside the metadata it found.

We are keeping this directory untouched, read from it, and save the information we need as an environment variable. The full code is below and on GitHub.

Inside the update-post function we are reading the json data with xzcat and jq. If you want to add more data to the exported post, this is where you should look.

After this is done, we check if the post exists and if not, run hugo new ... and copy any jpg or video files that may be included.

With this done, your new posts should be ready. Run hugo server to make sure it’s working as you expected.

If you wish to add or improve any bit of the script, feel free to submit a merge request on the GitHub page.

Let me know in the comments if this was useful. 😀

#!/bin/zsh
## USAGE

### 1. Run the setup with `./instagram-posts-from-instaloader.sh setup`
### 2. Execute the update `./instagram-posts-from-instaloader.sh run-update`

## Config

### Where is your blog located?
blog="/Users/brunoamaral/Labs/Digital-Insanity"
### What is your Instagram Username?
instagramUser="brunoamaral"
### Where are we saving the output from Instaloader? (do not include the username)
directoryWithInstagramPosts="/Users/brunoamaral/Labs/instagram/"

### Where do you want photos saved to? Relative to ./content 
instagramdir="instagram"

# Dependency check

command -v instaloader >/dev/null 2>&1 || { echo >&2 "I require Instaloader but it's not installed. Aborting."; exit 1 }
command -v xzcat >/dev/null 2>&1 || { echo >&2 "I require xzcat but it's not installed. Aborting."; exit 1 }
command -v jq >/dev/null 2>&1 || { echo >&2 "I require jq but it's not installed. Aborting."; exit 1 }
command -v hugo >/dev/null 2>&1 || { echo >&2 "I require hugo but it's not installed. Aborting."; exit 1 }

setup() {
  cd $directoryWithInstagramPosts; 
  instaloader --fast-update --geotags --login=$instagramUser $instagramUser
}

run-update(){
  find "$directoryWithInstagramPosts/$instagramUser" -maxdepth 1 -name '*.json.xz'  -exec ./instagram-posts-from-instaloader.sh update-post {} \;
}  >&2

update-post() {
  file=$(basename $1)
  dir=$(dirname $1)
  imagefinal=${file//'json.xz'/'jpg'}
  content=`xzcat "$1" | jq '.node.edge_media_to_caption.edges[0].node.text'`

  declare -a tags;
  tags=$(echo $content | grep -o '#[[:alpha:]|[:alnum:]]*')
  jsontags=$(printf '%s' "${tags[@]}" | jq -R . | jq -s .)
  jsontags=${jsontags//[$'\t\r\n'|$' ']}
  jsontags=${jsontags//'#'/}
  date=`cut -d'_' -f 1 <<< "$file"`
  time=`cut -d'_' -f 2 <<< "$file"`

  export post_image=$imagefinal;
  export post_datetime=$(echo $date"T"${time//-/:}"+00:00")
  export post_tags=$jsontags
  if [[ $content = null ]]; then
    export post_slug
    export post_title=$date
    export post_content=" "
  else
    slug=$(echo "$content" |  iconv -c -t ascii//TRANSLIT | sed -E 's/[~\^]+//g' | sed -E 's/[^a-zA-Z0-9]+/-/g' | sed -E 's/^-+\|-+$//g' | sed -E 's/-$//g' | tr A-Z a-z )
    export post_slug=${slug:0:25}
    title=${content:0:50}
    export post_title=${title//'"'}
    export post_content=$content
  fi

  locationfile=${file//.json.xz/_location.txt}

  grepLocation=$directoryWithInstagramPosts
  grepLocation+="$instagramUser/"$locationfile

  location=$(grep -s 'maps.google.com' $grepLocation)
  if [[ ! -z "$location"  ]]; then
  echo "found $location"
    export google_maps_link=$location 
    locationClean=${location/'&ll'/}
    export latitude=$(cut -d'=' -f 2 <<< "$locationClean" | cut -d'\' -f 1 | cut -d',' -f 1)
    export longitude=$(cut -d'=' -f 2 <<< "$locationClean" | cut -d'\' -f 1 | cut -d',' -f 2)
  fi

  destination="$blog/content/$instagramdir/$date-$time$post_slug/"
  if [[ ! -f "$destination/index.md"  ]]; then
    hugo new $instagramdir/$date-$time$post_slug/index.md
    cp ${1:r:r}(*.jpg|*.mp4) $destination
  else
    echo 'post exists: '$post_title
  fi

}  >&2

if [[ $1 = "setup" ]]; then
  setup
fi

if [[ $1 = "run-update" ]]; then
  run-update
fi

if [[ $1 = "update-post" ]]; then
  update-post $2
fi

Lisa Fotios

Creating a Gallery Component for the Hugo Static Site Generator

Sat, 24 Aug 2019 18:11:34 +0100

Some of the posts that you see in this blog feature an image gallery. If you want to see a working example, there is one in the post about the Portuguese National Tile Museum.

National Tile Museum

http://www.museudoazulejo.gov.pt/ Any place is a good place to start. I chose this one for several reasons, one of which my curiosity to see …

That gallery is using Photoswipe and simple css for the mansonry effect.

If you want to replicate, here’s how it works.

1. Set frontmatter

resources: 
- src: "gallery/*.jpg"
  name: gallery-:counter
  title: gallery-title-:counter

We are using the shortversion, where the name and title and simply derived from the number of images in the folder.

2. shortcodes/gallery.html

The shortcode is used in the following format:


{{< gallery folder="gallery" title="Escher in Lisbon" >}}

The shortcode’s logic is simple. First, use .Page.Resources.Match to get all the resources whose name matches the gallery folder string. It’s important the resource name starts with the folder’s name.

{{ with .Get "title" }}
  <h4>{{ . }}</h4>
{{ end }}
  <div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
  {{- range (.Page.Resources.Match (printf "%s*" (.Get "folder"))) }}
  {{ $thumbnail := .Resize "320x" }}
    <figure itemscope itemtype="http://schema.org/ImageObject" class="image gallery-item">
    <a href="{{ .Permalink }}" itemprop="contentUrl" data-size="{{ .Width }}x{{ .Height }}" >
      <img src="{{ $thumbnail.Permalink }}" itemprop="thumbnail" alt="galleryImage" class="galleryImage" />
    </a>
    <figcaption itemprop="caption description">
      <span itemprop="copyrightHolder"></span>
    </figcaption>
    </figure> 
  {{ end }}
  </div>

No gimmicks here, just the standard photoswipe html and making sure it is required using .HasShortcode.

{{- if .HasShortcode "gallery" -}}
  <!-- Root element of PhotoSwipe. Must have class pswp. -->
  <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <!-- Background of PhotoSwipe.
     It's a separate element, as animating opacity is faster than rgba(). -->
  <div class="pswp__bg"></div>
  <!-- Slides wrapper with overflow:hidden. -->
  <div class="pswp__scroll-wrap">
    <!-- Container that holds slides.
      PhotoSwipe keeps only 3 of them in DOM to save memory.
      Don't modify these 3 pswp__item elements, data is added later on. -->
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
    <div class="pswp__ui pswp__ui--hidden">
    <div class="pswp__top-bar">
      <!--  Controls are self-explanatory. Order can be changed. -->
      <div class="pswp__counter"></div>
      <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
      <button class="pswp__button pswp__button--share" title="Share"></button>
      <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
      <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
      <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
      <!-- element will get class pswp__preloader--active when preloader is running -->
      <div class="pswp__preloader">
      <div class="pswp__preloader__icn">
        <div class="pswp__preloader__cut">
        <div class="pswp__preloader__donut"></div>
        </div>
      </div>
      </div>
    </div>
    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
      <div class="pswp__share-tooltip"></div>
    </div>
    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
    </button>
    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
    </button>
    <div class="pswp__caption">
      <div class="pswp__caption__center"></div>
    </div>
    </div>
    </div>
  </div>
  <link rel="stylesheet" href="/plugins/photoswipe/photoswipe.css">
  <link rel="stylesheet" href="/plugins/photoswipe/default-skin/default-skin.css">

  <script src="/plugins/photoswipe/photoswipe.min.js"></script>
  <script src="/plugins/photoswipe/photoswipe-ui-default.min.js"></script>
  <script src="/plugins/photoswipe/initphotoswipe.js"></script>
  <script>initPhotoSwipeFromDOM('.gallery');</script>
{{- end -}}

4. CSS

I am using the Photoswipe’s CSS and columns to display thumbnails:

/**/
/* GALLERY */
/**/

.gallery{
  width: 100%;
  display: block;
  margin:0 auto;
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
  .gallery {
    column-count: 1;
    column-gap: 3px;
  }
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  .gallery {
    column-count: 3;
    column-gap: 3px;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  .gallery { /* Masonry container */
      column-count: 4;
      column-gap: 3px;
  }
}

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) {
  .gallery{
    column-count: 5;
    column-gap: 0.2rem;
    width: 100%;
  }
}


.gallery-item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 0.2rem;
    width: auto;
}

5. And that’s it. Hope it helps!

soragrit wongsa

Should you learn to code?

Mon, 20 Oct 2014 00:33:21 +0000

If you’re in marketing or public relations, do you need to code and program software?

The answer is no. Yet, in this day and age it is best if you do know these things. I am not saying you should know how to design a full featured software or build a website from scratch (but if you can I am very happy to meet you and please leave a comment below so I can say hi!).

Knowing how the web works can help you find new opportunities to integrate content and social media, to think up new and exciting strategies for clients or your own brand. It can even be a way for you to save valuable time and resources in order to get an interesting project off the ground or deploy a decent campaign for your small business.

This is not about knowing how to setup IFTTT or Buffer. It’s about being able to build your own site, fix occasional glitches on a blog’s html (even if just in the article) or figure out ways to get the computer to do the work for you.

For example, when I teach about social media and crisis communication I always mention how being able to start a blog at a moment’s notice can be a great asset. Do you want to depend on your development team for that on a saturday night when the client is on the other end of the line?

I know a bit about programming and it is useful every day. It can be about building a webpage or code a newsletter. It can also be something like building a small script to collect data for me and save it as an excel spreadsheet. Skills that I picked up mostly from reading Lifehacker and specially the articles written by Gina Trapani.

Knowing about new technology and open source software helps me suggest campaigns or alternative routes. There are a few examples of this at The Labs.

Stepping up a level

What I don’t know very well is how to design a piece of software. Sure, I have made things that work. What I want to know now is how to plan features and how those features should work together, how to do something from scratch if I have to. This means taking a few steps back and learning the basics.

I asked Bruno Abrantes and he suggested a few online courses and tools:

Coursera, Computer Science 101
Coursera, Algorithms: Design and Analysis
HardvardX, Introduction to Computer Science
Craftsmanship – Mars Rover Kata to better understand Test Driven Development
https://exercism.io/ for practice and community mentorship

Recommended by João Neves:

Think Python – How to think like a computer scientist

If you want something fun and easy to try out, I suggest Codecadamy. There is also a nice introduction to Ruby and the Ruby on Rails framework called Rails for Zombies that is worth checking out.

A small update

João Mamede pointed out to me this article at Coding Horror – Please don’t learn to code. Feels too extremist but I empathise and agree with some of his arguments. Especially:

Please don’t advocate learning to code just for the sake of learning how to code. Or worse, because of the fat paychecks. Instead, I humbly suggest that we spend our time learning how to …

Research voraciously, and understand how the things around us work at a basic level.

Communicate effectively with other human beings.

Facebook visitor insights

Wed, 10 Oct 2012 07:25:00 +0000

The other day I noticed the still recent Facebook Software Development Kit (SDK) for PHP. You can find it here.

Simply put, an SDK allows developers to work faster by making goals easier to meet. This SDK is so straightforward that anyone can use it to build a small script to pull visitor data from Facebook.

Imagine that you want to know who visits your website and what pages they open. Later, you may want to get more data from them, location, likes, interests or anything else from Facebook. The example showed on the SDK github page is easy enough to change and achieve this. I did just that as an example, the code is at the end of this post.

If you use it, in the end you get a text file with lines that look like this:

Tue, 09 Oct 2012 06:31:00 +0100;Bruno Amaral;/how-this-blog-is-going-to-work/comment-page-1/

It starts with a timestamp, shows you the name of the person and the page that person was browsing. It could also give you the visitor’s facebook ID, facebook profile, etc.

The caveat here is that for you to get this information, that person must first authorize access of your Facebook Application.

When was the last time you authorized a Facebook App?

Before you ask: This blog will not run any of the code below or collect information from your Facebook account.