Jump to content
elabx

Rendering field value using markup attributes

Recommended Posts

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 🙂

Share this post


Link to post
Share on other sites

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>
  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

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. 

  • Like 1

Share this post


Link to post
Share on other sites

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 😉

Share this post


Link to post
Share on other sites
$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.

  • Like 1

Share this post


Link to post
Share on other sites

 

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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...