Weekly Web Harvest (weekly)

Posted from Diigo. The rest of my favorite links are here.

Photography – Week 55

There’s likely to be some sort of yearly retrospective at some point but until then these are (mainly) traveling shots. We’ve gone from Richmond VA to Huntsville AL and then to Jacksonville FL. All interesting highway paths. Shooting from the car is a challenge. It mixes aspects of landscape photography and the speed of street photography. I’m also shooting with the 85mm so that also adds an element of challenge as there is no zoom.

tugboat on the marsh
I like marsh areas like this. The tugboat and the trees helped set it off.

The beach boys
I tend to shoot silhouette shots at the beach. I liked the captured motion in this one.

Overpass Santa
This guy was waving to cars on Christmas morning. People are interesting.

See Rock City Today
A classic “See Rock City” shot. The barn is red. The road is unpaved. The roof is rusted.

The Santa hat sets it off
Another Christmas day shot. The Santa hat sets off the outfit.

Vultures and highway roadkill
A huge number of vultures surrounded this particular piece1 roadkill. We almost hit this vulture. I liked the strangely watercolor-like effect here even though the focus would likely have been better on the vulture.

The beach

IMG_6672.jpg
The mix of human made straight lines and the natural curves were the elements that appealed to me here.

echoes of older times
Someday I will go here. I’ve shot it a few other times from the highway. It is everything I like to photograph- the residue of previous use creating new patterns, the mixture of decay and construction etc. etc.

*HERO
I like the colors and the mix of mural and foreground buildings.


1 I guess “piece” is the right term.

Weekly Web Harvest (weekly)

Posted from Diigo. The rest of my favorite links are here.

SPLOT Fest – Story Forker using Gravity Forms

Making Alan work for his pictures

One of the things I love about my little community of people is the in-process sharing1 of work. Alan is a master of this and he puts in serious work.2 In an attempt to give a little bit of energy back I present you a very rough version of the LPC3 SPLOT Story Brancher.

To get at the roots of this idea, go read Alan’s initiating post. Alan’s making little web tools that don’t require logins and are focused on doing one small thing well (smallest possible online learning tools). Alan is capable of doing far more coding than I can so I tend to try to compensate by choosing non-programistan paths. This proof of concept took about 10 minutes this morning and probably shows that but it might inspire some deeper thoughts down the road.

This is a quick and dirty example of how Gravity Forms would enable you to-

  1. create one form that enables the duplication/forking of whatever post it is in w/o requiring user login/account or creating new forms
  2. have the option to do some sort of incremental titling
  3. trackback to the parent post automatically for some sort of x begat y begat z etc. etc. navigation

Get the Body

This is the only code-ish piece. The gist below, added to your theme’s functions.php file, takes the body of the post that the form is in and puts in the designated field through the dynamic population hook. It’s the first time I’ve ever tried this option as it had seemed fairly intimidating previously.

I just used the Post Body field and turned on the dynamic population option and then named that variable post_body.
Screen Shot 2014-12-14 at 12.27.14 PM

The Other Stuff

The title is just the name of the post and the date appended using the Default Value option and a few merge tags

{embed_post:post_title} {date_dmy}

Screen Shot 2014-12-14 at 12.29.35 PM

<div class="trackingback">
Homage to <a href="{embed_url}">my mother</a>
</div>

This little piece at the bottom of the post field just captures the URL of the source page and links it back. I wrapped it in a div so I could disappear it if I wanted to.

To Really Work

I think you’d make the duplicator/editor portion take focus and expand based on a user interaction — some sort of button like “Fork Me”. The titling should be smarter. The editor doesn’t allow for media uploads. Maybe it could just make do with a way to add URLs to images instead.


1 I initially wrote “documentation” and then changed it so I wouldn’t hate myself for making stuff sound harder than it is.

2 Even taking pictures – see evidence above

3 Least Possible Code

Weekly Web Harvest (weekly)

Posted from Diigo. The rest of my favorite links are here.

Gravity Forms Black Magic

The results of the 4 quadrant form submission

Gravity Forms makes my list of Non-Programistan tools. I haven’t seen quite enough posts celebrating the fact that Gravity Forms can do magic.

The key feature at the moment that is kind of blowing my mind is the ability to use modifiers on the submissions fields– the ability to have the label (what the user sees/answers) be one thing and the value be something entirely different. It has the potential to enable some SPLOT like activities without the coding on the tool maker end1 . . .

I know that sounds like nonsense but just follow me a bit . . .

show_values
It’s easy to miss the checkbox that turns on the values. You can see it in the fairly annoying GIF above. The cool thing is you can put virtually anything in the value field- images, HTML chunks etc. This plus the ability to create content templates2 gives you the ability to have user form interactions create some fairly sophisticated content.3

