Category Archives: tech

More API for More Fields

4
Filed under tech

In a recent collaboration with Nicolò Volpato I used More Fields Worpdress plugin to implement a shopping cart.

More Fields is a lightweight plugin (compared to Flutter) that add custom fields and give the ability to create new type of contents. If you use it, you’ll find my plugin More Fields API very helpful.

I wrote this one-file plugin to give a better interface for theme developers. It’s coded in object-oriented paradigm, and requires PHP 5. Just copy the file in the plugins folder and activate it. You are free to use this code as you like.

Download More Fields API

Hide custom types from the Loop

The single most useful function here is mfAPI::activate_filter(). Just call it on top of your functions.php and you’ll filter out all the custom types from the usual Worpress flow.

This is especially handy if you derived a custom type from posts. In my case I created a type called “product”. Without this trick, I had products popping out everywhere on the blog.

In case you used Wordpress get_posts() function you should replace it with $wp_query->get_posts() because get_posts is not filtered.

If you use $wp_query->get_posts() a lot, sometimes you’ll notice Wordpress may get crazy results. To fix this call $wp_query->init() before get_posts.

Warning: if you call mfAPI:activate_filter() on top of your functions.php, don’t deactivate the plugin before removing this line of code

Get contents of a specified type

The second most useful function is mfAPI::get_posts(). Use it like this:

$products = mfApi::get_posts('product');
foreach($products as $product){ 
    /* do something with $product */
};

This function has some awesome tricks. You’ll find every custom fields you added to this type as a property of the posts.
In my case the product type has a box with only a custom field, price.
So, I can print all the prices with this simple code:

$products = mfApi::get_posts('product');
foreach($products as $product){ 
    echo $product->price;
};

Another trick is the automatic extraction of the first image in the post. Just set the fourth param to true and you can do something like this:

$products = mfApi::get_posts('product',0,0,true);
foreach($products as $product){ 
    echo '<img src="' . $product->post_image . '"/>';
};

If you look at the other options, you’ll find you can easily use it to implement pagination.

    /*
     * Return an array of posts of the specified type, with custom fields
     *
     * @param string $type          custom field type
     * @param int $count            max number of elements (0 for all)
     * @param int $offset           start from this offset (user for pagination)
     * @param int $extract_image    define if we should automatically extract an image
     * @param string $where         optional mysql where
     */
    public static function get_posts($type, $count = 0, $offset = 0, $extract_image = false, $where = '')

Other complex functions

  • get_post() – get a single post (even inside the Loop) with all the benefits of get_posts()
  • get_posts_by_tag() – filter custom content by type and tag
  • get_similars() – return custom content sorted by tag similarity

Basic functions

  • get_type() – retun the type of a content
  • get_posts_count() – return the number of contents of a specified type (useful for pagination)
  • get_custom_boxes() – return custom boxes for a specified type

Create thumbnails using Wordpress built-in functions

13
Filed under tech

I was pleased to discover that there’s a better way to create thumbnails in Wordpress than code it yourself, or use a third party library.

In fact, in wp-includes/media.php there’s a whole bunch of functions that Wordpress (since 2.5) uses to manipulate media files.

image_resize() is exactly what we need:

/**
 * Scale down an image to fit a particular size and save a new copy of the image.
 */
function image_resize( $file, $max_w, $max_h, $crop=false, $suffix=null, $dest_path=null, $jpeg_quality=90)

You can use it like this to create a perfect 100×60 thumbnail:

// resize the image
$thumb = image_resize($img,100,60,true);

The tricky part is that, because Wordpress use this function in the admin, it needs some code that’s not available to themes by default.
You can fix this by including wp-admin/includes/image.php on top of your functions.php:

/// admin image API
require_once(ABSPATH . '/wp-admin/includes/image.php');

thumbnails.php

To make thumbnail generation even easier, I coded some usefull functions you can grab.
This functions work on images placed on posts and uploaded on wp-content.

Download thumbnails.php

the_thumb() is the easiest one. You can call it inside the Loop to extract the first image in the content, resize it, and output an image tag. Of course, like all Wordpress functions, there’s the corresponding get_the_thumb().

generate_thumb() it’s a shortcut for image_resize(), with some addictions.

Finally, extract_image() return the url of the first image in an html string.

// extract the first image of the post
$img = extract_image(get_the_content());

Drupal – seconda chance

7
Filed under tech

Ad ottobre 2007 ho pubblicato il mio primo e unico sito basato su Drupal (per la cronaca, è il sito della principale associazione nazionale di improvvisazione teatrale).

Dopo mesi di sviluppo intenso e problematico, dentro e fuori,  ho deciso che non avrei mai più adottato quel CMS, e ho invece cominciato una lunga e felice luna di miele con Wordpress.

Ma da allora è passato più di un anno, è uscita la nuova verisone 6 di Drupal, ora conosco molto meglio il CMS di quando ho cominciato, e insomma ho pensato che valeva la pena ridargli un’altra occasione.

Purtroppo mi è bastato testare una nuova installazione per accorgermi che mentre Wordpress ha fatto passi da giganti, Drupal è rimasto pressochè identico.

