Documentazione

Referenza API e Guida all'installazione

Navigazione

Installazione
- Configurazione CMS
Post Produzione
- Resize
- Padding
- Extract
- Filters
- Watermark
- Autocrop

Installazione

Usare Pixhello è facile. Inserisci L'Alias CDN della tua console all'interno degli URL delle immagini del tuo sito web.

STEP 1: Accedi alla tua console. Nella sezione "Console" all'interno della sidebar trova e copia l'Alias CDN del tuo account.

STEP 2: Incolla l'Alias CDN all'interno dell'attributo src delle tue immagini, sostituendolo all'url del tuo sito.

Ex. Supponendo che l'indirizzo della tua immagine sia <img src="https://mywebsite.com/path/to/img.jpg"> sostituisci l'URL del tuo sito con L'Alias CDN della tua console:

Su richiesta è possibile inserire un cname perosnalizzato al posto dell'alias CDN.

Se utilizzi un CMS, nella maggior parte dei casi troverai all'interno del tuo backend un apposito campo dedicato all' Alias CDN.

Configurazione CMS

Alcuni CMS ti consentono di impostare un URL CDN o modificare l'URL MEDIA.
Sotto vedrai come installare Pixhello nei CMS più comuni:

Magento 1.x

Accedi al pannello di amministrazione
Naviga su Sistema -> Configurazione -> Generale -> Web
Aggiungi l'Alias CDN della tua console Pixhello nel campo Media Base URL

Di default, nei campi Unsecure Base Media URL e Secure Base Media URL troverai:
{{unsecure_base_url}}media/
{{secure_base_url}}media/

basta sostituire l'Alias CDN della tua console Pixhello come nell'esempio qui sotto:

https://dd2geshbcrl5j.cloudfront.net/media/
https://dd2geshbcrl5j.cloudfront.net/media/

Magento 2.x

Accedi al pannello di amministrazione
Naviga su Negozio -> Configurazione -> Generale -> Web
Aggiungi l'Alias CDN della tua console Pixhello nel campo Media Base URL

Di default, nei campi Unsecure Base Media URL e Secure Base Media URL troverai:
{{unsecure_base_url}}media/
{{secure_base_url}}media/

basta sostituire l'Alias CDN della tua console Pixhello come nell'esempio qui sotto:

https://dd2geshbcrl5j.cloudfront.net/media/
https://dd2geshbcrl5j.cloudfront.net/media/

Prestashop 1.6.x +

All'interno del backend di prestashop, navigando su "Parametri Avanzati" -> "Prestazioni" troverete una sezione "Server Media". Incollate l'Alias CDN all'interno dei campi input di questa sezione.

Wordpress 5.x / WooCommerce

Al momento non è disponibile alcuna procedura automatica per l'integrazione di Pixhello, ma il nostro team ci sta lavorando.

Tuttavia, è possibile eseguire l'installazione manuale, aggiungendo semplicemente l'Alias CDN della console laddove si desidera utilizzare il servizio.

Post Produzione

I parametri di post-produzione possono essere applicati sia a livello globale che nell'URL dell'immagine.

Globale

Questo tipo di configurazione agisce globalmente sulle foto, applicando i parametri di post-produzione a tutte le immagini senza distinzione.
Per eseguire questo tipo di configurazione devi accedere alla tua console e modificare le impostazioni.

Nell'URL dell'immagine

È possibile aggiungere parametri di input per modificare le immagini in tempo reale.

Es: Ridimensionamento larghezza a 600px

https://dd2geshbcrl5j.cloudfront.net/image.jpg?size=600

Resize

E' possibile ridimensionare l'immagine impostando 4 parametri: Larghezza, Lunghezza, Fit, Posizione, Sfondo.

Es: https://dd2geshbcrl5j.cloudfront.net/image.jpg?size=1100,1190;contain;center;220,180,180,1;

Il primo parametro costituisce la larghezza in pixel, il secondo l'altezza, il terzo la disposizione del contenuto rispetto al canvas (cover, contain, fill, inside, outside), il quarto la posizione rispetto al canvas e l'ultimo il colore di sfondo della porzione di immagine in eccesso.

Padding

Padding è uno spazio che circonda un'immagine..

Ex: https://dd2geshbcrl5j.cloudfront.net/image.jpg?ext=10,10,10,10;255,0,0,1;

I primi 4 valori costituiscono la grandezza in pixel del bordo superiore, inferiore, destro, sinistro.
I successivi 4 valori costituiscono l' RGBA del codice colore scelto.

Cambiare il colore del bordo

Cambiando il valore dell'RGBA sarà possibile cambiare il colore del padding.

Ex: https://dd2geshbcrl5j.cloudfront.net/image.jpg?ext=10,10,10,10;51,0,255,1;

Cambiare la dimensione su ciascun lato

È possibile specificare diverse dimensioni per ciascun lato dell'immagine.

È possibile applicare un massimo di 4 valori di padding, separati da virgole, per specificare esattamente la dimensione di ciascun lato.

Ex: https://dd2geshbcrl5j.cloudfront.net/image.jpg?ext=0,0,0,50;255,0,0,1;

L'esempio precedente aggiungerà uno spazio rosso di 50 px solo sul lato destro.

Extract

Tramite questi parametri è possibile estrarre una porzione specifica dell'immagine, in base alle cordinate inserite:

Es. http://dd2geshbcrl5j.cloudfront.net/image.jpg?xtr=10,10,200,200;

Nel caso sopra riportato, i primi due parametri fanno riferimento alle coordinate rispetto il margine sinistro e il margine superiore.
Il terzo e il quarto parametro corrispondono alla larghezza e all'altezza dell'immagine estratta.

Filters

Tramite i parametri definiti qui sotto sarà possibile gestire diversi filtri da applicare o meno alle immagini:

colourspace, rotate ,flip, flop, trim, median, blur, gamma, negate, normalize, threshold, greyscale.

Ad eccezione del primo parametro (colourspace), tutti gli altri possono essere attivati o inserendone il corrispettivo valore o attraverso le diciture b0 (disattivo) e b1 (attivo).

Es. https://dykk9dsfe.cloudfront.net/image.jpg?fil=srgb,30,b1,b0,b1,3,b0,1.0,b1,b1,50,b1

Dettagli sui parametri

Watermark

L'applicazione del Watermark richiede 3 paramentri: 1 obbligatorio, 2 sono opzionali.

Il parametro wmk è obbligatorio. Va specificato l'URL dell'immagine da utilizzare come Watermark.

Ex: dykk9fasfnzne.cloudfront.net/image.jpg?wmk=http://www.example.com/images/watermark.png

I 2 parametri opzionali sono top e left (sopra e sinistra) e servono a modificare il posizionamento dle watermark.

Se non specificati, il watermark verrà posizionato al centro dell'immagine.

Ex: dykk9fasfnzne.cloudfront.net/image.jpg?wmk=http://www.example.com/images/watermark.png,50,850

Autocrop

The autocrop is aa parameter that takes a layer of animation and crops the layer into the smallest as possible, removing any empty background.

Ex: https://myconsole.yce.one/index.php?url=https://mywebsite.com/image.jpg&autocrop=1

The autocropsens parameter allows increasing the level of sensitivity of similar colors in order to better recognize the subject to be cut from the background image.

Ex: https://myconsole.yce.one/index.php?url=https://mywebsite.com/image.jpg&autocrop=1&autocropsens=10000

Useful Tips

This parameter is very effective in Still Life photos. Combined with the padding parameter, it is useful for reconstructing the image by decontextualizing the subject and adding the edges that we consider most appropriate.