Jump to content
MaryMatlow

Markup field in page editor

Recommended Posts

At page editor level I need to place a piece of code which is unique to that page. This is the code:

<healcode-widget data-type="class_lists" data-widget-partner="mb" data-widget-id="xxxxxxxx" data-widget-version="0.1"></healcode-widget>

This code pulls in data from a third-party site. The Body Field won't accept this code. I could place this in the template file but for that I'd have to crate a separate template file for each page. I'd rather use a common "basic_page" template file for most pages. Also, I would like to give the client the ability to change/edit code when necessary if it is at page editor level. Is there any way to achieve this? Thanks.

Share this post


Link to post
Share on other sites

CKEditor is stripping out your code since <healcode...> is not a valid HTML tag. You can tell it, via its ACF and/or Extra allowed content settings, to allow that tag, though am not sure even that  would work.

Another possibility is to use Hanna Code to insert that code at runtime. Parameters would have to be passed to it (the values you want the client to be able to change) so as to render them at runtime. The Hanna Code would be could like so in your body field:

[[widget a=value1 b=value2 c=value3]]

where a, b and c are the parameters whose value the editor can change. You can rename them to something your client would understand, e.g. type,partner,id, etc...However, do you still want your client to be editing the Hanna Code like that? Alternatively, you can create a field(s) to store your editable values and via the Hanna Code, tell it to read from that field(s). Or, if the values will always be coming  from a set pool, you can save them beforehand to a pagefield. The client would then have select the applicable values in that pagefield. Hanna Code would then grab the values from that pagefield. Note that the above is not the Hanna Code code itself; just how to call it on your page. 

Anyway, please describe your scenario with a bit more specifics so that we can tailor our responses to that.

  • Like 5

Share this post


Link to post
Share on other sites

@MaryMatlow , if the widget always occurs in the same place in your template (i.e. the editor doesn't need to move it around) then you could have a dedicated textarea field in your template for the code snippet.

  • Like 1

Share this post


Link to post
Share on other sites

@kongondo I did take a look at Hanna Code but really wouldn't know how to set it up. As I explained, I've to put this code snippet at the page editor level, to pull in data from server. I need to pull different data on different pages so that's why can't put in one common template. There is nothing much to it.

@Robin S Yes it would occur in the same place, but the thing is I want to use the same template for all pages rather than creating separate ones. What field type would I use to place the code snippet into. I tried textarea fieldtype but it didn't work.

Share this post


Link to post
Share on other sites
Just now, MaryMatlow said:

What field type would I use to place the code snippet into.

Just an ordinary textarea - make sure the Inputfield Type is set to "Textarea" and not "CKEditor. Don't add any textformatters to the field.

  • Like 2

Share this post


Link to post
Share on other sites

If you use Hanna Code, you will place the Hanna Code in the RTE textarea of your page ,e.g. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et rhoncus nisl, a facilisis turpis. Integer sit amet fringilla velit, quis lobortis leo. Aliquam vitae ante tristique, sollicitudin est sit amet, scelerisque leo.

[[widget]]

Pellentesque iaculis mi dolor, id pretium dolor pellentesque eu. Proin in tincidunt mauris, eget facilisis nibh. Mauris eget euismod magna. Nunc eu mi pellentesque justo pharetra dapibus.

The 'widget' will be read by Hanna Code and it will apply the PHP code present saved for that widget in Hanna Code editor. I can give you example code. All your clients would have to do is to put [[widget]] on each page, or if passing values, [[widget data_type=whatever, etc]]. Would they be able to do that.

As for the other alternative, you could use a normal textarea without RTE and instruct the Hanna Code [[widget]] to get its values from that textarea. Hope this makes sense.

Edit:

Beaten by Robin S. :)

More thoughts:

Scenario 1