Per le mie esigenze Drupal ha almeno tre problemi importanti:

  • Non è user-friendly: dal momento che è una piattaforma per la pubblicazione di contenuti, è una grossa mancanza. I miei clienti non sono programmatori, e hanno diritto ad una interfaccia semplice e usabile.
  • E’ troppo macchinoso: spesso è più facile programmarsi le features aggiuntive da soli piuttosto che usare gli strumenti inclusi
  • E’ monolitico: nonostante la struttura modulare, non è affatto flessibile, e ci si ritrova a perdere più tempo a sfrondare il codice inutile che a sviluppare

Insomma, dopo aver scaricato e installato il core, la traduzione (lacunosa) italiana, una quindicina di moduli base per aver qualcosa di simile a Wordpress, ho gettato di nuovo la spugna.

Perchè AJAX piuttosto che Flash

2
Filed under tech

Riprendendo una discussione nata nei commenti di qualche articolo fa vorrei puntualizzare alcune differenze importanti tra due tecnologie: Ajax e Flash.

Premetto che l’ambito di interesse è lo sviluppo di RIA, cioè di applicazioni internet con potenzialità simili a quelle desktop.

Fatte queste premesse, se analizziamo la scena globale ci accorgiamo che ad eccezione delle RIA che si occupano di grafica (come Aviary o Photoshop Express), la maggior parte delle applicazioni web sono sviluppate in AJAX.

Ecco alcuni esempi importanti: tutti gli applicativi Google (Google Documenti, GMail, Google Calendar…), la suite completa per l’ufficio Zoho, ma anche i pannelli di amministrazione dei principali CMS (come la nuova interfaccia amministrativa di Wordpress, dalla quale sto scrivendo), senza contare i Social Network come Facebook che per la loro complessità assomigliano sempre più a vere e proprie RIA.

Inoltre, questo non riguarda solo i “big player“: la quasi totalità delle piccole web-applications 2.0, scritte in PHP o RubyOnRails, continuano a fare uso estensivo di AJAX.

 

Perchè AJAX

E allora, quali sono questi vantaggi e quali svantaggi nel costruire un’applicazione interamente in Flash?

  • Anzitutto, Flash è spaesante per l’utente. Il tasto destro non funziona come ci si aspetta, molte convenzioni che favoriscono l’usabilità non sono rispettate.
  • Fare una cosa semplice come selezionare e copiare del testo può diventare complicato o impossibile.
  • Le abitudini sulla navigazione sono disattese: spesso le applicazioni Flash non hanno pagine o diversi indirizzi URL.
  • Molte funzionalità dei browser vengono annullate: Flash di fatto nega al browser e ai suoi plugin di entrare nell’applicazione e personalizzarne la visualizzazione.
  • Ad esempio: impostare la dimesione preferita del testo non ho effetti su Flash, i web accellerator e le web slices di Internet Explorer 8 non funzionano, nemmeno i plugin di Firefox per filtrare la pubblicità, e l’elenco potrebbe essere veramente infinito.
  • Per non parlare della stampa, che se già normalmente da spesso risultati inattesi, con Flash non viene nemmeno presa in considerazione.
  • Ultimo ma non ultimo, Flash ha maggiori problemi di accessibilità, sia per chi usa screen reader sia per dispositivi alternativi o mobile.

Salvare il bambino

Non buttiamo però il bambino con l’acqua sporca.

Se è vero che usare Flash per l’intera interfaccia ha i suoi svantaggi, anche nell’ambito delle RIA Flash continua ad essere un’ottima scelta per:

  • Sfruttare potenzialità avanzate come l’upload multiplo di file (vedi ad esempio la libreria SWFUpload: Flash c’è, ma non si vede) o il salvataggio dati nel browser (vedi dojo.storage)
  • Animazioni grafiche circoscritte (anche in questo ambito AJAX offre alternative interessanti, ma Flash resta il top)
  • Grafici interattivi animati (vedi Google Analytics)

Che ne pensate?

Ho tralasciato qualche punto importante?

I commenti sono sempre ben accetti.

Manipolazione immagini in PHP5

1
Filed under tech

Se siete in cerca di una soluzione per la manipolazione delle immagini in PHP suggerisco WideImage.

E’ una libreria PHP 5 che semplifica l’elaborazione e funziona da wrapper per le varie GD, GD2 e ImageMagick.

Oltre che essere estremamente potente è anche facile da utilizzare. Ad esempio:

$img = wiImage::load('image.png');
$img->resize(200, 500)->crop(10, 10, 80, 80)->asGrayscale()->saveToFile('new.png');

Con due sole righe di codice apriamo un immagine, la ridimensioniamo, la ritagliamo, convertiamo in scala di grigi e salviamo in un nuovo file.

Mi è tornata utile all’interno di un progetto che sto sviluppando nel framework CodeIgniter.

Se conoscete il framework saprete che dispone già di una libreria per la gestione delle immagini.

Purtroppo, diversamente dal resto del codice, è scomoda da utlizzare, poco versatile e abbastanza irrazionale.

Se invece cercate una soluzione più immediata (adatta ai designer) vi suggerisco TimThumb.

E’ l’ideale per creare anteprime di immagini al volo, ad esempio dentro un tema per Wordpress.