In this example the user selects “Awesome” as the answer to a question and the form would record that AND the following HTML (stored as the value for that answer)

<div class="qone" id="awesomeq1"><img src="http://augmenting.me/gridface/awesome.png"></div>

The part where this starts to come together is in the construction of a post using the content template option. You get options detailed in the image below.
Gravity Forms Post Body

I want to use the value from the “Awesome” selection in my post field. If you add the field like normal you’ll just get the word “Awesome” in your post. That’s fine but not that exciting. If you append :value to the merge tag you’ll get the result of the value field and that opens up all of your magical chakras.
Gravity Forms modifiers

The point of all this being, that you can have users answer simple questions and build pretty complex HTML/CSS combinations. It’s not perfect for everything but it opens up a wide range of interesting possibilities because it requires little actual coding knowledge on the part of the tool constructor. You can get by with the HTML/CSS.

The following example might help a bit. It plots the answers to four questions over a user selected background image. We’re looking to use it as a large crowd survey tool in the near future. The prompt will be something like- Take a selfie representing how you feel about technology in education. They’ll answer the questions and we’ll have a fairly light hearted grid view of the audience responses which has some depth but is easy to see as a whole. Feel free to submit some responses.

I also tacked on a pie chart construction tool using the charts.brace.io service. It lets you build charts via URL parameters like Google Charts used to do. It’s pretty handy for simple things like this.

This example form plots the four different visual elements over a background image. It’s just divs and CSS4 stuff. Quick and dirty. POC5 stuff.

.qone, .qtwo, .qthree, .qfour {
	width: 180px;
	height: 180px;
	float: left;
	padding-left: 15px;
	padding-top: 15px;
}

#awesomeq1 {
	background-color: green;
	opacity: .3;
	filter: Alpha(opacity=30);
/* IE8 and earlier */
}

#mehq1 {
	background-color: yellow;
	opacity: .3;
	filter: Alpha(opacity=30);
/* IE8 and earlier */
}

#awfulq1 {
	background-color: red;
	opacity: .3;
	filter: Alpha(opacity=30);
/* IE8 and earlier */
}

.main {
	width: 400px;
	height: 400px;
	overflow: hidden;
}

1 I know Alan Levine. Alan Levine is a friend of mine. I am no Alan Levine.

2 Think mail merge . . .

3 You can also chain forms and use variables from the forms in the URLs which would enable some wild options with Choose Your Own Adventure style progressions.

4 Disregard the names as I made them more complex than they needed to be and I could simplify the CSS in general. Remember I really am making most of this stuff up.

5 Not POC

Embed Google Drive Folder in WordPress

As WordPress and Google Drive continue to blend in a variety of ways the desire to embed the contents of Google Drive folders has come up a few times.

I found this Stack Overflow post a while back and had been using it myself. But in an attempt to get around iframe issues and make it a little friendlier I wrote a quick and dead simple plugin today. It seems to do the trick . . .

Directions

Assuming the plugin is installed and activated . . .

Go to Google Docs. Get the unique ID for the folder you want to embed- seen in the highlighted portion of the URL in the image below.
Screen Shot 2014-12-11 at 2.50.37 PM

Then paste it between the shortcodes like so . . .

Screen Shot 2015-01-14 at 3.03.20 PM
and you get a nice little window that acts as a live interactive portal to the folder like so . . .

Geo Tagging WordPress

Screen Shot 2014-12-07 at 9.26.12 PM

First, go try it out if you want. Submit something. It’ll help it make more sense.

I thought this would be a lot easier than I made it. I tried lots of paths and considered spending various amounts of money to make this easier. Please benefit (probably) from my wandering. I try to link in where I learned different things and, more importantly, I tried to emphasize vocabulary that might be useful to you.

My goal1 was to-

  1. have a Google2 Map interface that auto-located the device
  2. allow the user to drag the marker to adjust the location
  3. plot the resulting WordPress posts on a map

To make this work you do need a Google Maps API3 key and on the WordPress side you’ll need the Gravity Forms (Costs money but worth it) and Geo Mashup (free) plugins. Gravity Forms will let you create posts via a form and provision form elements via URL parameters. Geo Mashup is the friendliest way I found to display posts on a Google Map based on lat/long parameters associated with the post.

Auto Locate

I went to a few different places for this but ended up finding/using the handy example posted in the Google Maps API documentation. It took me a while to get there- “geolocation” is the key term. Add it to your terminology dictionary.

Draggable/Adjustable

So now I needed to figure out a few additional things. The example created an info window rather than a marker so I needed to change that. I also needed to make the marker draggable.

