Edinburgh GEL

Event

An event page summarises and collates a variety of information that can be used to promote an event.

By using an event content type, your content will be presented in the most appropriate format and will help present our users with a consistent approach to event promotion.

EdWeb will in the future have an event overview content type which will automatically harvest and present summaries of all your events.

Features

  • Distinct styling of event elements
  • Image support
  • Adaptive layout for mobile
  • Supports colour themes
  • Map call-to-action support
  • Further info call-to-action support
  • Event summary panel
  • Support for date ranges and single dates
  • Support for Schema.org event meta data
  • Ready to support the event overview content type for calendar and list views

Find out more about Schema.org

Further reading

Event content type preview

Choose a colour

Update
You are viewing the colour: Red (default), hex-value: #d50032

Choose viewport

      
<body class="html not-front not-logged-in one-sidebar sidebar-first page-node page-node- page-node-3249 node-type-uoe-event og-context og-context-node og-context-node-813 mlid-5720" itemscope="" itemtype="http://schema.org/WebPage">
  <div id="skip-link">
    <a href="#main-content" class="sr-only sr-only-focusable">Skip to main content</a>
  </div>
   


<div class="jumbotron headercontainer">
  <div class="container">
    <div class="row">
      <div class="col-sm-7 col-md-8">
        <a href="/"><img src="/sites/all/themes/uoe/assets/logo.png" alt="The University of Edinburgh home"></a>      </div>

      <div role="search" class="col-sm-5 col-md-4 uoe-search-block" style="display: none;">
        <p>
          <a href="//www.ed.ac.uk/schools-departments/">
            <span class="glyphicon glyphicon-chevron-right"></span>
            Schools &amp; departments
          </a>
        </p>
        <form class="form-inline uoe-search-form" action="//www.ed.ac.uk/search" method="get">
          <div class="form-group">
            <label for="uoe-search" class="sr-only">Search: </label>
            <div class="input-group">
              <input id="uoe-search" type="text" placeholder="Search" class="form-control" data-items="4" data-provide="typeahead" name="q">
              <span class="input-group-btn">
                <button class="btn btn-uoe">
                  <span class="glyphicon glyphicon-search"></span><span class="sr-only">Search</span>
                </button>
              </span>
            </div>
          </div>
        </form>
      </div>
    <span class="glyphicon glyphicon-search uoe-search-trigger" aria-hidden="true"></span><span class="sr-only">Show/hide site search</span> </div>
  </div>
</div>

  <div class="jumbotron home-hero">
              <a href="/website-programme/edweb/demonstration">
        <picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://www.ed.ac.uk/files/styles/banner_breakpoints_theme_uoe_tv_1x/public/banner/0054344c.jpg?itok=kZBoS2c5&amp;timestamp=1442566890 1x" media="only screen and (min-width: 1200px)">
<source srcset="http://www.ed.ac.uk/files/styles/banner_breakpoints_theme_uoe_desktop_1x/public/banner/0054344c.jpg?itok=XtIXdmA4&amp;timestamp=1442566890 1x" media="(min-width: 992px)">
<source srcset="http://www.ed.ac.uk/files/styles/banner_breakpoints_theme_uoe_tablet_1x/public/banner/0054344c.jpg?itok=2LTijZFG&amp;timestamp=1442566890 1x" media="(min-width: 768px)">
<source srcset="http://www.ed.ac.uk/files/styles/banner_breakpoints_theme_uoe_mobile_1x/public/banner/0054344c.jpg?itok=5pbE17WY&amp;timestamp=1442566890 1x" media="(min-width: 0px)">
<!--[if IE 9]></video><![endif]-->
<img src="http://www.ed.ac.uk/files/styles/banner_breakpoints_theme_uoe_mobile_1x/public/banner/0054344c.jpg?itok=5pbE17WY&amp;timestamp=1442566890" alt="Demonstrating EdWeb" title="">
</picture>              </a>
       
        <div class="container"><div class="titleblock">
                    <span class="sr-only">
          <a href="/website-programme/edweb/demonstration">Demonstrating EdWeb</a>: <a href="http://www.ed.ac.uk/website-programme">University Website Programme</a>        </span>
     
              <span class="h2" aria-hidden="true"><a href="http://www.ed.ac.uk/website-programme">University Website Programme</a>        </span>            <span class="h1" aria-hidden="true"><a href="/website-programme/edweb/demonstration">Demonstrating EdWeb</a>      </span>    </div></div>
      </div>

