[Yii2] utilizzo della classe yii2-images

ciao a tutti, volevo provare ad utilizzare la classe yii2-images ma non riesco a capire come "integrarla"

Io ho una tabella nel db chiamata “media” che contiene le specifiche delle immagini, come ad esempio la path di dove è salvato il file, il nome, l’estensione, il nome originale uploadato dall’utente, etc…

Poi ho una directory dentro web/uploads che contiene tutti le immagini.

Quello che vorrei fare è ad esempio utilizzare questa classe yii-images per creare delle thumbnail del file originale.

Ad esempio nella guida il comando:


$model = Model::findOne(12); //Model must have id

a quale model si riferisce? Al mio legato alla tabella "media" oppure devo creare un model apposta che gestisce tutte le funzioni di yii2-images?

Grazie x gli aiuti.

Non la conosco ma ho dato un occhio al repository.

Si tratta di behavior quindi "estende" un modello aggiungendo i metodi per allegare immagini, il $model che dici è quindi un modello nel quale vuoi utilizzare immagini (es. ad User vuoi aggiungere la possibilità di caricare un Avatar, il model è User)

Qui trovi tutte le informazioni comunque, se la provi facci sapere!

Grazie come sempre Nicola. Ho capito "la strada" da percorrere.

Ho un’altra domanda. Supponiamo che l’immagine di profilo del mio user la voglio visualizzare in un riquadro 150x150

Al momento dell’upload, l’utente può caricare immagini tutt’altro che quadrate. A volte possono essere 500x800 o al contrario 800x500.

Quando vado a visualizzare queste immagini, attualmente con il comando


echo Html::img($media->file,['width'=>'150']);

mi accade che l’immagine mantiene la proporzione originale, ma l’output non è un quadrato.

Se invece forzo width e heigh a 150, ovviamente mi adatta l’immagine perdendo però la giusta proporzione.

Come posso fare? Ho visto che in giro sul web, dopo che hai caricato la tua immagine c’è una funzione che ti permette di “ritagliare e centrare” la foto caricata, ma non ho trovato alcuna estensione x yii2.

Tu cosa mi consigli?

Grazie

Eh, ci sono due vie da percorrere.

Crop&Scale automatico, cioè lo fai da PHP al momento dell’upload dell’immagine e salvi la thumbnail in una directory apposita, in questo modo non fai la trasformazione dell’immagine ogni volta che viene vista ma ti salvi la thumbnail e fai vedere quella.

Il secondo modo è fare il Crop&Scale via Javascript con vari script esistenti, in questo modo dai il controllo totale su quello che verrà fuori come Thumbnail e, come prima, ti salvi sia thumb che immagine originale o quello che vuoi, ci sono cose tipo questo script.

Ti estensioni valide già pronte non mi pare ci sia nulla quindi dovrai fartela da te immagino… :(

Perfetto è proprio quello che mi serve, grazie!

Per poter installare una libreria php esterna dentro Yii2 qual’è la strada migliore?

Ho solo trovato una guida per creare un’estensione yii2 ufficiale, ma mi sembra esagerato x la mia esigenza.

Penso che a me basterebbe una sorta di "widget" da richiamare nella mia view che gestisce il Crop&Scale.

Ma ad oggi non ho mai installato librerie esterne in yii2, tantomeno fatte in JavaScript.

Grazie in anticipo x ogni "lume".

La cosa migliore è installarla via composer.

Se la libreria è php:

Dovresti verificare che sia presente tra i pacchetti, inserire il nome del pacchetto tra i "require" in composer.json


"require": {

    ...

    "kartik-v/yii2-widgets": "*",

  },

Se la libreria è JS:

Verifichi che la libreria sia gestita anche con Bower, se c’è, sempre nella sezione require di composer.json, inserisci il nome del pacchetto preceduto da “bower-asset/”, una cosa così:




"require": {

        ...

        "bower-asset/foundation": "5.4.*"

    },



Stesso sistema per i pacchetti NPM, ma in questo caso userai "npm-asset/".

Una volta modificato il composer.js entri nella root della tua app e dai un "composer update" per fargli scaricare tutti i files che ti occorrono, da questo momento le tue lib sono dentro "vendor/pacchetto".

Fatto questo ti fai il tuo widget dichiarando anche un asset (classe AssetBundle) che tiri su tutti i js e i css della libreria, quindi una classe tipo:




namespace widget/namespace;


use yii\web\AssetBundle;


/**

 * Asset bundle for my Widget.

 */

class MyWidgetAsset extends AssetBundle {


  public $sourcePath = '@vendor';

  public $js = [

      'path/to/vendor.js',

  ];

  public $css = [

      'path/to/vendor.css',

  ];


}

Nel tuo Widget poi andrai a richiamare l’asset per fargli caricare le librerie che ti servono, ad esempio nella init() puoi mettere una cosa tipo




class MyWidget extends \qualcosa


  public function init()

    $view = $this->getView();

    MyWidgetAsset::register($view);

    ...

  }


  ...

}



Ovviamente l’implementazione varia in base al tipo di widget.