When I looked at the code more closely, things looked possible for someone of my limited skill set.

The original chunk that makes the info window looks like this

 var infowindow = new google.maps.InfoWindow

So looking at the API, I found the marker information and changed it to the line below.

var marker = new google.maps.Marker

I changed the variable name (the var part) to help me keep things straight but I could have left it alone.4 Just make sure you change all instances of that variable. I tend to do a find/replace.

By changing to a marker, you have a new set of variables to use. Notice that draggable is one and I set it to ‘true’. The other stuff formats the icon. If you are setting multiple things per item, you need to use the curly brackets- I think of it like a subclause.

draggable: true,
icon: {
	  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
	  scale: 10,
	  strokeColor: '#FF0000' 
		},

So that worked. It took a while but it worked. I then realized, I didn’t quite know how to get the location data out.

Getting the Lat/Long Data Out

document.getElementById("latbox").innerHTML=marker.getPosition().lat();	
document.getElementById("longbox").innerHTML=marker.getPosition().lng();
		  var laturl=marker.getPosition().lat();
		  var lngurl=marker.getPosition().lng();
		  var linkurl=baseurl.concat(laturl,comma,lngurl);
		  document.getElementById("linkurl").href=linkurl;

This chunk focuses on getting the lat/long of the initial point and puts them in the latbox and longbox in the page. I did this mainly for testing so I could make sure the code was working. If you left off the .lat() and/or .lng() piece, it’d pull the lat/long as one piece and you could get rid of half the code.

Lines three and four just assign the data to some variables so I could use it to make a URL that provisions a form. Line five makes it into a URL and line six adds the link to the button in the webpage.

This data does not update on drag. You need a LISTENER. They listen to changes in things. You’ll see virtually the same code as above with the addition of the listener function in the first line.

google.maps.event.addListener(marker, "drag", function(){	document.getElementById("latbox").innerHTML=marker.getPosition().lat();
document.getElementById("longbox").innerHTML=marker.getPosition().lng();
		var laturl=marker.getPosition().lat();
		var lngurl=marker.getPosition().lng();
		var linkurl=baseurl.concat(laturl,comma,lngurl);
		document.getElementById("linkurl").href=linkurl;

So at this point, we can complete goals one and two. We can then add the lat/long data to a URL piece. That’s what’s happening in the last two lines of both of the chunks above. It makes a URL that looks something like

http://augmenting.me/geo/report/?coordinates=37.5473032,%20-77.4544755

The first portion http://augmenting.me/geo/report/ takes you to the page where the form is. The second piece ?coordinates= starts with a question mark to indicate it’s a query string and then coordinates identifies the form field you want to populate. We want to fill this field with the lat/long coordinates which are generated via the concatenation of the two variables.5

The Gravity Forms Portion

There’s a bit more detail on provisioning form fields via URL over here.

allow provisioning via URL
allow provisioning via URL

custom field association
custom field association

This pieces is just letting the Geo Mashup plugin know where we’re storing the lat/long coordinates. You can use already associated fields or make a new one and name it whatever works for you.

Another thing I did which helped make this a bit more interesting was to setup some custom CSS/div associations for the Gravity Form responses (below). I then just added those as responses like so . . .

<div class="excellent">0 JTU</div>

Nothing fancy but it added a color element that helped reinforce the good/bad associations. It had the added benefit of being reflected in the Gravity Views layout.6

.excellent {
	background-color: green;
	padding: 5px;
	display: block;
	color: white;
}

.good {
	background-color: #33CC00;
	padding: 5px;
	display: block;
	color: white;
}

.ok {
	background-color: #D0D0D0;
	padding: 5px;
	display: block;
}

.bad {
	background-color: red;
	padding: 5px;
	display: block;
	color: white;
}

Geo Mashup

I tried at least six geolocation plugins. I ended up going with Geo Mashup which is free. They have a fairly active Google Discussion group. It seems to have some rough edges but worked well for what I wanted (show all posts on one map and avoid creating custom post types) and I intend to mess with it a bit more in the future. It does require your Google Maps API7 key in order to function.

geo mashup settings

Below is the entire html/js/css page that makes the map lat/long picking page. It’s commented semi-decently and hopefully this post makes it more understandable.


1 The goal elements expand once I get into the details as usually happens.

2 I did look at Leaflet and a few other options . . . but found Google to be the easiest path.

3 See here for more API evangelism

4 Neither honey badgers nor JS care.

5 Three really. I set the comma and space as a variable as well. There’s almost definitely a cleaner way to do this but it works.

6 Paid plugin but a useful one for certain scenarios.

7