[Beginner] Creating a 3-column page

5

@monin, Since this is an internship assignment, I’m not going to do your “homework”. But I will give you some pointers…

blueprint

  • You should extend the blueprint from an existing blueprint. See example A First Example
  • You blueprint definitions should be placed “inside” a tab field. See same example as above.
  • By using a new tab name, an new tab will be created for your Teaser fields.

Twig

  • The template should extend the base template which defines the <head>, content, footer etc.
    See for example /user/themes/quark/templates/default.html.twig
  • To access a value in the header of the page, use something like page.header.title
  • To print the title, use {{ page.header.title }}
  • Since the number of columns varies from 1-3, you will have to calculate the width of the columns and use that for each col-*:
    {% set columnWidth = 12/(page.header.teaser_list|count) %}

{% for column in page.header.teaser_list %}
   <div class="column col-{{ columnWidth }}">
   ... 
 {% endfor %}
  • To create an image, you can use {{ page.media.images[column.img_link].html() | raw }}
  • To create a link <a href={{ column.readmore_link }}>{{ column.readmore_text }}</a>

I’ll leave the rest up to you to figure out…

This should be the end result if done correctly:
Untitled

2 Likes