Per creare immagini quadrate per i riassunti , ingrandire le miniature e per qualsiasi altra cosa in cui avessimo bisogno di ridimensionare automaticamente un'immagine, fino ad ora non avevamo altra scelta che usare JavaScript, sfruttando il sistema di archiviazione delle immagini della piattaforma (quello di caricare un'immagine e averne centinaia a disposizione ).
Non so da quanto tempo esista, ma oggi disponiamo di un'utilità nativa che, a mio parere, funziona e serve a fare tutto questo. Il fatto che sia di serie è già di per sé vantaggioso rispetto all'utilizzo di JavaScript aggiuntivo, ma offre anche altre funzionalità utili, come la possibilità di ritagliare l'immagine in una proporzione specifica.
Il nuovo operatore si chiama resizeImage e, oltre a spiegare come utilizzarlo e mostrare alcuni esempi, alla fine vedremo un esempio di come viene utilizzato per generare intestazioni dinamiche... una diversa per ogni voce.
La sua sintassi può avere due forme e il risultato è sempre l'indirizzo di un'immagine:
url_image resizeImage image_width resizeImage [" rapporto "]
ridimensionaImmagine ( url_immagine , larghezza_immagine [," rapporto "])
- image_url : questo è l'indirizzo dell'immagine originale. Puoi utilizzare una variabile dati valida , come data:blog.postImageUrl , data:blog.postImageThumbnailUrl , data:postFirstImage , data:posts[i].authorPhoto.url , o qualsiasi altra variabile che contenga l'indirizzo di un'immagine. Per indicare direttamente l'URL di un'immagine specifica, è necessario racchiuderla tra virgolette.
- image_width : Questo parametro è semplicemente un intero che indicherà la nuova larghezza dell'immagine, cioè la larghezza che verrà visualizzata al posto dell'originale
- Rapporto : mentre gli altri due sono obbligatori, questo è facoltativo. Rappresenta il rapporto di aspetto di larghezza e altezza della nuova immagine, 4:3, 16:9 o qualsiasi altro formato. Questo ritaglierà l'immagine nella proporzione specificata. Ad esempio, 1:1 creerà un quadrato. Sono accettati solo valori interi, che devono essere racchiusi tra virgolette.
Poiché la sua missione è quella di modificare le immagini, dovrà essere collegato a un tag img e la formulazione finale, in base al tipo di sintassi che sceglieremo, sarà come in questi due esempi:
<img expr:src='data:postFirstImage resizeImage 600 resizeImage "4:3"' />
<img expr:src='resizeImage(data:postFirstImage,600,"4:3") />
Proviamo?
(Questa è una simulazione. In realtà, l'operatore funziona solo nel template).
Supponiamo che questa immagine sia 642x428 px, il cui indirizzo nei seguenti codici di esempio lo abbrevierò come https://imagen.jpg .
Le immagini che verrebbero visualizzate nel blog secondo le seguenti combinazioni con l' operatore resizeImage sarebbero:
(ho inserito le due formule consentite, ma ovviamente è necessario usarne solo una)
<img expr:src='resizeImage("https://immagine.jpg", 400)'/>
<img expr:src='"https://imagen.jpg" ridimensiona l'immagine 400'/>
Immagine 400x267 (s400)
con le stesse proporzioni dell'originale
<img expr:src='resizeImage("https://image.jpg", 400,"2:1")'/>
<img expr:src='"https://imagen.jpg" ridimensiona l'immagine 400 ridimensiona l'immagine "2:1"'/>
Immagine 400x200 (w400-h200-p)
ritagliata in proporzioni 2:1
<img expr:src='resizeImage("https://image.jpg", 300,"1:1")'/>
<img expr:src='"https://imagen.jpg" ridimensiona l'immagine 300 ridimensiona l'immagine "1:1"'/>
Immagine quadrata 300x300 px (w300-h300-p)
(anche s300-c)
Vale la pena notare che questo funziona solo con immagini "ridimensionabili nativamente", che sono praticamente tutte quelle che carichiamo su Blogger e che finiscono in Picasa o Google Foto. Questa non è una funzione che ingrandisce o riduce visivamente queste immagini come farebbe una semplice impostazione di larghezza CSS ; piuttosto, questo sistema carica l'immagine originale delle dimensioni specificate. Per chi non lo sapesse, ripeto il link all'inizio: Carica un'immagine e ne avrai centinaia a disposizione .
Se l'immagine non è ridimensionabile, Blogger visualizzerà l'immagine originale, non elaborata, ovvero con le sue dimensioni originali.
Lo scopo principale di resizeImage è migliorare e facilitare alcuni effetti immagine per il template.
Ad esempio, supponiamo di voler personalizzare l'intestazione di ogni post includendo la prima immagine invece dell'intestazione fissa. Per fare ciò, possiamo utilizzare resizeImage con la variabile data:post.firstImageUrl , aggiungendola al gadget Intestazione con una condizione .
<!--Mostra solo l'immagine-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<b:if cond='data:blog.pageType == "item"'>
<img expr:src='data:blog.postImageUrl'/>
<b:altrimenti/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</b:se>
</a>
</div>
Presumo che l'intestazione sarà considerevolmente più grande della larghezza del post e, in tal caso, se, ad esempio, l'immagine del post è di 640px, spostarla in un'intestazione di 1200px la pixellerebbe chiaramente. L'alternativa sarebbe caricarle tutte sul post a 1200px e impostare la dimensione originale , ma ciò aumenterebbe inutilmente il peso della pagina.
Possiamo anche usare questa utility per recuperare l'immagine s1200 da quella che usiamo per il post, indipendentemente dalle sue dimensioni e dal fatto che sia pixellata nell'intestazione. Continuando con il codice precedente e usando resizeImage , dovrebbe apparire così:
<!--Mostra solo l'immagine-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<b:if cond='data:blog.pageType == "item"'>
<img expr:src='resizeImage(data:blog.postImageUrl, 1200,"4:1")'/>
<b:altrimenti/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</b:se>
</a>
</div>
In questo modo, il gadget dell'intestazione caricherà un'immagine sulle pagine dei post identica alla prima, ma con una larghezza di 1200px e un aspect ratio di 4:1, ovvero 1200x300px.
Questo strumento è davvero fantastico, amico. Ci si possono fare un sacco di cose.
Commenti
Posta un commento