0

I created "figure" Paragraphs type, which contains an image field and a caption field. How (from start to finish) do I specify in HTML/twig how to render this new Paragraphs type?

As an example, how would I specify that the output would generate following code?

<figure>
  <img src="image">
  <figcaption>caption</figcaption>
</figure>
  • 1
    I don't understand the question - did you make a twig file for this paragraph type with the markup you want to have? What part of that is not working? – Kevin May 31 at 16:12
  • 2
    @Kevin no, the process you described is what I'm looking for. I believe I've found an article describing the process. and will submit the answer once I figure it out, assuming someone doesn't answer the question by then. – glenviewjeff May 31 at 16:53
  • 2
    Does this answer your question? How to print paragraphs in twig template – leymannx May 31 at 20:01
  • 1
    @leymannx no, that question is about looping through an array. This is a basic question about how to create a custom twig template from start to finish. – glenviewjeff May 31 at 20:56
  • 2
    You should definitely read the docs first then. It makes not much sense repeating them here. This then also makes your question too broad, don't you think so? – leymannx May 31 at 23:18
1

In Drupal, the specifying the generation of HTML from Paragraph types (as well as other types in Drupal) is done via the misnomer "theming."

  • First create a sub-theme.
  • Next, copy the /modules/contrib/paragraphs/templates/paragraph.html.twig file into your sub-theme's templates folder and name it paragraph--figure--default.html.twig.
  • Add the following code below the set classes closing brace %} which specifies the parameters for the image you'd like to display.

    {%
      set imagestyle = {
        '#theme':      'image_style',
        '#style_name': 'large',
        '#uri':        content.field_image['#items'].entity.uri.value,
        '#alt':        content.field_image['#items'].entity.alt,
        '#attributes': { class: 'myimage' },
      } 
    %}
    
  • Last, replace {{content}} with the code below:

    <figure>
        {{ imagestyle }}
        <figcaption>{{ content.field_caption }}</figcaption>
    </figure>
    

Note: Using {{ content.field_image }} directly inside <figure> instead of specifying a structure with theme image_style will not work.

| improve this answer | |
  • You would usually define your image style settings and other display settings on the paragraph's Manage Display screen. If you did that then you could just output {{ content.field_image }} in your twig template. I wouldn't recommend doing this in the way you have here unless you're just totally forgoing the manage display screens on your entities. No Drupal developer would ever expect this to be implemented like this. – sonfd Jul 8 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.