<div class="container content">

 
 
 
 
  <div class="row">
          <div class="col-sm-3 uoe-nav-panel">
          <div class="region region-sidebar-first">
    <section id="block-uoe-menu-uoe-menu-block" class="block block-uoe-menu clearfix">

     
  <h2 class="uoe-nav-trigger"></span><span class="sr-only">Toggle navigation menu</span> Menu</h2><ul class="menu nav uoe-left-nav"><li class="first last expanded active-trail uoe-published menu-item-2164"><a href="/website-programme/edweb/demonstration" class="active-trail">Demonstrating EdWeb home</a><ul class="menu nav"><li class="first last expanded active-trail expanded uoe-published menu-item-2177"><a href="/website-programme/edweb/demonstration/page-types" class="active-trail">Types of page</a><ul class="menu nav"><li class="first leaf uoe-published"><a href="/website-programme/edweb/demonstration/page-types/homepage">Homepages</a></li>
<li class="leaf uoe-published"><a href="/website-programme/edweb/demonstration/page-types/overview-pages">Overview pages</a></li>
<li class="leaf uoe-published"><a href="/website-programme/edweb/demonstration/page-types/generic-content">Generic content</a></li>
<li class="leaf active-trail uoe-published active"><a href="/website-programme/edweb/demonstration/page-types/event-listing" class="active-trail active">Event listing</a></li>
<li class="collapsed uoe-published"><a href="/website-programme/edweb/demonstration/page-types/web-forms">Web forms</a></li>
<li class="collapsed uoe-published"><a href="/website-programme/edweb/demonstration/page-types/proxies">Web application (Proxies)</a></li>
<li class="last leaf uoe-published"><a href="/website-programme/edweb/demonstration/page-types/restricted-pages" title="Page restricted to University of Edinburgh logged in users">Restricted pages<span class="glyphicon glyphicon-lock"></span><span class="sr-only"> (secured)</span></a></li>
</ul></li></ul></li></ul>
</section>
  </div>
      </div>

      <div class="col-sm-9">
   
          <div class="row breadtrail">
                  <div class="col-sm-9 col-md-10" itemprop="breadcrumb">
            <ol class="breadcrumb"><li><a href="/">Home</a></li>
<li><a href="/website-programme">Website Programme</a></li>
<li><a href="/website-programme/edweb">EdWeb CMS</a></li>
<li><a href="/website-programme/edweb/demonstration">EdWeb demonstration site</a></li>
<li><a href="/website-programme/edweb/demonstration/page-types">Types of page</a></li>
<li class="active">Event listing</li>
</ol>          </div>
                          <div class="col-sm-3 col-md-2">
             <a href="/website-programme/edweb/demonstration/contact-edweb-demo" class="btn btn-uoe btn-block contact-link">Contact us</a>          </div>
              </div>
   
    <a id="main-content" tabindex="-1"></a>
   
                        <h1 itemprop="headline" class="page-header brand">Event listing</h1>
               
      <div class="region region-content" itemprop="mainContentOfPage">
    <section id="block-system-main" class="block block-system clearfix">

     
  <article class="node node-uoe-event node-full node-3249 event with-image">
  <div class="row">
    <div id="event_body" class="event-article col-xs-12 col-sm-12 col-md-6 col-lg-7" itemprop="description">

              <div class="event-body"><p>The event content type pulls together all kinds of information about an event. This part of the page shows how 'Event page content' displays; other elements on this page are aligned to the right (on a full desktop view).</p>

<p>This example shows every possible field displayed, so you can see what they look like, but as you can see, that amount of information can be overwhelming. We recommend that you avoid this.</p>

<h2>Archiving</h2>

<p>Three days after your event ends, it will be removed from your site's navigation panel. This avoids clogging your site with out-of-date information.</p>

<p>The page itself is not archived though. Consider creating an archive section for old events.</p>

<h2>Related events</h2>

<p>You can also add related events within the event content type, and EdWeb will pull out the summary detail and display it alongside your full listing. Your event won't automatically appear as realted to that event. The related event shown form Divinity is an example - this sample event does not then appear on the Divinity site; they woudl have to choose to add it.</p>

<p>Remember that someone else may also reuse your event in such a way.</p>

