Multimusen by

Per Thykjaer Jensen

Per Thykjaer Jensen

I teach code at the Multimedia Communication and Design Programme @Aarhus Business Academy. WordPress and Linux expert.


View Full Profile →

New on Multimusen

Data protection is a good thing, however there may be unpleasant surprises in the GDPR. Photos are data, that is personal data. So many photographers are worried – for instance: is street photography illegal from now on?

Here are two voices – a photographer and a business oriented approach to images.

A photographer’s concerns

Below you hear a photographers concerns. For instance can you take a group photo at a party? Actually such a heinous action may be a crime.

Marketing and photos

Below you’ll find a business oriented approach. It’s mostly about marketing and photos. So if you use Mailchimp or similar for marketing it is very relevant for marketers.

Perhaps even this blog post is an evil criminal offence. You see pictures here. Am I allowed to share the links? In some ways the GDPR has good intensions, however parts of the GDPR is lawyer BS.

For multimedia designers there are many concerns here:

  • How about images from APIs such as Instagram, Twitter, Facebook, Pinterest?
  • Will street photo be illegal in the EU?
  • What are the consequences for street, event and similar photographers?
  • Surveilance cameras?

At the moment certain countries use the GDPR as an excuse for censorship. Photographs of public spaces, such as monuments may be restricted. So what started as good intensions for data protection created monsters – as is often the case in legislation.

Add a Mapbox Map in PageBuilder

So you have styled a map on Mapbox, now you want to use it in a WordPress post – but how can we do this in Pagebuilder? The map you see below is a costum Open Street Map style made in Mapbox. The map has a datalayer imported via Open Data Aarhus. On the map you see where you can pay and park in Aarhus, Denmark. Now the present page is made in Pagebuilder. If you don’t know how to use Page builder I’ll add a link to an online tutorial.

Mapbox Sample


The Pagebuilder Workflow

In Pagebuilder you must:

  1. Add a row.
  2. Add a Custom HTML widget

Then you may add the HTML that you need in the edit field. The code used on this page is demonstrated in the widget below or to the left.

Caveats: in the code an external stylesheet is loaded in line 6. That isn’t elegant at all, but for now it will do the trick. The code snippet is also a demonstration of the fact, that you can use JavaScript on a WordPress page or in a post.

 

Code sample

Pagebuilder Tutorial by Siteorigin

Torsdag – fredag mødes ledere og undervisere på Multimediedesigneruddannelsen i Odense for at arbejde med den nye studieordning for uddannelsen.

 


View Larger Map

I’m at the JsConf in Reykjavik. The venue is the fantastic Harpa, with wonderful artwork by Olafur Eliasson. We live in the hotel with the Sky Lounge just across the street.


View Larger Map

Today art and code mixed into an amazing creative cocktail. I cannot wait to experiment with the creative libraries from these wizards of code.

Augmented Reality

There were several talks on JavaScriot as a creative tool. Raisa Cuevas introduced to augmented reality, and she introduced several creative tools, such as:

Google ARCore Brings Augmented Reality to Android

https://threejs.org/

https://poly.google.com/

https://github.com/google-ar/three.ar.js/tree/master

https://github.com/jeromeetienne/AR.js/blob/master/README.md

 

Paint Splatter: The making of an interactive artwork

Halldór Eldjárn & Þórður Hans Baldursson introduced the code behind the interactive artwork decorating Harpa this week. On the website http://paint.jsconf.is/ you can choose the colors on the building. They told about the work, and how they wrote the creative code.

 

Creating generative art with Javascript

Then Kate Compton told about her work as an artist / researcher. She used JavaScript for art. Even her dress was made by JavaScript. One of her bon mots was:

“make things that makes things”

You can follow Kate’s work here: http://galaxykate.com/

Among the tools in her toolbox was https://threejs.org/ 

 

The keynote

The first keynote speaker was a nodejs talk, along the lines of this: “version 1.0.4 of XX is not there yet. Please google”. My mind drifted away, but perhaps there were hidden gems for the Nodejs adepts. But at the end of the day JsConf gave many ideas for creative code.

Code is poetry.

Testing Makey-Makey

Makey: two belt buckels, a coin and a pen as keyboard.

What is Makey Makey?

Makey-Makey is basicly a keyboard. The bottom bar is ground, and the others are “keys”. You can use anything that’s conductive as a key. Even fruits, water or your partner.

Scratch Project Inspiration and Tutorials

Here’s a short and handy tutorial about the Siteorigin PageBuilder. In Pagebuilder each row will get an id. Then each row will get an id in the Pagebuilder settings.

Now the video does not tell this, but I guess that Pagebuilder will set bookmarks on the webpage, as in:

<h2 id="row-about-us">About us ...</h2>

In the WordPress menu the internal links will be used. The menu will link to #row-about-us, and Pagebuilder will create markup somewhat like in this sample:

<a href="#row-about-us">About us</a>

Now onepagers tend to scroll in a cool slow way. You can do this via some JavaScript. I guess there’s a plugin for it too.

In this tutorial you will learn how to create a WordPress theme almost from scratch via the theme skeleton Underscores.

