SSL and Google Fonts

My 9-5 involves building websites for retail customers. We often utilise some of Google’s fonts, but occaisionaly they weren’t rendering across all browsers and this was due to some SSL issues. Google fonts offer a couple of options for installing their fonts into your site, and after selecting at least one font, and we click the “use” option, we will be presented with:

Options

Google Font embed options

There are some solutions out there on the web, but most document changing the link element href to https from http:

<link href='https://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css' />

Firstly we couldn’t use the first option (we can’t add bespoke html code to the symfony generated code), so if we click to the @import option we see:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

The @import doesn’t work for us here either, but if we copy the url into the address bar in the browser and hit enter, we get:

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

If we add this to our style sheet and remove the http: from the url, the browser will call the google font page in the applicable mode (http or https).

Flickr Machine Tags

Five years ago I read a post by Jeremy Kieth about machine tags. I had a domino blog back then, now gone, but I wanted to do the same thing. The last couple of nights I’ve been fooling around getting the same thing working. I guess that means I’m about 5 years behind schedule.

I’m now going to explain how I did it, so that if anybody has a better way, they can tell me, and I can polish my own code a little.

child-themeMy previous post described my child theme and this is where I’ll be working to build the api call, processing the response and shoe-horning the the processed data into the content of a post.

In my last post I created a child theme and extended the css (not replaced). However the child theme can replace or extend any part of the original theme, and I don’t pretend to be an expert on this….yet.

To extend my child theme further I extended the functions.php file. To extend a file from the original them create a new one of the same name in the child theme. Add some php tags and we’re off.

In my example I’m first going to add a function to add a triple tag to the content by the “add_filter” function which takes $content (returned from the original function) and does something extra with it – In my case it adds a triple tag after the content has rendered in the browser.

Machine/Triple Tag: zedzdead:blog=%s

%s',$id,$content); } // Returns the content. return $content; }

Now I want to use that triple tag by calling the flickr api and returning an array of photos that have that tag. Then I will be able to parse the response from that api call and construct html img tags and urls to display those photos on my web page.

Before we go any further, and if you’re following along, to call the flickr api you will need an api key.

I am going to pop the api call in a separate function for neatness and use the flickr.photos.search method and call the whole thing flickrPhotosSearch:

function flickrPhotosSearch($id)
{
  $params = array(
    'api_key'	=> '896673a12c746fe38c87e3f92512c143',
    'method'	=> 'flickr.photos.search',
    'machine_tags'	=> sprintf('zedzdead:blog=%s',$id),
    'min_date_taken' => '2009-01-01',
    'format'	=> 'php_serial',
  );
  $encoded_params = array();
  foreach ($params as $k => $v){
    $encoded_params[] = urlencode($k).'='.urlencode($v);
  }
  $url = "http://api.flickr.com/services/rest/?".implode('&', $encoded_params);
  $rsp = file_get_contents($url);
  $rsp_obj = unserialize($rsp);  
  if ($rsp_obj['stat'] == 'ok'){
    echo "Call success";
  }else{
    echo "Call failed!";
  } 
}

Once that was working I replaced the echo’d successful message with:

  if ($rsp_obj['stat'] == 'ok'){
    $flickrPhotos = '';
    $flickrPhotos .= '
'; $flickrPhotos .= '

Contribute

'; $flickrPhotos .= '
'; $flickrPhotos .= '

Got a flickr account? Got a photo that illustrates this post? Just add the following triple tag and as if by magic, it will appear here:

'; $flickrPhotos .= sprintf('

zedzdead:blog=%s

',$id); $flickrPhotos .= '
'; foreach($rsp_obj['photos']['photo'] as $photo) { $linkurl = sprintf( 'http://farm%s.staticflickr.com/%s/%s_%s_n.jpg', $photo['farm'], $photo['server'], $photo['id'], $photo['secret'] ); $imgurl = sprintf( 'http://farm%s.staticflickr.com/%s/%s_%s_q.jpg', $photo['farm'], $photo['server'], $photo['id'], $photo['secret'] ); //$flickrImg = ''; $flickrPhotos .= sprintf('',$linkurl,$imgurl,$photo['title']); //echo $flickrImg; } //$flickrPhotos .= ''; $flickrPhotos .= '
'; return $flickrPhotos; }

This basically creates a section to hold the photos and constructs all of the image tags and links to append to the content. So now I just need to call this function from the “my_the_content_filter” function that I created at the beginning of this post.

function my_the_content_filter( $content ) {
    if ( is_single() )
    {
      // Add triple tag to content
      global $id;
      $flickrPhotos = flickrPhotosSearch($id);
      $content .= $flickrPhotos; 
    }
    // Returns the content.
    return $content;
}

I did a bit of polishing, including adding flickr colours to the triple tag to show off my extensive css skills. There is still a fair bit of polishing to do, like sorting out the api call failure message/display but for now if you have a flickr account, try tagging one of your photos with the triple tag of this post. 

tripletag

A little bit of wordpress

Tonight I did a little bit of theme development in wordpress. A long time ago, I looked into developing my own theme from scratch. I followed a tutorial on the web and whilst it gave me some knowledge of how to do bits and pieces, I never got round to developing my own.

Far more easier is to create a child theme from an existing one. At the time of writing, I’m using the 2012 theme, so I created a folder and named it twentytwelve-child and added a css file inventively named style.css. The important step in creating a child theme is to add the a reference to the original theme via “Template:”, and in the comment below you can see I’m referencing the twentytwelve theme, mavellous!

/*
Theme Name: zedzdead
Theme URI: http://zedzdead.net/
Description: Child theme for the Twenty Twelve theme
Author: zedzdead
Author URI: http://zedzdead.net/about/
Template: twentytwelve
Version: 0.1.0
*/
@import url("../twentytwelve/style.css");

.entry-header h1.entry-title {
font-family: haettenschweiler, Georgia, Verdana, sans-serif;
font-size: 2em;
}

To adopt the original css file as the starting point, the @import rule is essential. If you do this you will have to think about how you overwrite the original rules, if that’s your intention.

I uploaded everything, checked it looked OK and kinda left it there, to watch Poirot, or Elemetary or something. When I got to work the next day, I had another quick look only to find out that haettenschweiler wasn’t loading. At first I thought this was because my work laptop didn’t have the font loaded. So off I went to have a look at loading fonts.

I had a swifty at Google Web Fonts, but when all the fonts rendered as a sans-serif, I decided something funny was going on that I didn’t much care about in work. But, my interest if typography had been piqued.

So back home, I chose two fonts from Google and dropped them into my new stylesheetwith a bit of text-shadow thrown in for the headings, you know the one I created for my child-theme, so now I have:

/**/
.entry-header h1.entry-title {
  font-family: 'Pinyon Script', cursive;
  text-shadow: 4px 4px 4px #aaa;
  font-size: 2.5em;
}

body.custom-font-enabled {
	font-family: 'Sintony', sans-serif;
}

Now, I’m reading about eots, woffs, and ttfs. I think more fonty stuff will follow.

Re-Starting Over

I’ve written and stopped writing and written and stopped writing this blog on and off for about 10 years.  I’m currently writing it again.  I might stop.

Starting again means doing some typical housekeepery things, AkismetAnalytics (why? Nobody will read it).  I’ve also added myself as an admin on the site so that right from the off, all posts are by me.

I need to do more setting up and I’ll mention stuff about that as it happens.  Got a plugin/setup tip for me? You know where the comments are, right?