<p>&nbsp;</p>

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Migrating from Polopoly?</h3>
</div>

<div class="panel-body">
<p>Events using the Polopoly Event element will be migrated to an EdWeb feature box, not the Event content type. You may wish to update your migrated site.</p>
</div>
</div>

<h2>Practical guidance</h2>

<p><a class="btn btn-lg btn-uoe" href="https://www.wiki.ed.ac.uk/display/edweb/Event+content+type"><span class="glyphicon glyphicon-info-sign"></span>Creating and editing the event content type - EdWeb training wiki [EASE login required]</a></p>
</div>
     
    </div>
    <div class="event-aside col-xs-12 col-sm-12 col-md-6 col-lg-5">
      <div class="event-information">
      <div itemscope="" itemtype="http://schema.org/Event" itemref="event_body">
                  <div class="event-image" itemprop="image"><figure class="uoe-panel-image uoe-panel-image"><picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://www.ed.ac.uk/files/styles/panel_breakpoints_theme_uoe_tv_1x/public/thumbnails/image/the_meadows.png?itok=vhga7UUp 1x" media="only screen and (min-width: 1200px)">
<source srcset="http://www.ed.ac.uk/files/styles/panel_breakpoints_theme_uoe_desktop_1x/public/thumbnails/image/the_meadows.png?itok=nbQh-kmz 1x" media="(min-width: 992px)">
<source srcset="http://www.ed.ac.uk/files/styles/panel_breakpoints_theme_uoe_tablet_1x/public/thumbnails/image/the_meadows.png?itok=K_7Eo99Q 1x" media="(min-width: 768px)">
<source srcset="http://www.ed.ac.uk/files/styles/panel_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/the_meadows.png?itok=j50oUX0p 1x" media="(min-width: 0px)">
<!--[if IE 9]></video><![endif]-->
<img src="http://www.ed.ac.uk/files/styles/panel_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/the_meadows.png?itok=j50oUX0p" alt="The Meadows" title="">
</picture></figure></div>
       
        <div class="panel panel-default event-summary-wrapper">
          <div class="event-date-title clearfix">
                          <div class="event-date"><time class="start-date date-range with-time" itemprop="startDate" datetime="2020-04-15T14:00:00+01:00">
  <span class="event-month">Apr</span>
  <span class="event-day">15</span>
  <span class="event-year">2020</span>
  <span class="event-time">14.00</span>
</time>
<span class="date-separator">-</span>
<time class="end-date date-range with-time" itemprop="endDate" datetime="2020-04-17T16:00:00+01:00">
  <span class="event-month">Apr</span>
  <span class="event-day">17</span>
  <span class="event-year">2020</span>
  <span class="event-time">16.00</span>
</time></div>
           
            <h3 class="event-title" itemprop="name">
              Event listing            </h3>
          </div>

                      <div class="panel-body event-summary">Full event listings are page types in EdWeb, but you can also reuse key information on other pages.</div>
                  </div>

                  <div class="panel panel-default event-location-wrapper">
            <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
            <div class="event-location" itemprop="location" itemscope="" itemtype="http://schema.org/Place">
                            <meta itemprop="name" content="University Website Programme offices">
              <span itemprop="address">
                <p>University Website Programme offices<br>
21 Buccleuch Place</p>
              </span>
                              <meta itemprop="sameAs" content="https://www.google.co.uk/maps/place/21+Buccleuch+Pl,+The+University+of+Edinburgh,+Edinburgh,+City+of+Edinburgh+EH8/@55.9426605,-3.1874995,17z/data=!3m1!4b1!4m2!3m1!1s0x4887c78307137853:0x965c3d72c8700a9e?hl=en">
                          </div>
          </div>
       
                  <div class="event-links-wrapper row">
                                    <div class="event-link col-xs-12 col-sm-6 col-md-6 col-lg-6">
           
            <a href="https://www.google.co.uk/maps/place/21+Buccleuch+Pl,+The+University+of+Edinburgh,+Edinburgh,+City+of+Edinburgh+EH8/@55.9426605,-3.1874995,17z/data=!3m1!4b1!4m2!3m1!1s0x4887c78307137853:0x965c3d72c8700a9e?hl=en" class="event-link-map">
              <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
              Find us on Google maps             </a>
          </div>
         
                                    <div class="event-link col-xs-12 col-sm-6 col-md-6 col-lg-6">
           
            <a href="http://www.ed.ac.uk/website-programme/about-us" class="event-link-detail" itemprop="sameAs">
              <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
              About the University Website Programme            </a>
          </div>
                  </div>
            </div>

     
    </div>
  </div>
