Questo componente del tema inserisce pulsanti sulla barra degli strumenti della composizione per allineare le immagini caricate a sinistra o a destra del testo, al centro del post, o per allineare più immagini in una griglia, utilizzando i tag di griglia recentemente implementati. La griglia ridimensionerà automaticamente le immagini per adattarle a seconda di quante e delle loro dimensioni, e si collegherà anche alle versioni caricate più grandi. I pulsanti / funzioni di allineamento possono essere utilizzati più volte in un post per creare una varietà di layout. Funziona sia per le visualizzazioni desktop che mobili.
Per usarlo, è sufficiente fare clic sul pulsante di allineamento dell’immagine desiderato, quindi caricare le immagini nello spazio designato tra i tag risultanti (contrassegnato da testo segnaposto che può essere modificato nelle impostazioni del componente).
Si noti che la parte della griglia di questo componente serve per allineare le immagini caricate, non i collegamenti alle immagini (le altre opzioni di allineamento funzioneranno per le immagini di collegamento). Ho preso in prestito parte della struttura di base del codice dal componente MD Composer Extras di @Steven.
Da fare: aggiungere selettori di icone appropriati per ogni pulsante.
Screenshot
pulsante griglia barra strumenti composizione (con esempio di codice griglia)
intendi il composer / editor con la barra degli strumenti? quello sarebbe il primo screenshot con l’esempio della griglia. aggiungerò alcuni screenshot dell’editor con gli altri codici di allineamento attorno alle immagini.
Prego. Come fai a far apparire il testo in grassetto, ad esempio, con “Allinea a sinistra” nelle tue schermate? Ho provato markdown e mostra il codice markdown.
Vedo che funziona con ### ma il grassetto standard con
Da questo codice. Come posso far sì che le informazioni rimangano accanto a ogni immagine? Le informazioni di Shawn dovrebbero essere accanto alla seconda immagine.
inserisci solo alcuni tag HTML <br><br> tra il primo blocco di testo e il tag <div>-data-theme... finché non si spaziano correttamente. Cercherò di programmare un ritorno a capo o qualcosa di simile quando avrò tempo.
Penso che questo non sia un metodo affidabile poiché l’altezza del contenuto differirà dalle dimensioni di una finestra all’altra.
Cancellare i float quando ci sono contenuti arbitrari accanto ad essi è complicato. Non sono sicuro che ci sia una soluzione ovvia qui…[1]
È stato anche un problema con l’editor di Wordpress per secoli.
Le persone tendono a fare affidamento su metodi hacky utilizzando elementi il cui unico scopo è avere un clear: both; per resettare i float precedenti.
Sì, non mi piace nemmeno quel metodo. Stavo pensando di provare una soluzione con la proprietà white-space. alla fine, funziona meglio se le immagini allineate sono post separati. Sfortunatamente, anche le immagini nelle tabelle non funzionano benissimo.
Nonostante abbia provato quelle soluzioni per la proprietà flex align, non sono riuscito a trovare qualcosa di utilizzabile in modo coerente. Ho trovato una soluzione alternativa utilizzabile, tuttavia. Se rendi ogni sezione immagine-testo una citazione in blocco, le separa (ma include la formattazione della citazione per il testo):
alla fine, funziona meglio se le immagini allineate sono post separati. Sfortunatamente, anche le immagini nelle tabelle non funzionano benissimo.
.
