Skip to content

Commit

Permalink
Merge pull request #28 from gf-dcc/site-updates-feb2024
Browse files Browse the repository at this point in the history
Site updates feb2024
  • Loading branch information
arenasg authored Feb 9, 2024
2 parents c2c73b8 + 4d691af commit 5981e16
Show file tree
Hide file tree
Showing 17 changed files with 234 additions and 51 deletions.
62 changes: 48 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ For any pages that render out body content (eg. publication pages), a few notes:
{% include left-column-head-table.html labels=labels values=values %}
```
**NOTE:** *capture* is used here to specify the *values* content, because it allows for syntax highlighting in the editor. *assign* can be used as well, but will not provide highlighting.
- **Video** - Vimeo video support is available via the *vimeo* include file. Basic usage is as follows:
- **Video: Vimeo** - Vimeo video support is available via the *vimeo* include file. Basic usage is as follows:
```
{% include vimeo.html id="158396727" %}
```
Expand Down Expand Up @@ -235,61 +235,95 @@ For any pages that render out body content (eg. publication pages), a few notes:

† Value specified in the video's embed settings on site may override this.
‡ Requires a **Plus** account or higher.
- **Video Card** - The *vimeo card* layout essentially wraps the *vimeo* embed (described above) in a card wrapper, with the title and description (optional) displayed below it, with a *Click to enlarge* link that opens the video in a modal overlay. Note that all parameters available on the *vimeo* include are also available on the *vimeo card* include. In additional, 2 other parameters are available:
- **Video: YouTube** - YouTube video support is available via the *youtube* include file. Basic usage is as follows:
```
{% include youtube.html id="8gWMytghieg" %}
```
Sample usage with some additional parameters:
```
{% include youtube.html id="8gWMytghieg" autoplay=true mute=true start="184" %}
```

In the example above, we're indicating that the video should be muted and should autoplay, and that it should start at the 3 minute 4 second mark.

Available parameters include:

| Parameter | Supported Values | Default Value | Description
|:--------------|:------------|:------|:----------------------|
| `autoplay` | true, false | false | Automatically start playback of the video.<br>**Note:** May require `mute` to be set to `true`, depending on browser and device.
| `color` | [color name] | "white" | Color of the video controls. Options are "red" or "white".
| `controls` | true, false | true | Show/hide player controls.
| `loop` | true, false | false | Play the video again when it reaches the end, infinitely.
| `mute` | true, false | false | Mute the audio on load (can be re-enabled by user, if controls are displayed).
| `playsinline` | true, false | true | Play video inline on mobile devices instead of automatically going into fullscreen mode.
| `start` | Time in seconds | "0" (Start of video) | Used to automatically begin playback at a specific point in time.
| `cc_load_policy` | true, false | true | Whether to show closed captions
| `iv_load_policy` | true, false | true | Whether to show annotations


- **Video Card** - The *video card* layout essentially wraps either the *vimeo* or *youtube* embed files (described above) in a card wrapper, with the title and description (optional) displayed below it, with a *Click to enlarge* link that opens the video in a modal overlay. Note that all parameters available on the respective *vimeo* and *youtube* includes are also available on the video card includes. In additional, 2 other parameters are available:

| Parameter | Description
|:--------------|:------------|
| `title` | The title of the video
| `description` | Video description

***Vimeo Card***
```
{% include vimeo-card.html id="158396727" title="My Video Title" description="A short description of this video." %}
```
Note that *vimeo cards* are typically displayed within a grid context, with 2 cards per row on desktop displays. The markup for this (using bootstrap's grid) is as follows:
***YouTube Card***
```
{% include youtube-card.html id="8gWMytghieg" title="My Video Title" description="A short description of this video." %}
```
Note that video cards are typically displayed within a grid context, with 2 cards per row on desktop displays. The markup for this (using bootstrap's grid) is as follows:
```html
<div class="row mb-4">
<div class="col-md-6 mb-4">
{% include vimeo-card.html id="679370096" title="My Video Title" %}
</div>
<div class="col-md-6 mb-4">
{% include vimeo-card.html id="679368905" title="My Other Video Title" description="This video has a description." %}
{% include youtube-card.html id="8gWMytghieg" title="My Other Video Title" description="This video has a description." %}
</div>
</div>
```

- **Video Slider** - The *vimeo slider* layout creates a carousel of *vimeo* videos, with a custom display card describing the content. The slide expects an image, title, and video id, with an optional additional link that can be shown below the slide.
- **Video Slider** - The *video slider* layout creates a carousel of videos, with a custom display card describing the content. The slide expects an image, title, and video id, with an optional additional link that can be shown below the slide.

| Parameter | Description
|:--------------|:------------|
| `id` | The ID of the Vimeo video
| `id` | The ID of the video (Vimeo or YouTube)
| `type` | One of either 'vimeo' or 'youtube'
| `title` | The title of the video
| `image` | Image (typically a headshot) to be shown in the slide
| `link` | (Optional) Additional link shown below the slide
| `label` | (Optional) Label for the additional link


The slider is comprised of the 3 includes:
- vimeo-slider-start.html
- vimeo-slider-slide.html (1 or more)
- vimeo-slider-end.html
- video-slider-start.html
- video-slider-slide.html (1 or more)
- video-slider-end.html

Usage example:
```liquid
{% include vimeo-slider-start.html %}
{% include vimeo-slide.html
{% include video-slider-start.html %}
{% include video-slide.html
id="865802218"
type="vimeo"
title="Atlas Introduction with Dr. Sandro Santagata and Sarah Arena"
image="people/santagata-sandro.jpg"
link="/projects/determinants-of-immune-activity-and-molecular-features-in-brca1-2-mutation-carriers"
label="View Project"
%}
{% include vimeo-slide.html
{% include video-slide.html
id="865802218"
type="vimeo"
title="Breast Cancer Atlas with Dr. Joan Brugge"
image="people/brugge-joan.jpg"
link="/projects/determinants-of-immune-activity-and-molecular-features-in-brca1-2-mutation-carriers"
label="View Project"
%}
{% include vimeo-slider-end.html %}
{% include video-slider-end.html %}
## Publishing Notes ##
Expand Down
8 changes: 3 additions & 5 deletions _includes/data-card.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<div class="data-card">
<div class="data-card__image">
{% if include.content.image contains "http" %}
<div class="bg-img" style="background-image: url({{ include.content.image }});">
<img src="{{ site.imgbaseurl }}general/gray_thumb.jpg?w=295&h=280&fit=crop" alt="Data image" style="visibility: hidden;">
</div>
<img src="{{ include.content.image }}" alt="Data image">
{% else %}
<img src="{{ site.imgbaseurl }}{{ include.content.image }}?w=295&h=280&fit=crop" alt="Data image">
{% endif %}
<img src="{{ site.imgbaseurl }}{{ include.content.image }}?w=295&h=280&fit=crop" alt="Data image">
{% endif %}
</div>
<div class="data-card__content">
<div class="data-card__title">{{ include.content.title }}</div>
Expand Down
3 changes: 3 additions & 0 deletions _includes/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,7 @@
</li>
</ul>
</div>
<div class="site-footer__legal">
<div class="site-footer__content-container"><a href="https://accessibility.huit.harvard.edu/digital-accessibility-policy" target="_blank">Accessibility Policy</a></div>
</div>
</footer>
19 changes: 12 additions & 7 deletions _includes/vimeo-slide.html → _includes/video-slide.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
<div>
<div class="vimeo-slider__slide">
<div class="vimeo-slider__slide-content">
{% if include.type == 'vimeo' %}
{% assign videoUrl = 'https://player.vimeo.com/video/' | append: include.id %}
{% else %}
{% assign videoUrl = 'https://www.youtube.com/embed/' | append: include.id | append: '?rel=0' %}
{% endif %}
<div class="video-slider__slide">
<div class="video-slider__slide-content">
<img srcset="{{ '/assets/img/logo-gray_white.png' | relative_url }},
{{ '/assets/img/[email protected]' | relative_url }} 2x"
src="{{ '/assets/img/logo-gray_white.png' | relative_url }}"
alt="Gray Foundation" class="vimeo-slider__slide-logo">
alt="Gray Foundation" class="video-slider__slide-logo">
<div class="video-slider__slide-title">{{ include.title }}</div>
</div>
<div class="vimeo-slider__slide-thumb">
<div class="video-slider__slide-thumb">
<img src="{{ site.imgbaseurl | append: include.image }}?w=290&h=215&fit=clip" alt="">
</div>
<a href="https://player.vimeo.com/video/{{ include.id }}" class="video-card__slide-overlay" data-lity>
<a href="{{ videoUrl }}" class="video-card__slide-overlay" data-lity>
<span class="video-card__slide-play"></span>
</a>
</div>
<div class="vimeo-slider__slide-footer">
<div class="video-slider__slide-footer">
<div class="video-slider__slide-footer-title">{{ include.title }}</div>
<a href="https://player.vimeo.com/video/{{ include.id }}" class="video-card__slide-video-link" data-lity>Click to Enlarge</a>
<a href="{{ videoUrl }}" class="video-card__slide-video-link" data-lity>Click to Enlarge</a>
{% if include.link %}
<div>
{% if include.link contains 'http' %}
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
<div class="vimeo-slider">
<div class="video-slider">
<div class="carousel" data-slick='{"slidesToShow": 1, "speed": 400, "arrows": true, "dots": true}'>
19 changes: 17 additions & 2 deletions _includes/vimeo-card.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,27 @@

<div class="video-card">
{% include vimeo.html id=include.id playsinline=include.playsinline autoplay=include.autoplay byline=include.byline color=include.color controls=include.controls loop=include.loop muted=include.muted portrait=include.portrait speed=include.speed time=include.time texttrack=include.texttrack title=include.title %}
{% include vimeo.html id=include.id playsinline=include.playsinline autoplay=include.autoplay byline=include.byline color=include.color controls=include.controls loop=include.loop muted=include.muted portrait=include.portrait speed=include.speed time=include.time texttrack=include.texttrack showVimeoTitle=include.showVimeoTitle %}

{% comment %}
Values to include with the modal version of the player.
{% endcomment %}
{%- if include.time != nil %}
{% assign time = include.time %}
{% else %}
{% assign time = '0m' %}
{% endif -%}

{%- if include.texttrack != nil %}
{% assign texttrack = include.texttrack %}
{% else %}
{% assign texttrack = '0' %}
{% endif -%}

<div class="video-card__text">
{% if include.title %}
<div class="video-card__title">{{ include.title }}</div>
{% endif %}
<a href="https://player.vimeo.com/video/{{ include.id }}" class="video-card__expand-link" data-lity>Click to enlarge</a>
<a href="https://player.vimeo.com/video/{{ include.id }}?texttrack={{ texttrack }}#t={{ time }}" class="video-card__expand-link" data-lity>Click to enlarge</a>
{% if include.description %}
<div class="video-card__description">{{ include.description }}</div>
{% endif %}
Expand Down
2 changes: 1 addition & 1 deletion _includes/vimeo.html
Original file line number Diff line number Diff line change
Expand Up @@ -84,5 +84,5 @@


<div class="video-wrapper">
<iframe src="https://player.vimeo.com/video/{{ include.id }}?playsinline={{ playsinline }}&autoplay={{ autoplay }}&byline={{ byline }}&color={{ color }}&controls={{ controls }}&loop={{ loop }}&muted={{ muted }}&portrait={{ portrait }}&speed={{ speed }}&texttrack={{ texttrack }}&title={{ title }}#t={{ time }}" allowfullscreen></iframe>
<iframe src="https://player.vimeo.com/video/{{ include.id }}?playsinline={{ playsinline }}&autoplay={{ autoplay }}&byline={{ byline }}&color={{ color }}&controls={{ controls }}&loop={{ loop }}&muted={{ muted }}&portrait={{ portrait }}&speed={{ speed }}&texttrack={{ texttrack }}&title={{ title }}#t={{ time }}" allow="autoplay; fullscreen"></iframe>
</div>
33 changes: 33 additions & 0 deletions _includes/youtube-card.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@

<div class="video-card">
{% include youtube.html id=include.id playsinline=include.playsinline autoplay=include.autoplay mute=include.mute color=include.color controls=include.controls loop=include.loop start=include.start cc_load_policy=include.cc_load_policy iv_load_policy=include.iv_load_policy %}

{% comment %}
Values to include with the modal version of the player.
{% endcomment %}
{%- if include.start != nil %}
{% assign start = include.start %}
{% else %}
{% assign start = '0' %}
{% endif -%}
{%- if include.cc_load_policy != nil %}
{% assign cc_load_policy = include.cc_load_policy %}
{% else %}
{% assign cc_load_policy = '0' %}
{% endif -%}
{%- if include.iv_load_policy != nil %}
{% assign iv_load_policy = include.iv_load_policy %}
{% else %}
{% assign iv_load_policy = '1' %}
{% endif -%}

<div class="video-card__text">
{% if include.title %}
<div class="video-card__title">{{ include.title }}</div>
{% endif %}
<a href="https://www.youtube.com/embed/{{ include.id }}?cc_load_policy={{ cc_load_policy }}&iv_load_policy={{ iv_load_policy }}&start={{ start }}" class="video-card__expand-link" data-lity>Click to enlarge</a>
{% if include.description %}
<div class="video-card__description">{{ include.description }}</div>
{% endif %}
</div>
</div>
73 changes: 73 additions & 0 deletions _includes/youtube.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
{%- if include.playsinline != nil and include.playsinline == false %}
{% assign playsinline = '0' %}
{% else %}
{% assign playsinline = '1' %}
{% endif -%}

{%- if include.autoplay != nil and include.autoplay == true %}
{% assign autoplay = '1' %}
{% else %}
{% assign autoplay = '0' %}
{% endif -%}

{% comment %}
Available colors:
- red
- white
{% endcomment %}
{%- if include.color != nil %}
{% assign color = include.color %}
{% else %}
{% assign color = 'white' %}
{% endif -%}

{%- if include.controls != nil and include.controls == false %}
{% assign controls = '0' %}
{% else %}
{% assign controls = '1' %}
{% endif -%}

{%- if include.loop != nil and include.loop == true %}
{% assign loop = '1' %}
{% else %}
{% assign loop = '0' %}
{% endif -%}

{%- if include.mute != nil and include.mute == true %}
{% assign mute = '1' %}
{% else %}
{% assign mute = '0' %}
{% endif -%}

{%- if include.rel != nil and include.rel == true %}
{% assign rel = '1' %}
{% else %}
{% assign rel = '0' %}
{% endif -%}

{%- if include.cc_load_policy != nil and include.cc_load_policy == false %}
{% assign cc_load_policy = '0' %}
{% else %}
{% assign cc_load_policy = '1' %}
{% endif -%}

{% comment %}
Applied parameter values:
- 1 (default) - Annotations are shown
- 3 - Annotations are hidden
{% endcomment %}
{%- if include.iv_load_policy != nil and include.iv_load_policy == false %}
{% assign iv_load_policy = '3' %}
{% else %}
{% assign iv_load_policy = '1' %}
{% endif -%}

{%- if include.start != nil %}
{% assign start = include.start %}
{% else %}
{% assign start = '0' %}
{% endif -%}

<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/{{ include.id }}?autoplay={{ autoplay }}&mute={{ mute }}&playsinline={{ playsinline }}&color={{ color }}&controls={{ controls }}&loop={{ loop }}&rel={{ rel }}&cc_load_policy={{ cc_load_policy }}&iv_load_policy={{ iv_load_policy }}&start={{ start }}" allow="autoplay; fullscreen"></iframe>
</div>
13 changes: 8 additions & 5 deletions _pages/about.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,27 +17,30 @@ The Gray Foundation Atlas represents a consolidated resource for accessing Gray
{:.section-heading.mt-5.mt-lg-7}
<section class="offset-background mb-5 mb-lg-7">
<div class="wrapper">
{% include vimeo-slider-start.html %}
{% include vimeo-slide.html
{% include video-slider-start.html %}
{% include video-slide.html
id="866199199"
type="vimeo"
title="Atlas Introduction with Dr. Sandro Santagata and Sarah Arena"
image="people/santagata-sandro.jpg"
%}
{% include vimeo-slide.html
{% include video-slide.html
id="865802218"
type="vimeo"
title="Breast Cancer Atlas with Dr. Joan Brugge"
image="people/brugge-joan.jpg"
link="/atlas-datasets/devising-new-strategies-to-track-and-prevent-breast-cancer-development-in-brca-mutation-carriers/"
label="View Project"
%}
{% include vimeo-slide.html
{% include video-slide.html
id="866120650"
type="vimeo"
title="Ovarian Cancer Atlas with Dr. Ronny Drapkin and Dr. Tanjina Kader"
image="general/drapkin-and-kader.jpg"
link="/atlas-datasets/investigating-the-origins-and-early-diagnosis-of-ovarian-cancer/"
label="View Project"
%}
{% include vimeo-slider-end.html %}
{% include video-slider-end.html %}
</div>
</section>

Expand Down
Loading

0 comments on commit 5981e16

Please sign in to comment.