×

How to make the Get The Image WordPress plugin to work with TimThumb and Related posts

Published mars 27th, 2010 by

I’ve been using the wordpress plugin ‘Get the Image‘ by developer Justin Tadlock for a while. ‘Get the image’ does a fantastic job searching through posts looking for images, so you don’t have to add thumbnails manually, but it always bothered me that it downscaled images in the html instead of scaling and cropping them properly. I also use the lovely timThumb script on my blog, to scale, scrop and cache images on the fly, and I wanted to find a way to combine the two scripts into one.

(mer…)

Posted in Code, Open Source

Code: Delicious.com + Thumbalizr screenshots + caching

Published mars 20th, 2010 by

I’m playing with my Delicious Snapcasa code this weekend to see if I can replace Snapcasa with the thumbalizr.com screenshot-service. Snapcasa was great because it gave me plenty of free captures each month, but it has some serious problems capturing some of the sites I throw at it, and was behaving rather randomly, so it has to go.

I’ve looked at several screen shot services, and tested many, and so far it is thumbalizer.com that seem to be the fastest and most stable, and the free version is able to take screenshots of webpages deeper into the site, not just the front page. As far as I can see I can’t find any limit on the api, but the free version does have a watermark on each thumb. I’m too cheap to spring for a paid account, but you do have that option.

The result so far

Demo: https://pappmaskin.no/opensource/delicious_snapcasa/delicious_thumbalizr.php?tag=art&count=10
Shows: The last 100 bookmarks tagged with “art” on delicious.com by me.

Caching

Thumbalizr.com provides a .gz with some php for caching the thumbnails their API provides, but I wasn’t able to get it to work last night. Luckily Anton Lindquist has branched the code on GitHub and made some improvements, and after a little headscratching (aka googleing) and some helpful tips from Anton himself, I am now running a version that grabs the images from Thumbalizer and stores them locally on my server, speeding up the pages quite a lot, easing the stress on thumbalizer, and most importantly, preventing already grabbed pages from being queued again and again.

New default queue image

Thumbalizr provides an OK queue-image while their services works on grabbing a screen shot of the page you request but with some help from Anton I’m not using my own custom image, currently a picture of my son holding a fish (just to make him smile :). It’s nice to have a little more control over what is displayed on the page until the image is ready for use, especially when you do like me and fire off a grid of many screen shots on the same page.

Possible uses

I’ve rewritten my original Snapcasa script into a WordPress plugin which I use on several of my blogposts right now. I’ve also made a standalone page for my sons, a start page with kid friendly games and YouTube-videos etc. They can’t read yet, so it’s nice to have an automated start page with pictures.

The code

I promised to update this post with the code I use for working with the Thumbalizr api and caching images locally. As I said I use this caching script instead of the code provided by Thumbalizr. It comes with an example index.php, that I’ve expanded on a little. Right now it looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 'api_key',
	'local_cache_expire' => (!$config['local_cache_expire']) ? 3600 : $config['local_cache_expire'],
 
);
$image = new thumbalizrRequest($config);
 
$image->request($imageurl);
 
//$image->request('http://www.thumbalizr.com/');
 
if($image->headers['Status'] == 'OK' || $image->headers['Status'] == 'LOCAL') {
	$image->output();
} else {
	//print_r($image->headers); //debug
//https://pappmaskin.no/wp-content/2010/03/noah-2624545080_417ba06836_m.jpg
 
$filename = 'https://pappmaskin.no/wp-content/2010/03/noah-2624545080_417ba06836_m.jpg';
$size = getimagesize($filename);
$fp = fopen($filename, "rb");
if ($size && $fp) {
    header("Content-type: {$size['mime']}");
    fpassthru($fp);
    exit;
} else {
    // error
}
 
}
 
?>

(mer…)

Posted in Code

Playing with SnapCasa screenshots and del.icio.us

Published oktober 17th, 2008 by

https://i0.wp.com/pappmaskin.no/wp-content/2011/07/20081016-es6718uspgixxfa8x8d7kbqm8y.jpg?resize=480%2C354

Tonights nerdfest will include trying to use the SnapCasa and del.icio.us to generate a lovely page full of thumbnails, one for each url.

Ingredients:

1. My 100 latest bookmarked urls from del.icio.us: http://feeds.delicious.com/v2/rss/mskogly?count=100
2. A SnapCasa login account.
3. A server that supports xslt transformation. (I’m running MAMP on my macbook, and pappmaskin is hosted on One.com)
4. A text editor. I’m using Dreamweaver for this, since it has some pretty good tools for building xslt. (Take a look at the Adobe Livedocs for more info on using it).

(More after the break)

(mer…)

Posted in Code, Open Source

Code: Showing a list of youtube videos using gdata and xslt with php

Published september 16th, 2008 by


Let’s start with a little demonstration. The section below is made by calling the php-script https://pappmaskin.no/opensource/youtube/youtube.php?s=super&max=9 within an iframe:

Why iframe?
Just to make it easier to reuse and embed Youtube videos on different sites, and because it makes it easier to try out new ideas without adding messy bits to a larger project. Sort of like rapid prototyping/proof of concept before “committing” to a feature and spending alot of time integrating something you might end up throwing out.

This solution currently consists of these files:
youtube.php, takes s=whateveryouwanttofind and max=number of videos to return as GET parameters
youtube5.xsl, does all the transformation of the xml from youtube into lovely xhtml.
youtube.js, javascript file that handles clicking on the thumbnails to load a new video, using innerHtml
youtube.css, minimalist styling to keep things pretty.
swfobject.js, for embedding flash

