Rendering field value using markup attributes

[elabx]

Hi everyone! Does anyone know if there is a way to render field values in this way:

<div data-field="home_text"></div>

And then if field exists it just fills in? I'm thinking of the case of using a tool for designing markup like Webflow. A little bit like how Perch CMS handles their content tags:

<perch:content id="heading" type="text" label="Heading" />

I feel a lot of this is also in the markup regions area ?

[Robin S]

This would only be useful for simple, single-value fields like text fields, right? Because how would it work with an Images field or a Repeater field for example?

Anyway, here is a proof-of-concept FileCompiler module: https://github.com/Toutouwai/FileCompilerDataAttributes

File Compiler Data Attributes

A proof of concept module for populating markup elements according to data attributes containing a field name. Created in response to this forum topic. This approach is really only useful for simple, single-value fields such as text fields as far as I can see.

Installation

Install the File Compiler Data Attributes module.

Setup

• If you follow the practice of starting your template files with the ProcessWire namespace declaration then for every template you want to use this module with you must change the "Use Compiled File?" option in the template settings from the default option. You must choose either of the "Yes" options depending on what suits you best. I find the need to do this annoying and there is an open issue about it.

• There is an option in the module config to strip the data-field attribute from the markup when the template file is compiled.

Usage

In your template files, insert HTML elements (probably empty elements although this is not compulsory) with a data-fieldattribute set according the field name you want to populate the element from.

Example:

<h1 data-field="title"></h1>
<div data-field="body"></div>

[elabx]

WOW did you seriously just build this?! Thanks  a lot!! Very educational code. 

4 minutes ago, Robin S said:

Because how would it work with an Images field or a Repeater field for example?

I'll just rip this from the Perch documentation:

<perch:repeater id="images" label="Images" max="5">
    <perch:before><ul></perch:before>
    <li>
        <img src="<perch:content type="image" id="image" label="Image">"
          alt="<perch:content type="text" id="alt" label="Description">">
    </li>
    <perch:after></ul></perch:after>
</perch:repeater>

I THINK I could also see how something like this could be implemented too. Anyway, thanks a BUNCH, I might work on your proof of concept a bit further down the road. 

[teppo]

For Repeater use (or any complex data type) you'd have to mark an element as a parent and include the child structure within it. And since your items may not all be the same, you'll need if-else. And probably some way to check existence and length of an item as well.

... and just like that you've just invented a brand new templating language ?

[LostKobrakai]

$page->images->slice(0, 5)->implode(function($image) {
  return "<li><img src='$image->url' alt='$image->description'></li>";
}, array('prepend' => '<ul>', 'append' => '</ul>'));

This would be the processwire api equivalent.

From looking at the perch example I'm wondering if they use it for creating templates based on the markup. Otherwise I'm not sure why a lable would be given here.

[elabx]

 

5 hours ago, LostKobrakai said:

From looking at the perch example I'm wondering if they use it for creating templates based on the markup. Otherwise I'm not sure why a lable would be given here.

The fields are created from the template tags! It's been a long time so I don't remember the complete process for a complex field (e.g. repeater type), but I do remember that setting up a text field is done this way. You write the tag in your code and it shows up in the backend. 

7 hours ago, teppo said:

For Repeater use (or any complex data type) you'd have to mark an element as a parent and include the child structure within it. And since your items may not all be the same, you'll need if-else. And probably some way to check existence and length of an item as well.

... and just like that you've just invented a brand new templating language ?

Not really my goal here! haha. But just today I was thinking how I could leverage on tools like Webflow (which I like a lot) but allow for better maintainability if you update your design. Anyway, just ideas ? Maybe this belongs to Dev Talk now that I think about it?

[elabx]

On 6/25/2019 at 3:33 AM, LostKobrakai said:

From looking at the perch example I'm wondering if they use it for creating templates based on the markup. Otherwise I'm not sure why a lable would be given here.

Yes, it adds the fields according to the markup!