Jump to content
AndZyk

Music! at the town church Pforzheim

Recommended Posts

musik-stadtkirche-pforzheim.thumb.png.d5998a82c4541c7a5459fd7e8977c398.png

This is a website for the musical area of the protestant town church Pforzheim, Germany. Our agency designconcepts developed a website that provides informations about the choirs, ensembles and orchestras as well as dates for their rehearsals, services and concerts.

The website was build with help of the framework UIkit.

www.musik.stadtkirche-pforzheim.de

 

Features:

  • Events
  • Download dates

 

Events

musik-stadtkirche-pforzheim-events.png.5195f0dd054befd2d8f6df54d7402738.png

The events for rehearsals, services and concerts were created in Microsoft Excel and then imported as pages from CSV. For better organization, events are cross-referenced with choirs, ensembles and orchestras. Services and concerts are displayed in a events list, but rehearsals are only displayed on the page of the choir, ensemble or orchestra, to make the events list more compact.

 

Download dates

musik-stadtkirche-pforzheim-event-download.png.e2814c636948063d529d5a0708bfe74f.png

It is possible to download every event date as ICS file, which will be generated on clicking the download button. You can then add this event easily to your calendar app and stay up-to-date.

 

Modules used:

 

Regards, Andreas

 

  • Like 5

Share this post


Link to post
Share on other sites

Very nice site!

May I ask how you realized the calendar.ics part?

I'm currently building the same. I created two templates, a parent container and the ics-calendar children. Every calendar event will be build as a childpage. The childpages will be embedded per pagereference field where needed. The URL is included, and when downloading the type is text/calendar.

Have you experiences if the compact vcalendar format you uses is suffient with different MS-Outlook applications? I found some examples in the web with additional X-MS-OLK- and X_Microsoft-... Params.

Share this post


Link to post
Share on other sites
Quote

The website was build with help of the framework UIkit.

What uikit version did you use ? I don't see any of this: /*! UIkit 3.x.x | http://www.getuikit.com | (c) 2014 - 2018 YOOtheme | MIT License */
in your loaded uikit css file.

Share this post


Link to post
Share on other sites
58 minutes ago, horst said:

Very nice site!

May I ask how you realized the calendar.ics part?

I'm currently building the same. I created two templates, a parent container and the ics-calendar children. Every calendar event will be build as a childpage. The childpages will be embedded per pagereference field where needed. The URL is included, and when downloading the type is text/calendar.

Have you experiences if the compact vcalendar format you uses is suffient with different MS-Outlook applications? I found some examples in the web with additional X-MS-OLK- and X_Microsoft-... Params.

Thank you. 😉

My solution was to include a script for converting PHP to ICS, if you visit the event template with the URL segment "/download/".

Tricky was to format all data for the ICS format. Here is my version of the script mentioned above:

<?php namespace ProcessWire;

// Variables used in this script:
//   $summary     - text title of the event
//   $datestart   - the starting date (in seconds since unix epoch)
//   $dateend     - the ending date (in seconds since unix epoch)
//   $address     - the event's address
//   $uri         - the URL of the event (add http://)
//   $description - text description of the event
//   $filename    - the name of this file for saving (e.g. my-event-name.ics)
//
// Notes:
//  - the UID should be unique to the event, so in this case I'm just using
//    uniqid to create a uid, but you could do whatever you'd like.
//
//  - iCal requires a date format of "yyyymmddThhiissZ". The "T" and "Z"
//    characters are not placeholders, just plain ol' characters. The "T"
//    character acts as a delimeter between the date (yyyymmdd) and the time
//    (hhiiss), and the "Z" states that the date is in UTC time. Note that if
//    you don't want to use UTC time, you must prepend your date-time values
//    with a TZID property. See RFC 5545 section 3.3.5
//
//  - The Content-Disposition: attachment; header tells the browser to save/open
//    the file. The filename param sets the name of the file, so you could set
//    it as "my-event-name.ics" or something similar.
//
//  - Read up on RFC 5545, the iCalendar specification. There is a lot of helpful
//    info in there, such as formatting rules. There are also many more options
//    to set, including alarms, invitees, busy status, etc.
//
//      https://www.ietf.org/rfc/rfc5545.txt