If your widget code will be place before or after your body text, then you don't need Hanna Code; only a non-RTE textarea field. In your template you would have two fields. One is your RTE textarea and the other the non-RTE one. In the RTE enter body copy as normal. In the non-rte one, let's call it widget_textarea, your editors will place the code. If the whole code will be changing, as opposed to parts of it, then they will put in that textarea the whole code. You will then only have to do the following in your template file

echo $page->body;// RTE body copy
echo $page->widget_textarea;// will echo your <healcode-widget></healcode-widget> code

Scenario 2

If your widget code will be appearing in between text, then you can either use Hanna Code only or a combination of Hanna Code and the widget_textarea. Then in your template file, you would only need to do the following:

// since the body field has the Hanna Code, whatever that Hanna Code is returning will be displayed in the place where you placed [[widget]]
// it will be specific to the page being viewed
echo $page->body;

If you want to go with Hanna Code, let us know and we'll give you example code

  • Like 3

Share this post


Link to post
Share on other sites

@kongondo and @Robin S thank you for your help. The textarea field worked. You guys are super.

I had been reading that Processwire is structured in such a way that all code is kept out of page edit level because of security concerns. Should I be worried about using code here?

Thanks. :-)

Share this post


Link to post
Share on other sites
4 hours ago, MaryMatlow said:

I had been reading that Processwire is structured in such a way that all code is kept out of page edit level because of security concerns. Should I be worried about using code here?

Well, you should be a bit wary in that a person with edit access to the page could insert some malicious Javascript. If the person editing the website is the site owner then of course they would have no reason to do such a thing.

As a general principle I think you should only make editable the parts of the code that it is essential to keep editable. For example, if your client only needs to change the "data-widget-id" attribute then make a text field just for that part and keep the rest of the snippet static in your template file. As an added benefit it also minimises the chances that they accidentally mess up the snippet code.

  • Like 1

Share this post


Link to post
Share on other sites

What Robin S said.

Security

How does the widget communicate with the third-party server? Is that something in your control? Are there risks if the communication was intercepted?

User-Friendliness

As a general rule, I would never put any sort of code in front of editors, unless I have to. Edit 10 or 15 pages and one widget starts to look like another, we miss or add an extra apostrophe here and there, and soon, it gets a bit messy and our code trips.

In addition, the editors will probably be copying and pasting and that's somewhat tedious. Other than that, it doesn't look too friendly :). OK, we can mitigate this by asking the client to enter something like this in the text/textarea field

type:class_lists,partner:mb,id:123456WB,version:0.1

OK, a bit of progress, but that's still a bit cryptic for some clients. The ideal situation would be to create one input per editable-value. That would mean 1 field per editable-value. Maybe an overkill (to some). Better yet, I would create a custom field that will hold all those n number of inputs for n number of editable-values. The advantages of this are:

  1. It is user-friendly
  2. It is easy to sanitize and validate each individual input
  3. If needed, we can query each of those fields (e.g. in case we have lots of pages and need to find those that contain xxxx in their ID in order to edit them)
  4. Etc... :)

Below is an example custom widget field as per above. It is not very difficult (if you are a developer) to create one based on the Events Fieldtype.

Just my 2p. Something to consider.

