Dynamic backend forms for entries in Tailor

Need Help
#1

Hey there,

I am looking to create a portfolio webpage and I wonder what’s the best way to approach this.

I know that I can use Tailor to have editors create new projects as entries, which I can then display on the webpage. However, I wonder if I can set it up in a way so that the editor is able to add different kinds of content to each page dynamically.

For example:
The editor decides on title and subtitle and then decides what they want to add, if it is a text, an image or a video. They can adjust the amount of elements added to the page and also decide on the order of the elements on the website.

I attached a small sketch to illustrate what I mean.

tailor-issue-4
tailor-issue-42183×3086 434 KB

Is something similar to this kind of dynamic backend field possible with Tailor?
Or maybe there is an alternative, much simpler solution to hand more freedom to the editor regarding the content on an entries page?

I would really appreciate any suggestions and ideas. ^-^
Thank you very much everyone and have a lovely day!

Robin

#2

Hi Robin, your example can easily be implemented with tailor.
In the end, it is just a repeater with predefined blocks.

#3

Yeah I’m agreeing with @Amin with this one. If you want something that’s already built, I made a theme you can use. You can copy the structure out and just change the things you need:

#4

Thank you all so much. ^^

Since I am a designer and just sometimes a developer, often I don’t know where to start, even if the answer was a quite straight forward solution for someone with actual knowledge.

I am glad, that it is possible and now I know where to search. Thanks a lot! :blush:

2 Likes
#5

Hi again. ^^’
So I managed to set up my Repeater form (I think) and it seems like it is working the way I want.
The only issue I remaining is that I don’t know how to access the content. :')

My current setup looks like this:

[...]
 fields:
        fields: 
        type: repeater
        prompt: New Content Block
        label: Content of the Project Page
        displayMode: accordion
        titleFrom: content_label
        tab: Content
        form:
            label: formstuff
            fields:
                content_label:
                    label: ContentID
                    type: text
                is_Type:
                    type: dropdown
                    options:
                        text: Text
                        image: Image
                        video: Video
                content_text:
                    label: Content Text
                    comment: Adds a block of text into the Layout.
                    type: markdown
                    trigger:
                        action: show
                        field: is_Type
                        condition: value[text]
                content_image:
                    label: Content Image
                    comment: Adds an image into the layout.
                    type: fileupload
                    fileTypes: gif, jpeg, jpg, png, webp, svg
                    maxFiles: 1
                    useCaption: true
                    trigger:
                        action: show
                        field: is_Type
                        condition: value[image]
                content_video:
                    label: Content Video
                    comment: Adds an video into the layout. Please pass a valid video link.
                    type: text
                    trigger:
                        action: show
                        field: is_Type
                        condition: value[video]

Each of the entries in the repeater can either be Text, Image, or Video-URL.

I want to keep the order of the entries in the repeater regardless of the filetype.
(Meaning picture can be followed by text or by another picture and so on.)

Then I can neatly place them in containers and use CSS to layout and style them.

But to do that I need to know how to access the entries in the first place.
I know how to access ‘normal’ field-types in Tailor, but not the content of the repeater.

Hope it won’t be that difficult and I am just lacking the knowledge.

If someone knows the answer I would be more than happy to finally find the solution. :sweat_smile:
Thanks a lot and have a great day!

#6

With I little help of ChatGPT I managed to find and understand the solution myself.
Just dropping it here in case any coding noob struggles with similar basic questions in the future. ^^

{% for block in project.fields %}
            {% if block.is_Type == 'text' %}
                <div><p>{{ block.content_text|raw }}</p></div>
            {% elseif block.is_Type == 'image' %}
                <div><img src="{{ block.content_image.path }}" alt="{{ block.content_label }}"></div>
            {% elseif block.is_Type == 'video' %}
                <div><p>{{ block.content_video }}</p></div>
            {% endif %}
        {% endfor %}
3 Likes