The xslt:

<?xml version=”1.0″ encoding=”UTF-8″?> <xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:fn=”http://www.w3.org/2005/xpath-functions” xmlns:gd=”http://schemas.google.com/g/2005″ xmlns:media=”http://search.yahoo.com/mrss/” xmlns:n1=”http://www.w3.org/2005/Atom” xmlns:openSearch=”http://a9.com/-/spec/opensearchrss/1.0/” xmlns:xdt=”http://www.w3.org/2005/xpath-datatypes” xmlns:xs=”http://www.w3.org/2001/XMLSchema” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:yt=”http://gdata.youtube.com/schemas/2007″ xmlns:altova=”http://www.altova.com”> <xsl:output method=”html” encoding=”ISO-8859-1″ doctype-public=”-//W3C//DTD XHTML 1.0 Transitional//EN” doctype-system=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”/> <xsl:param name=”SV_OutputFormat” select=”‘HTML'”/> <xsl:variable name=”XML” select=”/”/> <xsl:template match=”/”> <html> <head> <title>Pappmaskin.no – Youtube playlist</title> <link rel=”stylesheet” href=”youtube.css” media=”screen” /> <script type=”text/javascript” src=”youtube.js”></script> <script type=”text/javascript” src=”swfobject.js”></script> </head> <body> <div id=”youtube”> <h1>YouTube Playlist</h1> <xsl:for-each select=”$XML”> <xsl:for-each select=”n1:feed”> <xsl:if test=”n1:entry[1]”> <div class=”youtubevideo”><div id=”cur_video”> <xsl:for-each select=”n1:entry[1]/media:group/media:content”> <xsl:if test=”@type = ‘application/x-shockwave-flash'”> <embed> <xsl:attribute name=”src”> <xsl:value-of select=”@url”/> </xsl:attribute> <xsl:attribute name=”width”>480</xsl:attribute> <xsl:attribute name=”height”>385</xsl:attribute> <xsl:attribute name=”quality”>high</xsl:attribute> <xsl:attribute name=”bgcolor”>#000</xsl:attribute> <xsl:attribute name=”id”>cur_video_swf</xsl:attribute> <xsl:attribute name=”name”>cur_video_swf</xsl:attribute> </embed> </xsl:if> </xsl:for-each> </div> <!– ends cur_video –> <div id=”cur_video_title”> <xsl:value-of select=”n1:entry[1]/n1:title”/> </div> </div>    <!– ends youtubevideo –> </xsl:if> <div class=”youtubethumbs”> <xsl:for-each select=”n1:entry”> <xsl:if test=”position() > 1″> <xsl:for-each select=”media:group”> <div class=”youtubethumb”> <xsl:for-each select=”media:content”> <xsl:if test=”@type = ‘application/x-shockwave-flash'”> <a> <xsl:attribute name=”href”>#</xsl:attribute> <xsl:attribute name=”onmousedown”>PlayVideo(‘<xsl:value-of select=”@url”/>’,’http://img.youtube.com/vi/h8oBykb_Pqs/2.jpg’, ‘Youtube’, true);</xsl:attribute> <xsl:attribute name=”onclick”>return false;</xsl:attribute> <xsl:for-each select=”../media:thumbnail[1]”> <xsl:element name=”img”> <xsl:attribute name=”src”><xsl:value-of select=”@url”/></xsl:attribute><xsl:attribute name=”lowsrc”>lowsrc.gif</xsl:attribute><xsl:attribute name=”width”>100</xsl:attribute><xsl:attribute name=”height”>60</xsl:attribute> </xsl:element> </xsl:for-each> <xsl:value-of select=”../media:title”/> </a> </xsl:if> </xsl:for-each> </div> <!– ends avslutter class youtubethumb –> </xsl:for-each> </xsl:if> <!– end if on position > 0 –> </xsl:for-each> </div><!– ends class youtubethumbnails –> </xsl:for-each> </xsl:for-each> <div class=”youtubefooter” style=”clear: both; color: #999999; font-size: 0.8em;”>Disclaimer: These videos are retrieved from Youtube through a simple search. Even though the search is done with a filter to remove “inappropriate material”, it may still contain videos deemed offensive by some. Videos may or may not be in violation of international copyright law.</div> </div> <!– avslutter id youtube –> </body> </html> </xsl:template> </xsl:stylesheet>

The PHP

<?php
$searchterm = $_GET[“s”];
$maxresults = $_GET[“max”];

/* load the xml file and stylesheet as domdocuments */
$xsl = new DomDocument();
$xsl->load(“youtube5.xsl”);
$inputdom = new DomDocument();

//Example http://gdata.youtube.com/feeds/videos?format=1&vq=Ratchet+Clank:+Tools+of+Destruction&max-results=2

$inputdom->load(“http://gdata.youtube.com/feeds/videos?format=5&vq=” . $searchterm . “&max-results=” . $maxresults);

//$inputdom->load(“youtube.xml”);
//if you want to test with a local file

/* create the processor and import the stylesheet */
$proc = new XsltProcessor();
$xsl = $proc->importStylesheet($xsl);
//$proc->setParameter(null, “titles”, “Titles”);
//not in use, but needed if you want to pass variables into the xslt from php

/* transform and output the xml document */
$newdom = $proc->transformToDoc($inputdom);
print $newdom->saveXML();
exit;
?>

Posted in Code, Open Source