$filename = page()->name . ".ics";

// 1. Set the correct headers for this file
header('Content-type: text/calendar; charset=utf-8');
header('Content-Disposition: attachment; filename=' . $filename);

// 2. Define helper functions

// Converts a unix timestamp to an ics-friendly format
// NOTE: "Z" means that this timestamp is a UTC timestamp. If you need
// to set a locale, remove the "\Z" and modify DTEND, DTSTAMP and DTSTART
// with TZID properties (see RFC 5545 section 3.3.5 for info)
//
// Also note that we are using "H" instead of "g" because iCalendar's Time format
// requires 24-hour time (see RFC 5545 section 3.3.12 for info).
function dateToCal($timestamp) {
	return gmdate('Ymd\THis\Z', $timestamp);
}

// Escapes a string of characters
function escapeString($string) {
	return preg_replace('/([\,;])/','\\\$1', $string);
}

// 3. Echo out the ics file's contents
?>
BEGIN:VCALENDAR
CALSCALE:GREGORIAN
VERSION:2.0
PRODID:-//Stadtkirche Pforzheim//NONSGML ProcessWire//DE
<?php
	if (page()->template == "event"):

		$summary = page()->getUnformatted("headline");
		$dateStart = page()->dateStart;
		$dateEnd = page()->dateEnd;
		$address = page()->place->getUnformatted("title");
		$uri = page()->httpUrl;
		$description = strip_tags(page()->getUnformatted("summary"));
?>
BEGIN:VEVENT
DTEND:<?= dateToCal($dateEnd) . "\n"; ?>
UID:<?= uniqid() . "\n"; ?>
DTSTAMP:<?= dateToCal(time()) . "\n"; ?>
LOCATION:<?= escapeString($address) . "\n"; ?>
DESCRIPTION:<?= escapeString($description) . "\n"; ?>
URL;VALUE=URI:<?= escapeString($uri) . "\n"; ?>
SUMMARY:<?= escapeString($summary) . "\n"; ?>
DTSTART:<?= dateToCal($dateStart) . "\n"; ?>
END:VEVENT
<?php
	elseif (page()->template == "ensemble"):

		$eventsPage = pages()->get("template=events");
		$events = pages()->find("template=event, has_parent=$eventsPage, ensemblesSinging|ensemblesPlaying=$page, sort=dateStart, dateStart>" . time());

		foreach ($events as $event):

			$summary = $event->getUnformatted("headline");
			$dateStart = $event->dateStart;
			$dateEnd = $event->dateEnd;
			$address = $event->place->getUnformatted("title");
			$uri = $event->httpUrl;
			$description = strip_tags($event->getUnformatted("summary"));
?>
BEGIN:VEVENT
DTEND:<?= dateToCal($dateEnd) . "\n"; ?>
UID:<?= uniqid() . "\n"; ?>
DTSTAMP:<?= dateToCal(time()) . "\n"; ?>
LOCATION:<?= escapeString($address) . "\n"; ?>
DESCRIPTION:<?= escapeString($description) . "\n"; ?>
URL;VALUE=URI:<?= escapeString($uri) . "\n"; ?>
SUMMARY:<?= escapeString($summary) . "\n"; ?>
DTSTART:<?= dateToCal($dateStart) . "\n"; ?>
END:VEVENT
<?php
		endforeach;

	endif;
?>
END:VCALENDAR

I have never bothered to try any other calendar format than ICS, because ICS is the only standard calendar format I know of.

 

27 minutes ago, pwired said:

What uikit version did you use ? I don't see any of this: /*! UIkit 3.x.x | http://www.getuikit.com | (c) 2014 - 2018 YOOtheme | MIT License */
in your loaded uikit css file.