Se non puoi usare composer le vie suggerite sono queste, io ti consiglio comunque di creare un assetBundle per il tuo widget è il metodo consigliato e più efficente.

Aggiungo una cosa, cerca di usare composer, con bower troverai di sicuro una lib che fa al caso tuo, in questo modo puoi tenere sotto controllo la versione (es. "bower-asset/foundation": "5.4.*" mi aggiorna foundation solo per la versione 5.4 evitando incompatibilità con future major release ma aggiornando eventuali bug fix…) della libreria e puoi tenere ordinati i tuoi files.

Perfetto, non so come ringraziarti.

Ho trovato il componente che mi serve “jrac” tramite bower e l’ho correttamente installato mediante composer

Ora seguendo le tue indicazioni e le guide ufficiali vado a creare il widget e l’asset-boundle.

Ho “solo un po’” di confusione:

  • ASSET-Boundle: mi serve per caricare il file js e il css e questo mi è chiaro

  • WIDGET: dovrò sviluppare il componente che mediante il js crea dei campi (presumo hidden field) che andranno inseriti nella view che richiama il widget all’interno della form

  • VIEW: creerà il form da passare al controller e all’interno richiamerà il widget per ottenere le specifiche della thumbnail che sto andando a creare

  • CONTROLLER: riceverà le specifiche della thumbnail (x1,y1,x2,y2,etc…) effettuerà il crop/resize e memorizzerà l’immagine finale

Spero che la strada sia giusta, al lavoro! Grazie di nuovo. :blink:

ciao Nicola (e tutti voi che ci seguite numerosi eh eh),

addentrandomi nei meandri di javascript, ho scoperto che Yii2, per motivi di performance credo, mette l’importazione di jquery in fondo alla pagina.

Contrariamente a quanto accade comunemente dove viene messa nell’head della pagina.

Questo fa si che anche un banalissimo javascrip creato a metà della pagina del tipo




$(document).ready(function() {

                         alert('DOM loaded'); 

                        });



di default su Yii2 non funziona perchè, appunto, la dichiarazione di jquery viene dopo lo script.

Se parliamo di un file .js ho visto che usando la proprietà “depends” dentro l’AssetBundle riesco a farlo dichiarare dopo jquery.

Ma mi rimane il problema dello script "manuale" fatto durante la creazione della pagina.

Infatti nel mio caso la libreria “jrac.js” riesco a caricarla dopo jquery, ma il comando “$(‘img’).jrac();” che dovrei generare dentro la pagina non me lo prende perchè appunto è dentro la “$(document).ready(function()”.

Non so se mi son spiegato. Ti è mai successo x caso?

grazie in anticipo

Si capita spesso ma dovresti prima di tutto, cercare di mettere il tuo JS all’interno del Bundle, se devi crearlo al volo dal widget o dalla vista, devi usare registerJS, un metodo della classe View, come vedrai puoi indicare dove posizionare lo script:


* - [[POS_HEAD]]: in the head section

     * - [[POS_BEGIN]]: at the beginning of the body section

     * - [[POS_END]]: at the end of the body section

     * - [[POS_LOAD]]: enclosed within jQuery(window).load().

     *   Note that by using this position, the method will automatically register the jQuery js file.

     * - [[POS_READY]]: enclosed within jQuery(document).ready(). This is the default value.

     *   Note that by using this position, the method will automatically register the jQuery js file.

Incredibile! Ce l’ho fatta!

Ora devo solo dare un’ordinata al tutto.

In particolare voglio creare un file javascript e creargli il suo asset boundle, ma non so dove mettere il file.

Perchè ho visto che Yii crea delle directory temporanee dentro Assets dove ci mette tutti gli assets che ha configurato e non so come farci finire anche il mio.

Se ad esempio creo il mio file test.js dentro Assets,




class TestAsset extends AssetBundle {

    

  public $sourcePath = '@app';

  public $js = [

      'assets/test.js',

  ];

ho visto che Yii lo va a cercare dentro


<script src="/StanzSport3/web/assets/93711d10/assets/test.js"></script>

ma lì il mio file non c’è…

Non devi metterlo tu dentro /web/assets, lì dentro ci vanno i file generati da yii per le varie risorse statiche, in pratica registrando assetBundle vai a creare quegli assets.

Nel tuo bundle dai il path al file js del tuo progetto, es. se lo metti dentro /web/js dovrai fare un AssetBundle di questo tipo:




class MyAsset extends AssetBundle {


  public $basePath = '@webroot';

  public $baseUrl = '@web';

  

  public $js = [

      'js/custom.js',

  ];

  public $depends = [

      'yii\web\YiiAsset'

  ];


}

ricordati che l’AssetBundle devi registrarlo per fargli caricare i file.

Perfetto, ora nella view semplicemente faccio queste chiamate




            JqueryUi::widget();    //Yii di default non include il link jquery-ui

            JracLib::widget();   //Carica la libreria che ho scaricato   

            JracProfile::widget(); //Carica un file js personalizzato che setta e lancia la libreria




Grazie 1.000 di nuovo x tutte le dritte ;)