widget-mockup-field.png

  • Like 3

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Mike Rockett
      Docs & Download: rockettpw/seo/markup-sitemap
      Modules Directory: MarkupSitemap
      Composer: rockett/sitemap
      MarkupSitemap is essentially an upgrade to MarkupSitemapXML by Pete. It adds multi-language support using the built-in LanguageSupportPageNames. Where multi-language pages are available, they are added to the sitemap by means of an alternate link in that page's <url>. Support for listing images in the sitemap on a page-by-page basis and using a sitemap stylesheet are also added.
      Example when using the built-in multi-language profile:
      <url> <loc>http://domain.local/about/</loc> <lastmod>2017-08-27T16:16:32+02:00</lastmod> <xhtml:link rel="alternate" hreflang="en" href="http://domain.local/en/about/"/> <xhtml:link rel="alternate" hreflang="de" href="http://domain.local/de/uber/"/> <xhtml:link rel="alternate" hreflang="fi" href="http://domain.local/fi/tietoja/"/> </url> It also uses a locally maintained fork of a sitemap package by Matthew Davies that assists in automating the process.
      The doesn't use the same sitemap_ignore field available in MarkupSitemapXML. Rather, it renders sitemap options fields in a Page's Settings tab. One of the fields is for excluding a Page from the sitemap, and another is for excluding its children. You can assign which templates get these config fields in the module's configuration (much like you would with MarkupSEO).
      Note that the two exclusion options are mutually exclusive at this point as there may be cases where you don't want to show a parent page, but only its children. Whilst unorthodox, I'm leaving the flexibility there. (The home page cannot be excluded from the sitemap, so the applicable exclusion fields won't be available there.)
      As of December 2017, you can also exclude templates from sitemap access altogether, whilst retaining their settings if previously configured.
      Sitemap also allows you to include images for each page at the template level, and you can disable image output at the page level.
      The module allows you to set the priority on a per-page basis (it's optional and will not be included if not set).
      Lastly, a stylesheet option has also been added. You can use the default one (enabled by default), or set your own.
      Note that if the module is uninstalled, any saved data on a per-page basis is removed. The same thing happens for a specific page when it is deleted after having been trashed.
          
    • By MateThemes
      Hello everyone!
      I have a markup and image field question:
      I have a markup in which a gallery preview should be displayed on home page. This gallery have a special markup, 3 of 4 images have special image ratio.

      The gallery looks like this. 
      The html markup is like this:
      <div class="uk-section-muted" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-top-small; delay: 200;"> <div data-src="./assets/images/arrahof/home-restaurant-bg.svg" class="uk-background-norepeat uk-background-contain uk-background-top-center uk-section uk-section-large" uk-img> <div class="uk-container uk-container-small"> <div class="uk-margin-large" uk-grid> <div class="uk-width-1-1@m"> <h2 class="uk-text-center" uk-scrollspy-class>Das Angebot im ArraHof</h2> </div> </div> <div class="uk-grid-small uk-grid-margin-small" uk-grid> <div class="uk-width-expand@s"> <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class> <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#"> <img class="el-image" data-src="https://via.placeholder.com/610x604" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="604" alt="Placeholder Image" uk-img> <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div> <div class="uk-position-center uk-position-small"> <div class="uk-overlay uk-padding-large uk-transition-fade uk-margin-remove-first-child"> <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">Lorem Ipsum</h3> <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div> </div> </div> </a> </div> </div> <div class="uk-width-expand@s"> <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class> <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#"> <img class="el-image" data-src="https://via.placeholder.com/610x604" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="604" alt="Placeholder Image" uk-img> <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div> <div class="uk-position-center uk-position-small"> <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child"> <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3> <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div> </div> </div> </a> </div> </div> </div> <div class="uk-grid-small uk-grid-margin-small" uk-grid uk-height-match="target: .uk-card; row: false"> <div class="uk-width-2-3@s"> <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class> <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#"> <img class="el-image" data-src="https://via.placeholder.com/610x400" data-width="610" data-height="400" alt="Placeholder Image" uk-img> <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div> <div class="uk-position-center uk-position-small"> <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child"> <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3> <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div> </div> </div> </div> </a> </div> <div class="uk-width-expand@s"> <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class> <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#"> <img class="el-image" data-src="https://via.placeholder.com/610x820" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="820" alt="Placeholder Image" uk-img> <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div> <div class="uk-position-center uk-position-small"> <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child"> <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3> <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div> </div> </div> </div> </a> </div> </div> </div> <div class="uk-margin-large" uk-grid> <div class="uk-width-1-1@m"> <div class="uk-text-lead uk-width-xxlarge uk-margin-auto uk-text-center" uk-scrollspy-class>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</div> <div class="uk-margin-medium uk-text-center" uk-scrollspy-class> <a class="el-content uk-button uk-button-default uk-button-large" href="#">Unterkunft</a> </div> </div> </div> </div> </div> How can I achieve when I have an image field to add the custom markup within the image field? I have no clue to get this done.
      Thank you!
    • By Robin S
      This module is inspired by and similar to the Template Stubs module. The author of that module has not been active in the PW community for several years now and parts of the code for that module didn't make sense to me, so I decided to create my own module. Auto Template Stubs has only been tested with PhpStorm because that is the IDE that I use.
      Auto Template Stubs
      Automatically creates stub files for templates when fields or fieldgroups are saved.
      Stub files are useful if you are using an IDE (e.g. PhpStorm) that provides code assistance - the stub files let the IDE know what fields exist in each template and what data type each field returns. Depending on your IDE's features you get benefits such as code completion for field names as you type, type inference, inspection, documentation, etc.
      Installation
      Install the Auto Template Stubs module.
      Configuration
      You can change the class name prefix setting in the module config if you like. It's good to use a class name prefix because it reduces the chance that the class name will clash with an existing class name.
      The directory path used to store the stub files is configurable.
      There is a checkbox to manually trigger the regeneration of all stub files if needed.
      Usage
      Add a line near the top of each of your template files to tell your IDE what stub class name to associate with the $page variable within the template file. For example, with the default class name prefix you would add the following line at the top of the home.php template file:
      /** @var tpl_home $page */ Now enjoy code completion, etc, in your IDE.

      Adding data types for non-core Fieldtype modules
      The module includes the data types returned by all the core Fieldtype modules. If you want to add data types returned by one or more non-core Fieldtype modules then you can hook the AutoTemplateStubs::getReturnTypes() method. For example, in /site/ready.php:
      // Add data types for some non-core Fieldtype modules $wire->addHookAfter('AutoTemplateStubs::getReturnTypes', function(HookEvent $event) { $extra_types = [ 'FieldtypeDecimal' => 'string', 'FieldtypeLeafletMapMarker' => 'LeafletMapMarker', 'FieldtypeRepeaterMatrix' => 'RepeaterMatrixPageArray', 'FieldtypeTable' => 'TableRows', ]; $event->return = $event->return + $extra_types; }); Credits
      Inspired by and much credit to the Template Stubs module by mindplay.dk.
       
      https://github.com/Toutouwai/AutoTemplateStubs
      https://modules.processwire.com/modules/auto-template-stubs/
    • By DV-JF
      Hi, 
      I'm using this kind of setup (https://processwire.com/blog/posts/language-access-control-and-more-special-permissions/#language-page-edit-permissions) in order to control the page edit permissions. Now I'm wondering if it's possible to hide the "none-ediable" language-tabs instead of striking them through.

      Many greets...
       
    • By Robin S
      Another little admin helper module...
      Template Field Widths
      Adds a "Field widths" field to Edit Template that allows you to quickly set the widths of inputfields in the template.

      Why?
      When setting up a new template or trying out different field layouts I find it a bit slow and tedious to have to open each field individually in a modal just to set the width. This module speeds up the process.
      Installation
      Install the Template Field Widths module.
      Config options
      You can set the default presentation of the "Field widths" field to collapsed or open. Field widths entered into the Template Field Widths inputfield are only applied if the Edit Template form is submitted with the Template Field Widths inputfield in an opened state. "Collapsed" is the recommended setting if you think you might also use core inputs for setting field widths in a template context. You can choose Name or Label as the primary identifier shown for the field. The unchosen alternative will become the title attribute shown on hover. You can choose to show the original field width next to the template context field width.  
      https://github.com/Toutouwai/TemplateFieldWidths
      https://modules.processwire.com/modules/template-field-widths/
×
×
  • Create New...