Code for improving layouts

Image
On-line with the Northern School of Permaculture

 

Make adjustment to the page layout. For use by administrators when filling in the "add content" forms:

  1. Images at the top
  2. Promotional videos
  3. Centring Open Street Maps

You may "cut 'n' paste from the code blocks directly off the screen (normally, there is no need to go into "edit" for this page).

Images at the top

Example for "short event" content type. These adjustments should now be automatically included in the form "body field"

<p>
    <img src=" [node:field_short_event_pic:0:entity:field_media_image:wide]" alt="Short event for Northern School of Permaculture" data-align="center">
</p>

Example for "venue" content type. These adjustments should now be automatically included in the form "body field"

<p>
    <img src=" [node:field_venue_pic:0:entity:field_media_image:wide]" alt="Permaculture venue" data-align="center">
</p>
 

Code for promotional videos

<p>
    <iframe class="align-center media media--type-remote-video media--view-mode-default" src="https://player.vimeo.com/video/715139771?app_id=122963" width="100%" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" title="Northern School Permaculture Design Course (Part 2)"></iframe>
</p>
<p>
    ... and participants talk about life after the course
</p>
<p>
    <iframe class="align-center media media--type-remote-video media--view-mode-default" src="https://player.vimeo.com/video/715144899?app_id=122963" width="100%" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" title="Northern School Permaculture Design Course (Part 2)"></iframe>
</p>

 

Centre Open Street Maps

<p>
    <iframe style="border:1px solid black;" data-align="center" marginheight="0" marginwidth="0" scrolling="no" src="https://www.openstreetmap.org/export/embed.html?bbox=-2.3041033744812016%2C53.57139657156677%2C-2.289512157440186%2C53.58169086112576&amp;layer=mapnik&amp;marker=53.57654402966411%2C-2.2968077659606934" width="425" height="350" frameborder="0"></iframe>
</p>
<p style="text-align:center;">
    <a href="https://www.openstreetmap.org/?mlat=53.5765&amp;mlon=-2.2968#map=16/53.5765/-2.2968"><small>View Larger Map</small></a>
</p>

This page linked here.