Download Underscores

  1. Go to http://underscores.me/ and enter the name of your theme in the input box.
  2. Then click enter, and you’ll get a zip with all the theme files in a folder.
  3. Install the theme via the Dashboard in WordPress.

Now you have a very basic theme. There is a menu, but it’s horrible, or so it seems. In fact you’ve got a dropdown menu – so that’s kind of a head start. And that’s the idea of Underscores. From here it’s a matter of styling, but where are the files we need?

 

Style.css

Have a look in the style.css file. Here your theme name and author is defined. Add your name and the URI to the website, or even better to your Github repository. Since you’re working on a home hacked theme, you may do stupid things. So enter your credentials e.g. (see my sample style.css here):

 

Theme Name: Abracadabra
Theme URI: https://github.com/asathoor/underscores-and-sass
Author: Per Thykjaer Jensen and Underscores.me
Author URI: http://multimusen.dk
Description: The 2017/18 theme for WordPress based on Underscores. Features: SASS, Gulp, Bower, Font Awesome, jQuery.
Version: 0.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petj-17
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, responsive, two-columns, custom-header-image


Sidebar – Content or Content – Sidebar

Since Michael Heileman designed the Kubrick theme in 2004 the standard blog design became something like a sandwhich with a header and footer as the buns. Between the header and footer you’d see some content and a sidebar. So the blog designer could choose between content-sidebar or sidebar-content. Of course you don’t have to do this, but the standard WordPress design still use the magick formula: header.php, footer.php, sidebar.php – and a filename. If there are no other files, WordPress will use index.php as a fallback. All of these files are found among the Underscores files.

Underscores made it easy to create a basic design, with content and a sidebar to the right or left of the content.

 

Layouts

In the folder layouts you’ll find two files with the CSS for the basic layout:

  • content-sidebar.css
  • sidebar-content.css

So if you want a classic blog layout, you can copy-paste the content of the one you fancy to style.css. Here is the CSS from content-sidebar.css:

.content-area {
 float: left;
 margin: 0 -25% 0 0;
 width: 100%;
}
.site-main {
 margin: 0 25% 0 0;
}
.site-content .widget-area {
 float: right;
 overflow: hidden;
 width: 25%;
}
.site-footer {
 clear: both;
 width: 100%;
}

Now you have a traditional blog design.

 

Responsive Styles

Of course these styles are not responsive at all. You still have to refine your design with media queries and so on. Since the CSS in media queries are quite redundant a SASS mixin may come in handy (see this sample).

 

@media screen and (min-width: 100px) and (max-width: 760px) {
 @include responsive(); // sidebar to bottom
 body {
 font-size: 123%;
 }
}


Custom Header Image

The Underscores theme does not support a custom header image. Many themes give you this option, so how do you implement the feature? First you have to add this to the functions.php file:

$args = array(
 'flex-width' => true,
 'flex-height' => true,
 'default-image' => get_template_directory_uri() . '/images/clouds.jpg',
);
add_theme_support( 'custom-header', $args );

Then open the header.php file, and add the following where you want the image to appear:

<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="">

From now on the user is able to choose his own header images from the media. This short sample also demonstrates, that you can edit any file in the theme.

 

Custom Pages

In WordPress custom pages have to follow a certain naming convention. You can see the system in the template hierarchy.

The template hierarchy
The template hierarchy found on the WordPress Codex.

 

Let’s say that you want a custom design on the front page. In the template hierarchy you can see that the WordPress will look for the frontpage code in the file front-page.php.

I’d like to design my frontpage in Siteorigin’s PageBuilder. So I need a frontpage that does not interfer with Pagebuilder. And I don’t want a headline. A fast head start is to copy a file and use it as a model. Remove what you don’t want. Add what you need. In this case the result was extremely simple:

get_header(); ?>

<div id="primary" class="content-area">
 <main id="main" class="site-main">
 <?php
 // the loop
 while ( have_posts() ) : the_post();
 get_template_part( 'template-parts/content', 'frontpage' );
 
 endwhile; // End of the loop.
 ?>

</main><!-- #main -->
 </div><!-- #primary -->

<?php
//get_sidebar();
get_footer();

The loop will get template parts from the file ../template-parts/content-frontpage.php. Here is the loop part for the full width PageBuilder content:

 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php the_content(); ?>
 </article><!-- #post-<?php the_ID(); ?> -->

This part of the loop will print the content, but not the headline. If you want the headline feel free to add the_header() and similar loop tags (see this article).

It’s a Theme

With Underscores you’ll learn what it takes to create a WordPress theme almost from scratch. Underscores is the basis of many themes – among them the core WordPress theme Twenty Eleven.

 

So this is Christmas
And what have you done
Another year over
And a new one just begun.
John Lennon

Xmas is a wonderful excuse for bad taste – here’s the new Xmas theme on Multimusen. It’s not completely finished yet. For now it’s just a big screen thing. So if you’re on a mobile device, you’re probably lost.

Imaginary maps: Tolkien

It’s a quick start method for Mapbox. Upload a picture, and select the colors on your map from the picture.

Mapbox Cartogram
Mapbox Cartogram