Daily Archive for June 23rd, 2010

Mac workflow: blogpic HOWTO

Published on 2010/06/23 in AppleScript, Gastro, Mac and workflow. 5 Comments

A mai mese arról fog szólni, hogy hogyan készítem el egy-egy postba a szép felgörbült szélű thumbnailes képeket, mint amilyen ez a kovászos uborka itt alant:

A Mac recept

Hozzávalók:

  • Acorn - image editor Gus Mueller billentyűzetéből. Puritán, letisztult, szeretem.
  • JSTalk - script bridge, szintén Gustól. Segítségével a scriptelhető OS X alkalmazásokhoz JavaScriptes vagy Objective C-s stílusban írhatsz scripteket.
  • TextExpander - (akár) scriptelhető text makrózó tool, mely számos változó használatát (dátum és idő, clipboard tartalom, kép, kurzorműveletek) engedi meg.
  • WordPress FancyZoom plugin - Cabel Sasser JavaScriptben írt remeke. Ő állítja elő az oldalba pakolt img HTML tag-ekhez a zoom effektet, amikor a thumbnailre klattyolsz.

A workflow

A dolog onnan indul, hogy a kívánt képet 1280x1280 max méretre cropolom, majd lementem jpg formátumban. Az így előkészített képet bedobom az Acorn-ba, majd lefuttatom a Framer fedőnevű JSTalk scriptet, aki előállít egy 500 pixel széles smallDoc.png thumbnail image-et a beledobott képből.
A két képet feltöltöm a WordPressbe, majd egy TextExpander makró segítségével berámolom a postba a thumbnailhez és az alatta levő image-hez szükséges HTML kódot.

Nézzük meg a JSTalk scriptet és a TextExpander snippetet, aztán jöhet a kovászos ubi receptje. Elsőként itt a script - ehhez túl sok közöm nincs, Gus csomagolta a JSTalk példák közé, nekem meg nagyon megtetszett az eredménye. Persze lehetne ez egyszer CSS3, de amíg nem, addig jó ez így is, hardcoded módon:

 
 
var acorn = [JSTalk application:"Acorn"];
// var doc = acorn.open_("/path/to/SomeImage.jpg");
var doc = [[acorn orderedDocuments] objectAtIndex:0];
 
// scale our image down
[doc scaleImageToWidth:492];
 
var image = [[[NSImage alloc] initWithData:[doc dataRepresentationOfType:"public.png"]] autorelease];
 
// close the doc, since we've already got the data we need.
[doc close];
 
var bitmap = [image bestRepresentationForDevice:nil];
 
var extent = NSMakeRect(0, 0, [bitmap pixelsWide], [bitmap pixelsHigh]);
var xOffset = 5;
var yOffset = 35;
var curveHeight = 15;
var imageYOffset = 10;
var whiteBorderWidth = 4;
var doubleBorderWidth = whiteBorderWidth * 2;
 
var newSize = NSMakeSize(extent.size.width + (whiteBorderWidth * 2),
                         extent.size.height + imageYOffset + (whiteBorderWidth * 2));
 
var newImage = [[[NSImage alloc] initWithSize:newSize] autorelease];
 
[newImage lockFocus];
 
[[NSGraphicsContext currentContext] saveGraphicsState];
 
var shadow = [[NSShadow alloc] init];
[shadow setShadowColor:[[NSColor blackColor] colorWithAlphaComponent:.6]];
 
var shadowOffset = NSMakeSize(0, -(yOffset + 5));
[shadow setShadowOffset:shadowOffset];
[shadow setShadowBlurRadius:5];
shadow.set()
 
// make a curved path, at the bottom of our image.
bezierPath = NSBezierPath.bezierPath();
 
[bezierPath moveToPoint:NSMakePoint(xOffset, 40 + yOffset)];
[bezierPath lineToPoint:NSMakePoint(extent.size.width - (xOffset) + doubleBorderWidth, 40 + yOffset)];
[bezierPath lineToPoint:NSMakePoint(extent.size.width - (xOffset) + doubleBorderWidth, 10 + yOffset)];
 
[bezierPath curveToPoint:NSMakePoint(newSize.width / 2, curveHeight + yOffset)
           controlPoint1:NSMakePoint(extent.size.width - (xOffset), 10 + yOffset)
           controlPoint2:NSMakePoint(newSize.width *.75, curveHeight + yOffset)];
 
[bezierPath curveToPoint:NSMakePoint(xOffset, 10 + yOffset)
           controlPoint1:NSMakePoint(newSize.width *.25, curveHeight + yOffset)
           controlPoint2:NSMakePoint(xOffset, 10 + yOffset)];
 
[bezierPath fill];
 
// get rid of our shadow
[[NSGraphicsContext currentContext] restoreGraphicsState];
 
// draw a white border
[[NSColor whiteColor] set];
[[NSBezierPath bezierPathWithRect:NSMakeRect(0, imageYOffset, newSize.width, extent.size.height + whiteBorderWidth * 2)] fill];
 
// draw our gray border around the white border
[[NSColor lightGrayColor] set];
[[NSBezierPath bezierPathWithRect:NSMakeRect(.5, imageYOffset + .5 , newSize.width - 1, (extent.size.height - 1) + (whiteBorderWidth * 2))] stroke];
 
// NSImage takes into account dpi of the image.  So we force it's size, to avoid small images.
[image setSize: extent.size];
 
// draw our image
[image drawAtPoint:NSMakePoint(whiteBorderWidth, imageYOffset + whiteBorderWidth)
          fromRect:NSMakeRect(0, 0, extent.size.width, extent.size.height)
         operation:NSCompositeCopy
          fraction:1];
 
[newImage unlockFocus];
 
 
var smallDoc = [[acorn sharedDocumentController] newDocumentWithImageData: [newImage TIFFRepresentation]];
 
[[smallDoc dataRepresentationOfType:"public.png"] writeToFile:"/Users/fns/Desktop/smallDoc.png"];
 
[smallDoc close];

Ez pedig a TextExpander snippet:

<a href="http://fns.csokolade.hu/files/%Y/%m/%clipboard.jpg"><img src="http://fns.csokolade.hu/files/%Y/%m/%clipboard.png" alt="" title="%clipboard"/></a>

A TextExpander snippetnél mindössze annyi dolgom van pluszban, hogy a kép nevét a clipboardba másoljam. Ez meg OS X alatt egy Enter a filenéven, majd ⌘C és Sanyi.

A kovászos ubi recept

Egy 5 literes befőttes üvegbe kb. 3 kiló uborka fér. Az üveget forró vízzel kimosom, majd elfektetem, hogy könnyebb legyen bele pakolni.
Az uborkák két végét levágom, hosszában 4-5-6 vágást ejtek rajtuk. Nekiállok úgy bepakolni az uborkákat, hogy függőlegesen álljanak majd az üvegben, mikor érleli őket a Nap.
Egy réteg uborka után egy nagy adag kaprot teszek be az üvegbe (persze csak akkor, ha épp nem Pappitonak készül a cucc :)), majd megint ubi és ez így megy addig, amíg meg nem telik a bödön.
Óvatosan felállítom az üveget, majd 2 púpos evőkanál sót teszek a tetejére. Felforralok 3-4 liter vizet és egy merőkanállal rákanalazom az uborkákra, amíg tele nem lesz az üveg.
A végén egy szelet kenyeret nyomok a tetejébe, letakarom az egészet egy tányérral és megy ki a Napra, 3-4 napig. Mikor a lé már zavaros, leszedem a kenyeret, de 1-2 napot adok még neki a melegen, hadd érjen össze.