</div></article>
</section>
  </div>

          <small class="article-published">This article was published on <time datetime="2016-11-18" itemprop="dateModified">Nov 18, 2016</time></small>
        </div>
  </div>

</div>

<footer>
            <div class="topline"></div>
              <div class="subsite-affiliations">
        <div class="container">
                  <div class="affiliation-image">
            <img src="http://www.ed.ac.uk/files/footer/is_-_1632.png" width="74" height="100" alt="Part of Informations Services">          </div>
                  <div class="affiliation-image">
            <img src="http://www.ed.ac.uk/files/footer/wa_standard_13_0.jpg" width="164" height="172" alt="Standard of Excellence web award 2013">          </div>
                  <div class="affiliation-image">
            <img src="http://www.ed.ac.uk/files/footer/connect-awards-logo_0_0.gif" width="290" height="120" alt="Holyrood ICT connect awards - shortlisted">          </div>
                </div>
      </div>
   
          <div class="subsite-footer-content">
        <div class="container">
          <div class="row">
                          <div class="col-sm-6 col-md-4">
                        <p><a class="uoe-node-link uoe-published" href="/website-programme/about-us/awards" title="Awards">Our awards - find out about the awards the University Website Programme has received</a></p>
            </div>
                          <div class="col-sm-6 col-md-4">
                <p><a href="https://www.wiki.ed.ac.uk/x/TkYzDQ">EdWeb support wiki - Practical guidance for using EdWeb [EASE login needed]</a></p>

<p><a href="https://www.wiki.ed.ac.uk/x/vh4oD">Website support wiki - Editorial advice and non-EdWeb guidance [EASE login needed]</a></p>
              </div>
                                      <div class="col-sm-6 col-md-4">
                <a href="/website-programme/edweb/demonstration/contact-edweb-demo" class="btn btn-uoe btn-sm">Contact us <span class="glyphicon glyphicon-chevron-right"></span></a>              </div>
                      </div>
        </div>
      </div>
     
    <div class="discover-uni">
    <div class="container">
      <h3>The University of Edinburgh</h3>
    </div>
  </div>
 
  <div class="footer">
    <div class="container">
      <div class="row">

        <div class="col-sm-4 col-md-4">
          <ul>
            <li><a href="http://www.ed.ac.uk/about/website/website-terms-conditions">Terms &amp; conditions</a></li>
            <li><a href="http://www.ed.ac.uk/about/website/privacy">Privacy &amp; cookies</a></li>
          </ul>
        </div>

        <div class="col-sm-4">
          <ul>
            <li><a href="http://www.ed.ac.uk/about/website/accessibility">Website accessibility</a></li>
            <li><a href="http://www.ed.ac.uk/about/website/freedom-information">Freedom of information publication scheme</a></li>
          </ul>
        </div>
                  <div class="col-sm-4 col-xs-6">
            <a href="//www.ed.ac.uk/about/mission-governance/affiliations">
              <img class="pull-right img-responsive" alt="University affiliations" src="/sites/all/themes/uoe/assets/footer-affiliations.png">
            </a>
           </div>
       
      </div>
      <div class="row">
        <div class="col-sm-4 col-sm-push-8">
          <a class="btn btn-uoe btn-sm pull-right" href="http://www.myed.ed.ac.uk/"> MyEd login <span class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
        <div class="col-sm-8 col-sm-pull-4">
          <p>
            The University of Edinburgh is a charitable body, registered in Scotland, with registration number
            SC005336, VAT Registration Number GB&nbsp;592&nbsp;9507&nbsp;00, and is acknowledged by the UK authorities as a
            “<a href="https://www.gov.uk/guidance/recognised-uk-degrees">Recognised body</a>” which has been
            granted degree awarding powers.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="container footer-copyright">
    <div class="copyright">
      <p>Unless explicitly stated otherwise, all material is copyright © The University of Edinburgh 2017.</p><br>
    </div>
  </div>

      <div class="container footer-login">
      <a rel="nofollow" class="login-link pull-right" href="/user/login?destination=node/3249"> <abbr class="initialism">CMS</abbr> login <span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
 
  </footer>



</body>