Sign In

Templates

Right-aligned image of 30% width

Insert into a <p>

<img src="/MediaContent/Pictures/FileName.jpg" alt="" class="imageRight30"/>

Read more

<a href="/Pages/FileName.aspx">Read more<span class="fa fa-caret-right"></span></a>

Three pictures on a line

It is only the first picture that is shown on small screens.

<div class="row">
   <div class="col-sm-4 col-center300">
      <div class="articleImageContainer">
         <img class="img-responsive" src="/MediaContent/Pictures/PictureFileName.jpg" alt=""/>
         <div class="articleImageCaptionContainer">
            <h5>Picture caption. Photo: NASA.</h5>
         </div>
      </div>
   </div>
   <div class="col-sm-4 col-center300 hidden-xs">
      <div class="articleImageContainer">
         <img class="img-responsive" src="/MediaContent/Pictures/PictureFileName.jpg" alt=""/>
         <div class="articleImageCaptionContainer">
            <h5>Picture caption. Photo: NASA.</h5>
         </div>
      </div>
   </div>
   <div class="col-sm-4 col-center300 hidden-xs">
      <div class="articleImageContainer">
         <img class="img-responsive" src="/MediaContent/Pictures/PictureFileName.jpg" alt=""/>
         <div class="articleImageCaptionContainer">
            <h5>Picture caption. Photo: NASA.</h5>
         </div>
      </div>
   </div>
</div>

Links to futher resources

<div class="verticalLine">
   <p style="margin-bottom: 0px;">
      <em>Relevant downloads for more information on EMCS:</em></p>
   <ul>
      <li>Type of resource:
         <a href="/MediaContent/PDF/FileName.pdf" target="_blank">Title</a> (3.5MB)</li>
   </ul>
</div>

Bulletlist

<p style="margin-bottom: 0px;">The TIME SCALE project will</p>
<ul>
   <li>Item 1.</li>
</ul>

Large picture

Large pictures are uploaded as width=800px.

<div class="articleImageContainer col-sm-12 col-center800">
   <img class="img-responsive" src="/MediaContent/Pictures/PictureFileName.jpg" alt=""/>
   <div class="articleImageCaptionContainer">
      <h5>Picture Caption. Photo: NASA.</h5>
   </div>
</div>

Video

Copy the code of the template below:

<div class="expandableVideo">
   <div class="expandableHeader collapsed" data-toggle="collapse" data-target="#video1">
      <div class="row vertical-center">
         <div class="col-xs-4" style="padding: 0px;">
            <img src="/MediaContent/Pictures/TumbFileName.jpg" alt=""/> &#160;</div>
         <div class="col-xs-8">Video caption. Video: ESA.</div>
      </div>
   </div>
</div>

<div class="collapse" id="video1" style="height: 0px;">
   <div class="expandedPart"> Video goes here. </div>
</div>

Insert a new empty Web-part and fill it with the code below, then move it inside the expande-code:

Insert -> Web part -> Media and Content -> Content Editor.

Change "Appearance -> Chrome State" from Normal to None (click Edit Web Part-button in upper right corner of Web Part).

HTML-code for YouTube Web part:

<div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RxITZSEis4I?rel=0">
   </iframe>
</div>

HTML-code for local video Web part:

<div class="embed-responsive embed-responsive-16by9">
   <video controls="1">
      <source src="/MediaContent/Videos/TIME_SCALE_WUR_water_nutrient_delivery.mp4" type="video/mp4">
      </source>
   </video>
</div>

To edit Web-part: Click the icon so the video player opens, go to the line below the video player, press Arrow-up once, and Edit Source.

Example