I usually use the latest version installed with Yarn and then compile the source SCSS. The source SCSS files don't seem to have the comment.

  • Like 4

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 jploch
      Admin Theme Canvas
      A minimal admin theme with optimised page editor UI, based on Uikit 3.
      Currently this is an early beta. It's not recommended to use it for producton yet.
      Download here
      Features
      Minimal black and white admin theme Fixed masthead navigation Direct access to page tree navigation inside page dropdown Less distraction for editors Options to customise the ui Less distraction for editors

      Direct access to page tree navigation inside dropdown

      Page tree

      Options to customise the ui

      Login (inspired by AdminThemeBoss)

      Requirements
      Process Wire 3.0.100 or greater
      Installation
      Manually
      Make sure the above requirements are met Download the theme files from GitHub Copy all of the files for this module into /site/modules/AdminThemeCanvas/ Go to “Modules > Refresh” in your admin Click “Install“ on the “AdminThemeCanvas“ Module Go to your user profile page and change the theme to Admin Theme Canvas
    • By modifiedcontent
      Small annoyance: I get a horizontal scrollbar in UIkit admin area - or actually Admin Theme Boss based on Uikit 3. I tried to fix it with CSS, but had trouble isolating/targeting it and don't want to mess with module or core files. I think this issue has been reported before. Is there a recommended fix? 
    • By Noel Boss
      » A more exhaustive version of this article is also available on Medium in English and German «
      First, we'd like to thank the very helpful community here for the excellent support.
      In many cases we found guidance or even finished solutions for our problems.
      So a big THANK YOU!!!
       
      We are pleased to introduce you to the new Ladies Lounge 18 website. The next ICF Women’s Conference will take place in Zurich and several satellite locations across Europe. We embarked on bold new directions for the development of the website — in line with the BRAVE theme.

      Ladies Lounge 18 — ICF Woman’s Conference website on Processwire ICF Church is a European Church Movement that started 20 years ago in Zurich and since experienced tremendous growth. There are already well over 60 ICF churches across Europe and Asia. ICF is a non-denominational church with a biblical foundation that was born out of the vision to build a dynamic, tangible church that is right at the heartbeat of time.
      With the growth of the Ladies Lounge from a single-site event to a multi-site event, the demands and challenges to the website have also increased. A simple HTML website no longer cuts it.
      Simplified frontend Our goal with the development of the new site was it to present the different locations — with different languages and partly different content — under once uniform umbrella — while at the same time minimising the administrative effort. In addition to the new bold look and feel, this year’s website is now simpler and easier and the information is accessible with fewer clicks. 
      Some highlights of the new website
      Thanks to processwire, all contents are maintained in one place only, even if they are displayed several times on the website 100% customised data model for content creators Content can be edited directly inline with a double-click:  

      Multi-language in the frontend and backend Dynamic Rights: Editors can edit their locations in all available languages and the other content only in their own language Easy login with Google account via OAuth2 Plugin Uikit Frontend with SCSS built using PW internal features (find of files…) Custom Frontend Setup with Layout, Components, Partials and Snippets Only about 3 weeks development time from 0 to 100 (never having published a PW before) Despite multi-location multi-language requirement, the site is easy to use for both visitors and editors:  
       
        The search for a good CMS is over It’s hard to find a system that combines flexibility and scope with simplicity, both in maintainance and development. The search for such a system is difficult. By and large, the open source world offers you the following options:
      In most cases, the more powerful a CMS, the more complex the maintenance and development
      It is usually like that; The functionality of a system also increases the training and operating effort — or the system is easy to use, but is powerless, and must be reporposed for high demands beyond its limits.
      Quite different Processwire : You do not have to learn a new native language, you don’t have to fight plugin hell and mess around with the loop, you don’t have to torment yourself with system-generated front-end code or even learn an entierly new, old PHP framework .
      All our basic requirements are met:
      Custom Content Types Flexible and extensible rights-management Multilanguage Intuitive backend Well curated Plugin Directory Actually working front-end editing Simple templating with 100% frontend freedom In addition, Processwire has an exceptionally friendly and helpful community. As a rule of thumb, questions are answered constructively in a few hours . The development progresses in brisk steps , the code is extremely easy to understand and simple. Processwire has a supremely powerful yet simple API , and for important things there are (not 1000) but certainly one module which at least serves as a good starting point for further development. Last but not least, the documentation is easy to understand, extensive and clever .
      Our experience shows, that you can find a quick and simple solution with Processwire, even for things like extending the rights-management — most of the time a highly complex task with other systems.
      This is also reflected positively in the user interface. The otherwise so “simple” Wordpress crumbles when coping with more complex tasks. It sumbles over its apparent simplicity and suddenly becomes complex:
       
      Old vs. New — Simple and yet complicated vs. easy and hmmm … easy
          Our experience with Processwire as first-timers
      Before we found out about Processwire, we found CraftCMS on our hunt for a better CMS. We were frustrated by the likes of Typo3, WP or Drupal like many here. CraftCMS looked very promising but as we were digging deeper into it, we found it did not met our requirements for some big projects in our pipeline that require many different locations, languages and features. Initially we were sceptical about Processwire because;
      A. CraftCMS Website (and before UiKit also the admin interface) simply locked much nicer and
      B. because it is built on top of a Framework
      It was only later, that we found out, that NOT depending on a Framework is actually a very good thing in Processwire's case. Things tend to get big and cumbersome rather then lean and clean. But now we are convinced, that Processwire is far superior to any of the other CMS right now available in most cases.
      The good
      Processwire is the first CMS since time immemorial that is really fun to use (almost) from start to finish— whether API, documentation, community, modules or backend interface. Every few hours you will be pleasantly surprised and a sense of achievement is never far away. The learning curve is very flat and you’ll find your way quickly arround the system. Even modules can be created quickly without much experience.
      Processwire is not over-engineered and uses no-frills PHP code — and that’s where the power steams from: simplicity = easy to understand = less code = save = easy maintanance = faster development …
      Even complex modules in Processwire usually only consist of a few hundred lines of code — often much less. And if “hooks” cause wordpress-damaged developers a cold shiver, Hooks in Processwire are a powerful tool to expand the core. The main developer Ryan is a child prodigy — active, eloquent and helpful.
      Processwire modules are stable even across major releases as the code base is so clean, simple and small.
      There is a GraphQL Plugin — anyone said Headless-CMS?!
      Image and file handling is a pleasure:
      echo "<img src='{$speaker->image->size(400, 600)->url}' alt='{$speaker->fullname}' />"; I could go on all day …
      The not soooo good
      Separation of Stucture and Data
      The definition of the fields and templates is stored in the database, so the separation between content and system is not guaranteed. This complicates clean development with separate live- and development-environments. However, there is a migration module that looks promising — another module, which is expected to write these configurations into the file system, unfortunately nuked our system. I'm sure there will be (and maybe we will invest) some clever solutions for this in the future. Some inspiration could also be drawn here, one of the greatest Plugins for WP: https://deliciousbrains.com/wp-migrate-db-pro/
      Access rights
      The Access-Rights where missing some critical features: Editors needed to be able to edit pages in all languages on their own location, and content on the rest of the page only in their respective language. We solved it by a custom field adding a relation between a page the user and a role that we dynamically add to the user to escalate access rights;
      /** * Initialize the module. * * ProcessWire calls this when the module is loaded. For 'autoload' modules, this will be called * when ProcessWire's API is ready. As a result, this is a good place to attach hooks. */ public function init() { $this->addHookBefore('ProcessPageEdit::execute', $this, 'addDynPermission'); $this->addHookBefore('ProcessPageAdd::execute', $this, 'addDynPermission'); } public function addDynPermission(HookEvent $event) { $message = false; $page = $event->object->getPage(); $root = $page->rootParent; $user = $this->user; if ($user->template->hasField('dynroles')) { if ($message) { $this->message('User has Dynroles: '.$user->dynroles->each('{name} ')); } // for page add hook… if ($page instanceof NullPage) { // click new and it's get, save it's post… $rootid = wire('input')->get->int('parent_id') ? wire('input')->get->int('parent_id') : wire('input')->post->parent_id; if ($message) { $this->message('Searching Root '.$rootid); } $root = wire('pages')->get($rootid)->rootParent; } elseif ($page->template->hasField('dynroles')) { if ($message) { $this->message('Page "'.$page->name.'" has Dynroles: '.$page->dynroles->each('{name} ')); } foreach ($page->get('dynroles') as $role) { if ($role->id && $user->dynroles->has($role)) { if ($message) { $this->message('Add dynamic role "'.$role->name.'" because of page "'.$page->name.'"'); } $user->addRole($role); } } } if (!($root instanceof NullPage) && $root->template->hasField('dynroles')) { if ($message) { $this->message('Root "'.$root->name.'" has dynamic roles: '.$root->dynroles->each('{name} ')); } foreach ($root->get('dynroles') as $role) { if ($role->id && $user->dynroles->has($role)) { if ($message) { $this->message('Add dynamic role "'.$role->name.'" because of root page "'.$root->name.'"'); } $user->addRole($role); } } } } } With the Droles and Access Groups Modules we were not able to find a solution.
      I thought it was hard to get absolute URLs out of the system — Ha! What a fool I was. So much for the topic of positive surprise. (Maybe you noticed, the point actually belongs to the top.)
      But while we’re at it — that I thought it would not work, was due to a somewhat incomplete documentation in a few instances. Although it is far better than many others, it still lacks useful hints at one point or another. As in the example above, however, the friendly community quickly helps here.
      processwire.com looks a bit old-fashioned and could use some marketing love. You notice the high level to moan with Processwire.
      There is no free Tesla here.
      Conclusion
      Processwire is for anyone who is upset about any Typo3, Wordpress and Drupal lunacy — a fresh breeze of air, clear water, a pure joy.
      It’s great as a CMF and Headless CMS, and we keep asking ourselves — why is it not more widely known?
      If you value simple but clean code, flexibility, stability, speed, fast development times and maximum freedom, you should definitely take a look at it.
      You have to like — or at least not hate PHP — and come to terms with the fact that the system is not over-engineerd to excess. If that’s okay with you, everything is possible — with GraphQL you can even build a completely decoupled frontend.
      We are convinced of the simplicity of Processwire and will implement future sites from now on using it as a foundation.
      Links & resources we found helpful
      API documentation and selectors API cheatsheet pretty handy, not quite complete for version 3.0 Captain Hook Overview of Hooks Weekly.PW newsletter a week, exciting Wireshell command line interface for Processwire Nice article about Processwire Plugins & Techniques that we used
      Custom Frontend Setup with Uikit 3 and SCSS, and Markup Regions Uikit Backend Theme ( github ) Oauth2 login modules In-house development Login with E-Mail Pro Fields for repeater matrix fields (infos, price tables, daily routines) Wire upgrade to update plugins and the core Wire Mail Mandrill to send mails FunctionalFields for translatable front-end texts that are not part of a content type (headings, button labels, etc.) Runtime markup for dynamic backend fields (combination of first and last name) Tracy debugger for fast debugging Textformatter OEmbed to convert Vimeo and Youtube links into embed codes HideUneditablePages thanks to @adrian  
       
    • By Peter Troeger
      Hello 🙂
      I have set up pagination on a mulitlanguage site.
      I've done this before, but this time I have a problem I can't solve.
      Pagination is activated on 'parent-template' and 'child-template' just to be sure 🙂
      This is my code:
      $children = $page->children('limit=1'); foreach($children as $child) { $title = $child->title; echo $title; } echo $children->renderPager(); The navigation is output correctly and the link look correct as well 'parent-page/page2/'.
      But when I click the link, the site seems to redirect back to 'parent-page/
      Any help would be greatly appreciated 🙂
      - Peter
×
×
  • Create New...