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=""/>  </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
