Rendering di testo normale come HTML nel ramoscello di Drupal 8

Mi sono imbattuto in un muro cercando di eseguire il rendering di un codice di markup immagine svg in HTML da un semplice campo di testo.

Sto cercando di eseguire il rendering del codice svg da un campo di testo semplice senza sovrascrivere il rendering del campo di testo normale ovunque.

il formato di testo semplice attualmente converte tutti i tag html e <> in < >.

Ho creato un modello di campo e ho provato entrambi a presentare il contenuto del campo come

{{ item.content.context.value }}

{{ item.content|raw }}

entrambi visualizzano il valore come stringa che avvolge ogni riga con "virgolette" e converte le interruzioni di riga in <br/>tag.

In precedenza avevo il testo formattato del tipo di campo, ma questo includeva anche tutto nei <pre>tag, anche quando tutti i tag erano consentiti. Mi piacerebbe davvero farlo funzionare con il semplice testo.

Esempio del codice svg che il campo deve contenere in formato testo:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 290 290" enable-background="new 0 0 290 290" xml:space="preserve">
    <g>
        <path fill="none" stroke="#78C681" stroke-width="3" stroke-miterlimit="10" d="M261.1,273.1H28.9c-6.6,0-12-5.4-12-12V28.9
            c0-6.6,5.4-12,12-12h232.1c6.6,0,12,5.4,12,12v232.1C273.1,267.7,267.7,273.1,261.1,273.1z"/>
        <circle fill="none" stroke="#1B435D" stroke-width="2" stroke-miterlimit="10" cx="145.2" cy="166.9" r="62.7"/>
        <line fill="none" stroke="#78C681" stroke-width="3" stroke-miterlimit="10" x1="16.9" y1="60.8" x2="273.1" y2="60.8"/>
        <circle fill="none" stroke="#1B435D" stroke-width="2" stroke-miterlimit="10" cx="178.3" cy="152.3" r="6.8"/>
        <path fill="none" stroke="#1B435D" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M115.1,167.9
            c8.8,0,22.3,3.2,28.4,4.7"/>
        <path fill="none" stroke="#1B435D" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M151.9,216.9
            c0,0,17.2-1.5,29.6-14.8"/>
    </g>
</svg>

Spero che qualcuno possa aiutare.

Migliore,

Alari

8 theming

— Alari Truuts
fonte

Il testo in chiaro ha un filtro che sfugge al markup. |rawnon sfugge al markup già sfuggito. La fuga sta avvenendo prima della fuga automatica di Twig.

— Cottser,

Risposte:

Una soluzione di iworkyon della comunità Drupal:

field - node - [nome campo] .html.twig:

{% if svg %}
  <div class="my-svg">
    {{ svg|raw }}
  </div>
{% endif %}

THEME.info:

/**
* Implements hook_preprocess_field().
*/
function MYTHEME_preprocess_field(&$variables, $hook) {
    switch ($variables['element']['#field_name']) {
      case 'field_svg_test':
        $variables['svg'] = $variables['items'][0]['content']['#context']['value'];
        break;
    }
}

— Alari Truuts
fonte

Hehe, sembra il mio soprannome IRC "Sono al lavoro" nascosto qui: D Divertente scoperta mentre googling!

— ividyon

Spero non ti dispiaccia :) Mi ha aiutato, quindi ho pensato di condividere.

— Alari Truuts,

Hai provato ad applicare il filtro non elaborato sul valore?

{{ item.content.context.value|raw }}

Ma questo non è sicuro. Per produrre file, è possibile utilizzare un campo file. Questo ha i formattatori di campo corretti per generare il collegamento. Se non sei in grado di configurare il link nell'interfaccia utente in base alle tue esigenze, puoi modificare il ramoscello o il preprocesso per questo campo specifico.

— 4K4
fonte

rawè stato / è stato rimosso: drupal.org/node/2603074

— Clive

4k4: il campo è un campo di testo semplice e non un file. Il valore del campo sarà il markup copiato di un'immagine svg. Ho provato la tua soluzione, ma nulla è diverso, ottengo ancora le virgolette e il problema delle interruzioni di riga. Inoltre ora sono preoccupato di usare | raw dopo quello che ha detto Clive e sono ancora più lontano dal raggiungere una soluzione.

— Alari Truuts,

Sei ancora più lontano dal raggiungere una soluzione, perché provi a ingannare l'auto-fuga e Drupal cerca di tutto per scoraggiarti dal farlo. Meglio usare il meccanismo che è lì per fornire collegamenti ai file come descritto nella mia risposta. E quindi utilizzare i modelli di ramoscello appropriati lungo la linea per modificare il rendering.

— 4k4

4k4: Sono un po 'confuso ora, poiché il contenuto che il campo deve contenere non è un file. è sotto forma di text / svg-code. Ho aggiornato la domanda con un esempio.

— Alari Truuts,

Il testo normale non sarà in grado di generare questo codice svg. Hai provato il formato di testo "Full HTML", se questo può elaborare il codice svg? In caso contrario, è meglio inserire svg nel proprio file svg.

— 4k4

Questo ha funzionato per me:

{{ item.content['#context'].value|raw }}

— Janey
fonte