La nuova funzionalità delle miniature di WordPress, introdotta con la versione 2.9 e discussa in WordPress 2.9+: la nuova funzione post thumbnails, può essere automatizzata tramite un semplice script in PHP. Questo può risultare comodo quando “ci si scorda” di inserire le miniature su ogni articolo o se si vuole aggiornare il pregresso.
Articoli con Tag ‘Immagini’
Come impostare in automatico le miniature su tutti i Post
WordPress 2.9+: la nuova funzione post thumbnails
Con le ultime release di WordPress, dalla 2.9+, è stata introdotta una nuova funzionalità molto utile per gestire i thumbnails, ovvero le miniature. Tale funzionalità, tuttavia, dev’essere attivata nel tema e, precisamente, agendo sul file functions.php. Questa nuova caratteristica è utile in molti contesti e fornisce una strumento comodo e semplice sia per chi sviluppa un sito web utilizzando WordPress sia al cliente finale che dovrà poi gestire i contenuti.
Nelle versioni di WordPress precedenti alla 2.9, infatti, molti sviluppatori utilizzavano i campi personalizzati (custom fields) per fornire al cliente la possibilità di aggiungere un’immagine – esterna – al post. Soluzione che se dal punto di vista dello sviluppatore non era particolarmente gravosa, rendeve comunque l’editing dei post abbastanza scomodo, soprattutto se consideriamo che spesso e volentieri è il cliente finale a curare i contenuti.
Come localizzare immagini e viste di Interface Builder
Dopo aver illustrato come localizzare le nostre stringhe in Xcode, vediamo adesso quanto risulta semplice – applicando la medesima tecnica – localizzare immagini e viste/interfacce realizzate con Interface Builder.
Localizzare risorse grafiche
Il processo, come accennato, è il medesimo; se abbiamo un’immagine già inserita nelle nostre risorse, o ne inseriamo una nuova, e vogliamo “localizzarla” – cioè gestire due o più immagini in base alle lingue supportate – basterà cliccare con il tasto destro sull’immagine (Adium.png in questo esempio) e selezionare Get Info:
Clicchiamo Make File Localizable in basso a sinistra.
Clicchiamo su Add Localization e inseriamo Italian:
In modo da ottenere:
La nostra immagine viene spostata (fisicamente, una delle rare volte in cui quello che accade nell’alberatura Xcode si riflette sul filesystem) sotto le cartelle virtuali English.lproj e Italian.lproj esattamente come accadeva con il testo:
A questo punto ognuna delle cartelle English.lproj e Italian.lproj contiene una stessa versione dell’immagine. Questa immagine è manipolabile all’interno di Interface Builder, dove ne vedremo – per default – la versione inglese.
Arrivati a questo punto, basta sovrascrivere uno (o entrambi i file Adium.png) per ottenere una localizzazione delle immagini “lampo”.
Localizzare i file XIB
Anche le interfacce costruite con Interface Builder possono essere localizzate nella loro interezza, quando lo si ritiene necessario. Il procedimento è identico a quello svolto con le risorse grafiche: aggiungiamo un ViewController (ad esempio infoViewController) con interfaccia XIB, lo selezioniamo, scegliamo Get Info dal menu contestuale, rendiamo il file localizzabile, aggiungiamo la localizzazione in italiano:
Cliccando su English o su Italian si aprirà Interface Builder! Questa volta, sul filesystem, noteremo che sono state create due cartelle (English.lproj e Italian.lproj) all’interno della classica cartella Classes. Entrambe avranno il loro file infoViewController.xib. La comodità, in questo, risolta evidente nel codice; quando andremo ad istanziare il nostro controller si avrà un codice “pulito” di questo tipo:
1 2 | InfoViewController *info = [InfoViewController alloc]; [self.view addSubview:info.view]; |
Come vedete non c’è traccia di nessuna dichiarazione relativa alla localizzazione, totalmente gestita da sistema. Le due interfacce, ovviamente, possono essere completamente differenti, in quanto risultano a tutti gli effetti come due file XIB separati.
FireFox 3.5.7: come risolvere il difetto dei bordi arrotondati su un’immagine
A volte basta spostare un elemento, cambiando punto di vista, per risolvere un problema apparentemente insuperabile. Quando poi si ha a che fare con compatibilità tra i browser e CSS, inventarsi soluzioni “spettacolari” (acrobazie direi) è all’ordine del giorno. Quello che vi mostro è un modo semplice per applicare bordi arrotondati a delle immagini utilizzando -moz-border-radius, disponibile per Mozilla FireFox e -webkit-border-radius, per Safari e Google Chrome.
Apple iPhone: creare un custom toggle button
Gli stati UIControlStateSelected o UIControlStateHighlighted non funzionano quando un UIButton è impostato in modalità UIButtonTypeCustom! O meglio, non funzionano come dovrebbero (perchè riservati agli altri tipi di bottone), ad esempio per creare un bottone a due stati: toggle appunto. Se abbiamo creato due immagini (stato1.png e stato2.png) per il nostro bottone, possiamo procedere in questo modo:
1 2 3 | // Nell'header file creiamo una variabile globale che usaremo per // controllare il toggle state BOOL toggleFlag; |
Ora creiamo il nostro bottone:
1 2 3 4 5 6 7 8 9 | // Creaiamo un bottone e lo poniamo inizialmente nello stato "stato1.png" // Modificate initWithFrame:(CGRect){100,100,50,50} con la posizione e // dimensioni della vostra immmagine toggleFlag = YES; UIButton *toggleButton = [[UIButton buttonWithType:UIButtonTypeCustom] initWithFrame:(CGRect){100,100,50,50}]; [toggleButton setTitle:@"" forState:UIControlStateNormal]; [toggleButton setBackgroundImage:[UIImage imageNamed:@"stato1.png"] forState:UIControlStateNormal]; [toggleButton addTarget:self action:@selector(onToggle:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:toggleButton]; |
Quando si clicca sul bottone verrà inviato un messaggio gestito da onToggle:
1 2 3 4 5 6 7 | - (void)onToggle:(id)sender { // Recupero puntatore al UIButton UIButton *buttonClicked = (UIButton *)sender; // Eseguo il toogle toggleFlag = !toggleFlag; [buttonClicked setBackgroundImage:[UIImage imageNamed:(toggleFlag) ? @"stato1.png" : @"stato2.png"] forState:UIControlStateNormal]; } |
Photoshop tutorial: curvare un testo a piacimento
Forse non tutti conoscono le potenzialità della gestione del testo in Photoshop, in particolare la sua caratteristica di poter manipolare il testo in modi assai evoluti. Se volessimo ad esempio “piegare” un testo, saremmo tentati di utilizzare la funzione “crea testo alterato” 
, che apre una finestra con queste impostazioni:
jQuery: bordi rotondi sulle immagini per sovrapposizione
A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del “disastro” prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere “effetti” (effetti che esonerano dall’HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc…) con patch sui fogli di stili, particolari trucchi con l’uso di div innestati, librerie Javascript, uso delle canvas, etc…
A titolo puramente didattico vorrei illustrare un’ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:
Demo e sorgenti
Ridimesionamento dinamico intelligente delle immagini
Due ricercatori della Adobe, Dr. Ariel Shamir e Dr. Shai Avidan, hanno sviluppato un’eccezionale algoritmo di ridimensionamento intelligente della immagini. Particolarmente impressionante (vedi video qui sotto) è la capacità di oscurare e modificare completamente un’immagine, grazie ad un “resize” estremamente evoluto e selettivo. In altre parole questa tecnica permette di ridimensionare un’immagine in modo non-lineare. Alcune zone dell’immagine, quindi, vengono mantenute in scala fornendo un’effetto davvero curioso.
FlickrCash: cercare su Flickr in modo migliore
Jesse Skinner ha creato FlickrCash, un’applicazione Ajax per cercare, gestire e vedere le foto su Flickr, usando jQuery come motore. Questo è un’interessante esempio di come un servizio nasce dall’uso di un’altro. Infatti FlickrCash preleva i dati, le foto, proprio da Flickr, nonostante abbia una sua Login e un suo ambiente separato. Come mostrato nel video qui sotto, la navigazione è davvero originale; una moltitudine di immagini tutte contemporaneamente!
Ultimi Commenti
Giovambattista Fazioli: @ale: Come indicato @Kevin vedi sul repo di GitHub: https://github.com/gfazioli/Ch roma-Key
Giovambattista Fazioli: @Kevin: See https://github.com/gfazioli/Ch roma-Key
Kevin: Very nice example – would like to see the .fla too!
Ludovica: Ciao! Ti spiego il mio dubbio. Quando scrivo un post non inserisco immagini nell’articolo (se così...
Marco: ciao @Giovambattista Fazioli, grazie per tutte le delucidazioni di questa ottima guida. Avrei un quesito da...