Mac workflow: blogpic HOWTO

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 1280×1280 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="//fns.pappito.com/files/%Y/%m/%clipboard.jpg"><img src="//fns.pappito.com/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. ]]>

5 thoughts on “Mac workflow: blogpic HOWTO

  1. Moni

    Ön annyi mindent tud, ecetes fokhagyma receptje nincsen véletlenül? (Addig nyelem a nyálam, itt nincs ubi 🙁

    Reply
  2. Marci

    OFF: eFi, Obama commencement-jét is le kéne feliratozni, belevágunk? Ér annyit a dolog, mint a Steve Jobs-féle. Meg tudom csinálni a fordítást, de az időzítéshez nem igazán értek, viszont ez alatt van angol felirat, így gondolom könnyebb lenne és a videó minősége is elég jó.

    Reply
  3. eFi Post author

    tibor: fokhagymát sose tettem még a kovászos uborkába, de a következőnél kipróbáljuk.
    Moni: nincs, de rákérdek anyura, hátha 🙂
    Marci: lehet róla szó, de határidőt nem tudok ígérni. Csináld meg egy plain textben azt valamikor rápakolom a videora.

    Reply
  4. Moni

    Könnyelműen vettem egy kisebb zsák fokhagymát, s mielőtt rám rohad, hasznosítani kellene… azért kérdem. De a magam mulatságára is elbabrálnék velük, ha akad egy ecetes recept, jó házi.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *