Signal dev notes

Should be the most up-to-date version of this list.

Templating

From that, I divided the components into 2 groups: page components, and global components. Content from page components is only used on the page itself, and from global can be shared between pages and components. All global components have a custom database table.

* was for my own reference. Those are regular MIGX TVs.

To be able to develop all these components quickly, and to make then more portable, I created a custom package with Git Package Manager (GPM). For now, it’s called GelEvents. You can find it in your Bitbucket also.

So you can install all these components in any MODX installation through the package manager.

Likewise, you can also make edits to the package and upgrade them via package manager.

Initially, it contains:

Responsive images

Uses srcset and sizes instead of the <picture> element, which is the recommended way of doing this. Picture is more for art direction / providing alternative file types.

You can set the number of columns that you’re using per breakpoint, similar to the BS col-12 col-md-6 style classes, to determine how wide the image will approximately be (in terms of viewport width). The browser will then choose the most optimal src image, based on resolution and pixel density. (Beware: it generates several src images per picture in the image cache, so a first page load with lots of images can take a while. This is only on the first ever page load, and this cache should never be cleared. Then visitors will never notice.)

A usage example with an ImagePlus image:

[ [ImagePlus?  
    &value=`[ [+image]]`  
    &options=`w=1300&q=85&f=webp&zc=1`  
    &type=`tpl`  
    &tpl=`imgResponsiveGrid`  
  
    &max_thumb_width=`1300`  
    &scale=`100`  
    &cols_md=`1`  
    &cols_lg=`2`  
    &cols_xl=`2`  
    &lazy_load=`1`  
]]

Custom tables

As mentioned, a full schema with classes and create/update functionality is included in the package.

"database": {  
    "tables": [  
        "gelTestimonial",  
        "gelEventCategory",  
        "gelEventType",  
        "gelLocation",  
        "gelTeamMember",  
        "gelSupporter",  
        "gelStatistic"  
    ]  
}

With any changes to the schema, the tables are automatically altered when you update the GelEvents package.

Global Content grid

The data from these tables can be viewed under Top Menu > Content > Global.

MIGX grid configs as JSON

This is a bit of a technical detour from the usual approach. All functionality in this grid is moved to JSON files, instead of being managed through the MIGX UI itself. I’ve been doing this for years. It really speeds things up and makes things much easier to reuse.

Some characteristics of this approach:

These configs can be found under components/gelevents/migxconfigs/. Make sure that file names always follow the format migx_name.config.js.

To use them in TVs and menus, refer to them as you usually would, with their MIGX name, but append it with the namespace. For example:

manager/?a=index&namespace=migx&configs=testimonials

becomes:

manager/?a=index&namespace=migx&configs=testimonials:gelevents

(This is all pretty much stock MIGX functionality. So don’t thank me for it, thank Bruno!!)

TV selectors

To populate any kind of TV that takes in @CHUNK input options with content from the custom tables.

Usually, I also put some lexicon stuff there (but in your case probably no need), and I have a base class with frequently used PHP functions. I haven’t done anything with that now, although there is an Events class already available, if ever you feel the need.

Theming

Won’t go too deep into the details here, but I took out a lot of styles, moved others to more logical locations, and went back to staying as close as possible to the Bootstrap styles / components.

As mentioned: the latest BS version is used now, and I substantially tweaked the _vars.scss file to change all colors / margins etc to desired values. It’s been a while since I used Bootstrap, but I must say it has come a long way. It moved much more towards the micro classes approach that Tailwind has popularized, and which Semantic UI is also already kind of using in a simple way.

I like it so far. Except for maybe some components, like Accordion and Dropdown, which are still somewhat limited in the styling tweaks they allow from the core variables. So those need some more wrestling still. There’s always a trade-off.

Completed

A quick rundown of most of the steps I went through. But probably still incomplete. For a complete reference, see the commit messages on Bitbucket.

Setup

Theming

Templating

Configuration

Database

Content

#about/devops/modx #effort/GEL