Skip to content

Commit

Permalink
[Base][Foundation] Refactor video for size and alignment (#620)
Browse files Browse the repository at this point in the history 
* [Base][Foundation] Refactor video for size and alignment

* Refactor to id.o.author

* Re add the copyrights
  • Loading branch information
@DorienD @loetie
DorienD authored and loetie committed Sep 12, 2019
1 parent 3ec0f0f commit 8c089e6
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 64 deletions.
9 changes: 9 additions & 0 deletions modules/mod_ginger_base/templates/media/_caption.tpl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{% if caption or id.o.actor %}
<figcaption>
{% if caption == "-" %}{% else %}
<p>{{ caption }}{% if id.o.author %} {_ By: _} <a href="{{ id.o.author[1]].page_url }}">{{ id.o.author[1]].title }}</a>{% endif %}</p>
{% endif %}
{% include "copyrights/copyrights.tpl" %}
{% include "person/actors.tpl" title=_"With:" %}
</figcaption>
{% endif %}
58 changes: 25 additions & 33 deletions modules/mod_ginger_base/templates/media/media.image.tpl
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,31 @@
{% with
caption|default:m.rsc[id].summary,
(sizename == "middle")|if:"medium":sizename
as
caption,
sizename
%}
<figure class="align-{{ align }}" >
{% with
caption|default:m.rsc[id].summary,
(sizename == "middle")|if:"medium":sizename
as
caption,
sizename
%}
{% if link_url %}
<a href="{{ link_url }}" class="media--image {{ extraClasses }}" target="_blank">
{% elseif link %}
<a href="{{ id.page_url }}" class="media--image {{ extraClasses }}"{% if id.title %}title="{{ id.title }}"{% elif caption %}title = "{{ caption }}"{% endif %}>
{% if link_url %}
<a href="{{ link_url }}" class="media--image {{ extraClasses }}" target="_blank">
{% elseif link %}
<a href="{{ id.page_url }}" class="media--image {{ extraClasses }}"{% if id.title %}title="{{ id.title }}"{% elif caption %}title = "{{ caption }}"{% endif %}>
{% else %}
<a href="{% image_url id.id %}" class="media--image__lightbox lightbox" rel="body" title="{{ caption }}">
{% endif %}

{% if id.medium.width > 750 %}
{% image id.id mediaclass="landscape-"++sizename alt=id.title crop=id.crop_center %}
{% elif id.medium.height > 750 %}
{% image id.id mediaclass="portrait-"++sizename alt=id.title crop=id.crop_center %}
{% elif sizename %}
{% image id.id mediaclass="landscape-"++sizename alt=id.title crop=id.id.crop_center %}
{% else %}
<a href="{% image_url id.id %}" class="media--image__lightbox lightbox" rel="body" title="{{ caption }}">
{% image id.id mediaclass="landscape-large" alt=id.title crop=id.id.crop_center %}
{% endif %}

{% if id.medium.width > 750 %}
{% image id.id mediaclass="landscape-"++sizename alt=id.title crop=id.crop_center %}
{% elif id.medium.height > 750 %}
{% image id.id mediaclass="portrait-"++sizename alt=id.title crop=id.crop_center %}
{% elif sizename %}
{% image id.id mediaclass="landscape-"++sizename alt=id.title crop=id.id.crop_center %}
{% else %}
{% image id.id mediaclass="landscape-large" alt=id.title crop=id.id.crop_center %}
{% endif %}

</a>
</a>

