Create own modular template with custom fields

Support
1

Hello, I read the documentation, looked at the examples, but I still can’t make my own page template.
What I want to do:
create own fields for the modular page. I looked for an example in the video and did not find it.

I’m looking at the structure of the template Quark, and I don’t understand how to use it as an example to make tabs for a module page with their own fields.

2

@NataliaB, You might want to download the “One-Page Site” skeleton. It contains a sample modular page with modules. Then take a look at /themes/blueprints/modular/features.yaml. This form creates its own ‘Feature’ tab in Admin with its own fields.

5

How correctly duplicate features.yaml with custom fields.

  1. I create a services.yaml with fields text like in features.yaml
    How display Services tab in admin panel on page setting ?
6

@NataliaB,

Do you have:

  • a “services” template in /users/themes/quark/templates/modular/services.html.twig
  • and a module using the template like /pages/01.home/05._services/services.md
1 Like
7

Oh, I miss services.html.twig
Now I can echo images from my field

This my services.yaml

title: Services
'@extends': default

form:
  fields:
    tabs:
      type: tabs
      active: 1

      fields:
        content:
          type: tab

          #
          # Add your custom fields here.
          # These fields will be available in the page's Content tab
          # inside the Admin Panel.
          #
          fields:

            #
            # Custom text field
            #
            header.custom.textField:
              type: text
              label: Custom text field

            #
            # Cover image
            #
            header.custom.coverImage:
              type: file
              label: Cover image
              destination: 'self@'
              multiple: false
              accept:
                - image/*

and my services.twig.html

<div class="container">

  <!-- custom text field content from default.yaml blueprints file -->
  <h1 class="customTitle">
    {{page.header.custom.textField}}
  </h1>
  <!-- custom image select field content from default.yaml blueprints file useful for including a specific image somewhere. since it relative, we can just use the twig tag here in an img html tag -->
  <img src= " {{page.header.custom.coverImage}} " />

    <!-- main content / markdown area! -->
    <div class="mainContent">
      {{page.content}}
    </div>

</div>

On web site:

Some custom text from my fields Text

content from page here

(but why show on page with

?)

8

@NataliaB, A few remarks:

  • You are using a File field and according the docs:

    The file field is intended to be used by configuration , theme , and plugins blueprints, NOT page blueprints . For pages, you should use the existing pagemedia field and then utilize the filepicker field to select the files.

  • When using a File field, {{page.header.custom.coverImage}} is indeed an array. Have a look at your *.md
  • {{ page.content }} should be {{ page.content | raw }}
  • <img src= " {{page.header.custom.coverImage}} " />
    should be:
    <img src= "{{ page.url }}/{{ page.header.custom.coverImage }}" />
    or maybe:
    {{ (page.media.images|first).html | raw }}

but why show on page with

I’m afraid I do not understand you last remark.
Maybe just a matter proper formatting using triple backticks (```) and &lt; instead of <.

2 Likes
9

2 posts were split to a new topic: How to translate a modular page

10

@NataliaB, Please ask separate questions in a new post with a proper title:

  • A post can only have a single ‘solution’ which is the solution to the issue mentioned in the title.
  • Questions and solutions buried inside a single post are hard to find. Most people only read the title to find a related question.

I’ve already split your second question into a new post.

2 Likes
11

@NataliaB, Has this topic been solved?

12

Yes. All the solutions in the topic helped me. Thank you

13

@NataliaB, Then please pick one and mark it as solution…

The forum is a two-way street where everyone has its share. It is not only for the benefit of people asking questions. The idea is that the asker also gives feedback on proposes solution (does it work or not) and mark a post as solved if a solution has been provided. By doing so, the knowledgebase in enriched by both answerers and askers.

2 Likes