Hi everyone!
I'll try to give a quick overview here of all the important elements and locations of this project. Well, it's probably not gonna be quick.. But I hope it's useful nonetheless.
I usually attach documentation to the website itself, for easier linking, better compatibility (we all use a browser), showing things inline, and to do a final round of bug weeding in the process.
We'll go through the components one by one, and in between you may find some pointers to stuff in MODX. I'm not going to describe everything in detail. I assume you all have enough common sense and MODX mileage aboard that we can skip that. This quick tour is just to highlight the unique features of this project.
Alright, lets' go!
Events - Backend
Of course, the main focus of this project centers around the events. (Referred to as "What's on" in menus.) Events can have their own detail pages, but some of them will link directly to the EventBrite booking page.
To achieve this, please mark the Resource Type as Weblink. You can do this from inside the Collections grid, when adding an Event.
See screenshot adjacent:
- The Add event contains a dropdown, which lets you select a Weblink. By default, it creates a normal resource.
- The template should always be automatically set to Event_Detail, but it never hurts to check.
- You can add the link to EventBrite directly in the Weblink field, but if you use a reference to the TV there instead, the link won't be overwritten if you ever switch resource type. And it will be displayed correctly in the Collections grid also.
- A link icon will indicate if a resource is a Weblink, in the Collections grid.
Events - Presentation
The events on the frontend can be filtered on Type and/or Category (thanks to @Tim!). You can also link from other pages to a pre-filtered grid, like so:
You'll also notice that the Weblinks have a different button text. So these links don't go to a Detail page, but straight to EventBrite.
Check out the Events pageAnimated content
What you're looking at now, is animated content. Very similar to the familiar alternating content, but with a fancy way of transitioning between the segments. Tim has done the animating part. We're still fiddling with the parameters a bit, especially for fading the last item out. That's not yet as smooth as we'd like it to be.
Also, there is a bug where you can "pick up" the last image from the component when scrolling back up, and then keep it in view by scrolling down again before the script snaps you into the desired behaviour. See the video on the side.
@Tim: what do you think? I quickly tried using both Swiper and CSS scroll-snap instead, but it then becomes tricky to snap out of the container, and continue scrolling normally.. Any ideas with the current library?
See this on homepage
Alternating content
The one you're probably all familiar with. I haven't changed it much, but you may be looking for it in the manager because the TV category changed. It is now under Content Top. See adjacent image.
Important to know: once you select a Media Type in the modal (the first option) and save and close, then upon return, the alternative media options are hidden. So if you select Image, then the next time you open the modal, all Video fields will be hidden.
NEW: options were added for showing a local video file, and for setting some image classes.
I'll leave the technical details for further down.
MIGX tweaks
Most of the MIGX grids have been upgraded with Edit and Duplicate buttons, so we won't have to bother clients anymore with that dreadful right-mouse menu (which doesn't work on touch screens either).
Also, most grid items now have a Published option. When unchecked, the items will not be displayed on the frontend. So you can disable things first, before you decide to delete them.
And when you do delete items in custom tables, they move to separate "Thrash view". This "soft delete" function protects you a little against permanently deleting items when your cat jumps on your keyboard. Please note that this doesn't apply to regular MIGX TVs (such as the alternating contents grid).
(Adjacent video is not related. Just for testing..)
Global Content
Some types of content are going to be reused on different pages. To avoid having to add them again on each page, these items live under a Global Content section. Accessible via Top Menu > Content > Global.
In some cases, global content can also be edited via the TVs section:
Open Global Content grid
Page images
Each page comes with a couple of image TVs, which are used for (re)presenting this page in overview / excerpt / collection grids (how do you call them internally?).
The idea is that you add the same picture here each time, after which ImagePlus will ask you to crop it with a certain aspect ratio. That way, the system always has multiple options available for use in overview templates.
You can choose a color too, which can be used in situations where an overlay is needed (for text to be readable on top of a background image, for example).
Pro tip: you don't need to select the image through the file explorer for each variant. Just do that for the first one, and then copy/paste the path to the next ones.
Header backgrounds
If the Image TVs are set, then a header background is activated for that page. This image is loaded via CSS, and uses media sources to determine which image to load, based on viewport size and display pixel density. Especially on mobile, this saves visitors from having to download ginormous image files.
For now the CSS is added inline in the head. But ideally, it would be picked up by a plugin and parsed as physical CSS file.
Good to know: if the img_pano TV is set, the background is activated. But img_portrait and img_wide also need to be set!
On home: a background image will be displayed if TVs are set AND no video file is given.
Header content
The top section of each page. You can edit the content via the TVs. Should be pretty straight-forward, except for 1 thing:
Some TV values are set to be inherited. I don't know if you're familiar with it, but it's a native MODX feature. This means, that if you fill in a field on a parent page, the value will be applied to child pages also if the child value is empty. So in other words: you can always overwrite this again on the child pages.
It can be quite convenient for quickly filling up elements like headers, banners, etc. But it may also be a little confusing at first, if you've never used it before ("Where is this text coming from? I don't see it anywhere!"). But as long as you keep an eye on those "Value Inherited" indicators, you'll probably be OK.
@Elisha: please let me know if you want to keep it this way, or revert to non-inherited TVs again!
Programme section
Displays a slider with all available Event Types. Clicking on the link, will take you to a pre-filtered Events page.
Event Types are part of the Global Content:
Please make sure that each published event type has an image, alias and color set.
Meet the team
Team members are also Global Content, but can be edited from the TVs section as well, for convenience.
At the moment, team members can't be linked to anything. It's purely informational.
@todo: I think the bio text should expand still somehow, when clicked. Or will this be very short?
"Signal Festival is a vital opportunity to transform and create relationships between young people and… Read more
"Signal Festival Swindon is important to me because everyone deserves to be able to explore the arts… Read more
"Signal is important because it marks the beginning of a new chapter for Swindon. Bringing all the local… Read more
"Signal Festival is important because young artists need the opportunity to showcase their talents, and… Read more
"Signal is important to me because having the opportunity to develop your artistic practice from an early… Read more
"Signal Festival is important because in Swindon it is so difficult to know where you can go as an artist… Read more
Arlo Carter (he/him), 28
Young Producer, Film
"Signal Festival is a vital opportunity to transform and create relationships between young people and art. Personally, my experience with art came to me a little later than others when I joined a local youth group. It was a gateway to my artistic journey and one I wish could still be around. With budget cuts, lack of funding in schools for the arts and pressures on organisations to survive, Signal Festival is a lifeline to call out to all organisations and young people to get rid of any barriers between communities and art, celebrate Swindon's incredible artists and encourage Swindon to become a place we are proud of.
I’m most looking forward to the development and wider reaches of the festival as it grows over the next few years. I’m excited to be a part of a team that is going to be the spark for young people’s artistic journeys."
Where do you live?: Penhill, Swindon
How long have you lived in Swindon?: 28 years
Education in Swindon: Sevenfields Primary, Warneford Secondary School, New College Swindon
Interests/ artforms: Film, Theatre, Acting, Fine Arts & Diving
Erin Fletcher (she/her), 21
Young Producer, Theatre, Music
"Signal Festival Swindon is important to me because everyone deserves to be able to explore the arts and themselves through art. Young people in Swindon deserve to live in a place that believes in them and celebrates their brilliance. Swindon is home to so many incredible artists who deserve to be celebrated and all artists should feel confident and secure in calling Swindon home, knowing that it has a place for them.
I’m looking forward to seeing the connections that people make and the buzz of exciting things happening in Swindon."
Where do you live?: Old Town, Swindon
How long have you lived in Swindon?: 21 years
Education in Swindon: King William Street Primary School, Commonweal School
Interests/ artforms: Poetry, Playwriting, Music, Theatre
Morgan Thomas (she/her), 28
Young Producer, Dance
"Signal is important because it marks the beginning of a new chapter for Swindon. Bringing all the local companies together and highlighting all the opportunities that are present in Swindon feels like a fresh start for local young creatives. Signal puts the emphasis on young people in a way that gives them authority and agency to ask for exactly what they need and are owed from local & national organisations.
I’m looking forward to seeing the after-effects of Signal, particularly which companies it interests, which young people it inspires, and what actions they take."
Where do you live?: Royal Wootton Bassett, Wiltshire
Interests/ artforms: Film-making, Directing, Screen-Acting, Script Writing, Poetry, Contemporary Performance, DIY Production
Clarissa Boyce-Johnson (she/her), 23
Young Producer, Visual Arts
"Signal Festival is important because young artists need the opportunity to showcase their talents, and individuals who are wanting to pursue a career in art can be guided in the right direction. There’s also the need to show everyone exactly what Swindon has to offer because a worrying amount of people (particularly young people) are unaware of what is happening in the local art scene and are of the belief that you need to leave town in order to explore the arts. Signal Festival was created to prove those assumptions wrong.
I’m looking forward to seeing what Swindon has to offer; both from local individuals and art companies. I am particularly excited to see what our local musicians are like."
Where do you live? Moredon, Swindon
How long have you lived in Swindon? 18 years
Education in Swindon: Haydon Wick Primary, Nova Hreod Academy, New College Swindon
Interests/artforms: Painting, Drawing, Sketching, Crafts, Music, Gaming
George Sargent (he/they), 20
Young Producer, Music
"Signal is important to me because having the opportunity to develop your artistic practice from an early age is fundamentally essential. Signal being a platform to champion and facilitate young creatives, much like Prime did for me, will only result in a positive impact on their worlds and shows that it is possible to be an artist in the modern day.
In a time where apathy is so prevalently documented amongst people in this town, it is more important than ever to have something that stands in opposition of it; that for me is Signal."
Where do you live?: Wanborough, Swindon
How long have you lived in Swindon?: 21 years
Education in Swindon: Ferndale Primary school, Wanborough Primary school, Ridgeway School and Sixth form college.
Interests/ artforms: Music technology, Filmmaking, Theatre
Riley Mathers (they/them), 27
Young Producer, Visual Arts, Words
"Signal Festival is important because in Swindon it is so difficult to know where you can go as an artist or someone who is interested in art. There are so many things out there and yet unless you’re in the know, you don’t know about this. Something like Signal Festival will be able to showcase all the brilliant art things that are already here and showcase new talent that is ready to bloom. I look forward to seeing what new ideas spring up and watching new artists come forward, inspired about what they see."
Where do you live?: Cricklade, Swindon
How long have you lived in Swindon?: 10 years
Interests/ artforms: Creative Writing, Costuming, Visual Arts
Statistics about the festival
This is also Global Content. You can add a different FontAwesome icon to each statistic, by adding the corresponding icon class
Benefits of partnering with us
Add benefit boxes with MIGX. This time, it is not global content, but stored together with the page content.
You can change the default color of the card, if you want to emphasize certain items.
Around Swindon
Locations are Global Content, and each Event has a selector for choosing a location.
Possible @todos:
- Link Location slide to pre-filtered Events page (prep work already done, just needs new Isotope category).
- Each Location has fields for geo coordinates (lat/lng). We could use this to show locations on a map.
- Each Location has an image field too, which could be used for reference somewhere.
Don't ban the content banners!
Not really that much to say about them. You can change the background color, the link, and the text. That's it. Ah, and that inheritance thing (from the Header section) applies here too.
And there can only be 1, so...
Make it count!
Get into Theatre & Film
Swindon's first ever theatre and film careers event hosted by Get into Theatre, and showcasing a wide range of local and national organisations including LAMDA, Royal Central School of Speech and Drama and the BBC!
Tickets £2 | Age 14 - 25
Find our more
Ellipsis Audio Walking Tour
Belén L.Yáñez presents Ellipsis, an immersive 60-minute audio experience presented as a walking tour in urban spaces.
Performances are 3.00 - 4.00 p.m. and 5.00 - 6.00 p.m.
Tickets £2 | Age 11 - 25
Find our more
This is Signal! - Opening Showcase
The launch of Swindon’s first Signal Festival. Join us to celebrate the young artists making work in our town.
SOLD OUT | All ages welcome
Find our moreFAQ's
The items are automatically divided amongst two columns, based on even/odd index numbers.
Consectetur adipiscing elit vitae habitasse tempus dui lectus imperdiet urna dignissim, tincidunt iaculis senectus rhoncus taciti montes eu congue placerat semper nibh erat parturient. Sapien malesuada facilisi ac primis mattis pellentesque vitae aliquam, nec nisl quisque porta vehicula facilisis varius arcu gravida, at habitasse aptent aenean rutrum mauris dapibus. Velit nisl risus egestas fusce, fermentum hac netus mus turpis, mollis porta ultrices.
Duis, ducimus Laborum sed tortor. Lorem ipsum dolor sit amet consectetur adipiscing elit vitae habitasse tempus dui lectus imperdiet urna dignissim, tincidunt iaculis senectus rhoncus taciti montes eu congue placerat semper nibh erat parturient. Sapien malesuada facilisi ac primis mattis pellentesque vitae aliquam, nec nisl quisque porta vehicula facilisis varius arcu gravida, at habitasse aptent aenean rutrum mauris dapibus. Velit nisl risus egestas fusce, fermentum hac netus mus turpis, mollis porta ultrices.
Lorem ipsum dolor sit amet consectetur adipiscing elit vitae habitasse tempus dui lectus imperdiet urna dignissim, tincidunt iaculis senectus rhoncus taciti montes eu congue placerat semper nibh erat parturient. Sapien malesuada facilisi ac primis mattis pellentesque vitae aliquam, nec nisl quisque porta vehicula facilisis varius arcu gravida, at habitasse aptent aenean rutrum mauris dapibus. Velit nisl risus egestas fusce, fermentum hac netus mus turpis, mollis porta ultrices.
Lorem ipsum dolor sit amet consectetur adipiscing elit vitae habitasse tempus dui lectus imperdiet urna dignissim, tincidunt iaculis senectus rhoncus taciti montes eu congue placerat semper nibh erat parturient. Sapien malesuada facilisi ac primis mattis pellentesque vitae aliquam, nec nisl quisque porta vehicula facilisis varius arcu gravida, at habitasse aptent aenean rutrum mauris dapibus. Velit nisl risus egestas fusce, fermentum hac netus mus turpis, mollis porta ultrices.
Consectetur adipiscing elit vitae habitasse tempus dui lectus imperdiet urna dignissim, tincidunt iaculis senectus rhoncus taciti montes eu congue placerat semper nibh erat parturient. Sapien malesuada facilisi ac primis mattis pellentesque vitae aliquam, nec nisl quisque porta vehicula facilisis varius arcu gravida, at habitasse aptent aenean rutrum mauris dapibus. Velit nisl risus egestas fusce, fermentum hac netus mus turpis, mollis porta ultrices.
Duis, ducimus Laborum sed tortor. Lorem ipsum dolor sit amet consectetur adipiscing elit vitae habitasse tempus dui lectus imperdiet urna dignissim, tincidunt iaculis senectus rhoncus taciti montes eu congue placerat semper nibh erat parturient. Sapien malesuada facilisi ac primis mattis pellentesque vitae aliquam, nec nisl quisque porta vehicula facilisis varius arcu gravida, at habitasse aptent aenean rutrum mauris dapibus. Velit nisl risus egestas fusce, fermentum hac netus mus turpis, mollis porta ultrices.
Bottom content
Some templates have a second section of alternating content. Below here, there are only Testimonials, Supporters and Links sections, which are pretty self-explanatory I think. Testimonials and Supporters are global content, and Links point to other resources. You can select available Testimonials and Links with a TV.
A few templates have a Contact section at the bottom, before showing the footer. I'm just using the templating from the base install for this, with some small adjustments to fit the design.
Developers notes
What follows below are some technical notes, highlighting what was changed or added under the hood.
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`
]]
Open the inspector and change the viewport width, to see how the browser chooses the best source for the adjacent image.
Custom tables
As mentioned, a full schema with classes and create/update functionality is included in the GelEvents 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 package.
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 it makes things much easier to reuse.
Some characteristics of this approach:
- Updates to form tabs are immediately loaded when reopening the "Add item" modal.
- Configs can be derived from the existing MIGX UI, so you have an identical starting point..
- And in theory, you should also be able to import them back again into the MIGX UI, if you prefer to work from there.
- I added Published selectors to most items, so you can quickly enable or disable them on the frontend.
- I added a delete column to all MIGXdb tables, which then utilizes the built-in soft delete functionality of MIGX. So if you delete an item, it is moved to the Trash View (button on top). Handy for cats jumping on keyboards.
- I added Edit and Duplicate buttons to the main grid, so you don't have to right mouse click into the modal. Saved me a lot of questions from clients, plus now you can actually use MIGX on a touch screen.
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!!)
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 was also kind of spearheading already.
The custom bits are mostly for the decorative elements (the burst graphic, brush strokes and section dividers). These mostly use SVG image masks, meaning they will adapt to the background color (so you don't need dozens of different color variants).
They can be applied to any element, using classes. See _backgrounds.scss file for available classes and some additional pointers.
Please note: most backgrounds are attached as pseudo-elements, using :before and :after. This means you cannot apply more than 2 of those to the same element. Sometimes you can apply them to nearby elements too, but sometimes you need an additional wrapper.
“I'm excited to be part of the team!”
I’m most looking forward to the development and wider reaches of the festival as it grows over the next few years. I’m excited to be a part of a team that is going to be the spark for young people’s artistic journeys.
Our supporters
/signal-festival-swindon-24.47861fa2.webp)
/signal-festival-swindon-60.a57ac36f.webp)