{% block figcaption %}
{% if caption or id.o.actor %}
<figcaption>
<p>{{ caption }}{% if m.rsc[id].o.author %} {_ By: _} <a href="{{ m.rsc[m.rsc[id].o.author[1]].page_url }}">{{ m.rsc[m.rsc[id].o.author[1]].title }}</a>{% endif %}</p>
{% include "copyrights/copyrights.tpl" %}
{% include "person/actors.tpl" title=_"With:" %}
</figcaption>
{% endif %}
{% endblock %}
{% endwith %}
{% include "_caption.tpl" %}
</figure>
{% endwith %}
76 changes: 45 additions & 31 deletions modules/mod_ginger_base/templates/media/media.video.tpl
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,46 @@
{% with class|default:"media--video video-wrapper" as class %}
{% if id.medium.mime=="video/mp4" or id.medium.mime=="video/webm" or id.medium.mime=="video/ogg" %}
<div class="{{ class }}">
{% with id.o.depiction as dep %}
<video width="600" height="400" muted {% if dep %}poster="{% image_url dep.id mediaclass='landscape-large' %}"{% endif %} controls>
<source src="/media/attachment/{{ id.medium.filename }}" type="{{ id.medium.mime }}">
</video>
{% endwith %}
</div>
{% elseif id.medium.mime=="video/x-flv"%}
<div class="{{ class }}">
{% lib "js/vendor/flowplayer-3.2.12.min.js" %}
<a href="/media/attachment/{{ id.medium.filename }}"
style="display:block;width:560px;height:420px"
id="player">
</a>
<script>
flowplayer("player", "/lib/js/vendor/flowplayer-3.2.16.swf");
</script>
</div>
{% elseif id.medium.mime=="video/x-swv"%}
<div class="{{ class }}">
<video width="600" height="400" controls>
<object data="/media/attachment/{{ id.medium.filename }}" width="600" height="400">
<embed src="/media/attachment/{{ id.medium.filename }}" width="600" height="400">
</object>
</video>
</div>
{% else %}
{% media id %}
{% endif %}
{% with
caption|default:m.rsc[id].summary,
(sizename == "middle")|if:"medium":sizename
as
caption,
sizename
%}
<figure class="align-{{ align }} -{{ sizename }}">
<div class="video-figure__container">
{% with class|default:"media--video video-wrapper" as class %}
{% if id.medium.mime=="video/mp4" or id.medium.mime=="video/webm" or id.medium.mime=="video/ogg" %}
<div class="{{ class }}">
{% with id.o.depiction as dep %}
<video width="600" height="400" muted {% if dep %}poster="{% image_url dep.id mediaclass='landscape-large' %}"{% endif %} controls>
<source src="/media/attachment/{{ id.medium.filename }}" type="{{ id.medium.mime }}">
</video>
{% endwith %}
</div>
{% elseif id.medium.mime=="video/x-flv"%}
<div class="{{ class }}">
{% lib "js/vendor/flowplayer-3.2.12.min.js" %}
<a href="/media/attachment/{{ id.medium.filename }}"
style="display:block;width:560px;height:420px"
id="player">
</a>
<script>
flowplayer("player", "/lib/js/vendor/flowplayer-3.2.16.swf");
</script>
</div>
{% elseif id.medium.mime=="video/x-swv"%}
<div class="{{ class }}">
<video width="600" height="400" controls>
<object data="/media/attachment/{{ id.medium.filename }}" width="600" height="400">
<embed src="/media/attachment/{{ id.medium.filename }}" width="600" height="400">
</object>
</video>
</div>
{% else %}
{% media id %}
{% endif %}
{% endwith %}
</div>

{% include "media/_caption.tpl" caption=caption %}
</figure>
{% endwith %}
28 changes: 28 additions & 0 deletions modules/mod_ginger_foundation/lib/css/src/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,34 @@ h3 {
figure {
@include size(margin-bottom, 30);
position: relative;

&.-small {
width: calc((100% / 4) - 40px);
}

&.-middle,
&.-medium {
width: calc((100% / 2) - 10px);
}

&.-large {
width: 100%;
}
}

.video-figure__container {
width: 100%;
padding-top: 56.25%;
position: relative;

iframe {
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}

figcaption {
Expand Down

0 comments on commit 8c089e6

Please sign in to comment.