- Home
- Categorie
- Coding e Sistemistica
- WordPress
- Inserire ed allineare immagine in blocco paragrafo
-
Inserire ed allineare immagine in blocco paragrafo
Ciao a tutti.
Come da titolo, vi chiedo se sapete dirmi come fare per allineare un'immagine in un blocco paragrafo (Gutenberg).
Utilizzando la funzione "Inserisci immagine inline l'immagine non viene allineata in modo visibilmente carino...
Grazie
1 Risposta
-
@enrimaio Ciao, premesso che non mi piace la modalità "visuale" ma faccio sempre "testo", per avere sotto controllo il codice, diciamo che puoi anche fare una via di mezzo fra le due cose. Ovvero aggiungi l'elemento che desideri, tramite la modalità più user-friendly se preferisci, dopo puoi andare in "testo" e aggiungerci le personalizzazioni che vuoi tramite HTML+CSS. Non ho ben capito come la vuoi allienare, cosa significhi "in modo carino", ma puoi aggiungere un'istruzione CSS inline all'interno del tag img o nel blocco div che lo contiene (es. <img style="text-align:center" src="..." >oppure ancora richiamare una classe con quell'istruzione specifica scritta nel foglio di stile. Quindi in definitiva aggiungi l'elemento di default come preferisci, poi l'istruzione di allineamento la "aggiusti" tramite CSS.
1 Risposta
-
@giulio-marchesi ha detto in Inserire ed allineare immagine in blocco paragrafo:
la modalità "visuale" ma faccio sempre "testo", per avere sotto controllo il codice
Questo se si usa il vecchio editor, nel nuovo editor è diverso.
Ciao @EnriMaio e benvenuto su Connect.gt
se puoi definire meglio cosa intendi per "visibilmente carino" vediamo come poter risolvere e valutiamo se spostare nella sezione CSS.
L'immagine inline nel paragrafo blocco aggiunge questa sintassi HTML:
<p> Testo <img class="wp-post-*" ... /> testo </p>
1 Risposta
-
Grazie.
Qui sotto una screenshot di come viene visualizzato il blocco paragrafo con l'aggiunta di un'immagine in linea, inserita tramite l'apposita funzione presente nei possibili settaggi del blocco stesso.
A me piacerebbe poter avere l'immagine a destra sì, ma come se fosse in un altro blocco (tipo un blocco colonne a due colonne, con testo a sinistra e immagine a destra.
Prima dell'ultimo aggiornamento di WordPress si poteva fare in questo modo, ma ora l'icona + al centro del blocco non c'è più.
Ecco, questo è quanto.
-
@enrimaio Nel tutorial che hai linkato utilizza un blocco immagine non una immagine inline, sul blocco attivo nella barra se non vedi il
puoi cliccare sul kebab menù (i tre puntini in colonna), aggiungi prima e ti aggiunge un blocco paragrafo, usa lo /e scrivi il blocco che vuoi aggiungere, l'immagine va posizionata prima del paragrafo, se il css nel tema è corretto dovresti riuscire.
-
@overclokk ha detto in Inserire ed allineare immagine in blocco paragrafo:
@enrimaio Nel tutorial che hai linkato utilizza un blocco immagine non una immagine inline, sul blocco attivo nella barra se non vedi il
puoi cliccare sul kebab menù (i tre puntini in colonna), aggiungi prima e ti aggiunge un blocco paragrafo, usa lo /e scrivi il blocco che vuoi aggiungere, l'immagine va posizionata prima del paragrafo, se il css nel tema è corretto dovresti riuscire.Grazie. Hai ragione, utilizza un blocco immagine da inserire nel blocco testo, chiedo scusa.
Ho provato a fare come dici tu, ma mi crea due blocchi separati, non funziona...
-
@enrimaio Infatti devi creare due blocchi separati.
-
@overclokk
Certo, ora sembra proprio così, ma prima dell'ultimo aggiornamento WP si poteva inserire l'immagine come se si trattasse di inserire un blocco in un altro.
Comunque non è certo un gran problema, farò sempre 2 blocchi
Buone feste a tutti!
-
@enrimaio Che io sappia non c'è mai stata questa funzionalità nel blocco paragrafo, se mi dici a quale versione ti riferisci controllo.
-
@overclokk ha detto in Inserire ed allineare immagine in blocco paragrafo:
@enrimaio Che io sappia non c'è mai stata questa funzionalità nel blocco paragrafo, se mi dici a quale versione ti riferisci controllo.
Ti assicuro che si poteva fare perché l'ho fatto.
Non so dirti quale versione, ma credo basti andare indietro di 2-3 versioni.
Devi seguire passo passo quanto spiegato nella prima procedura del link che ho postato sopra.
L'unica lieve difficoltà (per me ovviamente) era nel posizionare il cursore sull'icona + al centro del blocco paragrafo, perchè il cursore tendeva a "sfuggire" dal bersaglio.Ora però, grazie al tuo suggerimento di vedere su una vecchia versione di WP, ho scoperto il codice.
Nel mio vecchio sito che toglierò a breve dal server ho trovato una pagina di esempio maioni{dot}com/libri-pubblicazioni/rifugio-cinque-torri/, e guardando il codice ecco come appare:<!-- wp:paragraph --> <p>In esso l'autore, appassionato di storia dell’alpinismo ampezzano, ha narrato una storia iniziata nel 1842 con la nascita di Giuseppe Ghedina Tomàsc, guida alpina che il 17 settembre 1880 portò il cliente britannico C.G. Wall sulla Torre Grande, la più alta del gruppo, dando così avvio alla conoscenza delle torri.</p> <!-- /wp:paragraph --> <!-- wp:image {"align":"right","id":39074} --> <div class="wp-block-image"><figure class="alignright"><img src="https://www.maioni.com/wp-content/uploads/rifugio-cinque-torri-copertina-small.jpg" alt="rifugio cinque torri" class="wp-image-39074"/></figure></div> <!-- /wp:image --> <!-- wp:paragraph --> <p>Nel 1904 i fratelli Mansueto e Giuseppe Manaigo e Agostino Colli, intuendo che la zona - già nota agli scalatori - costituiva un richiamo ma era priva di un ricovero per l'ospitalità, costruirono l’Albergo 5 Torri, dapprima in legno a un piano e poi in muratura a tre piani con una ventina di cuccette.<br>Nel 1963 l'edificio fu ampliato con la sala da pranzo e oggi – costantemente migliorato e gestito dalla quarta generazione – conserva pressoché inalterata la struttura originaria.</p> <!-- /wp:paragraph -->In effetti sono due blocchi, ma non c'è traccia di colonne...
Ciao.
-
@enrimaio Ho provato fino alla 5.3 ma non ho visto nulla nel blocco paragrafo.
Nello snippet infatti si vede appunto i due blocchi e il blocco immagine ha un posizionamento in questo modo non ti servono due colonne.
Eventualmente c'è anche il blocco "media e testo" che potresti usare.
-
OK, grazie per il tuo tempo. Ciao