Media Types/Display: Difference between revisions

From GNU MediaGoblin Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
Media type display pages are media type-specific
Media type display pages are media type-specific
[http://jinja.pocoo.org/docs/ Jinja2] templates.
[http://jinja.pocoo.org/docs/ Jinja2] templates defined in the media type's <code>MEDIA_MANAGER['display_template']</code>.


== Configure the media type ==
== Set the template path ==


The path for the media type display template is configured in
The path for the media type display template is configured in
the {{Cmd|MEDIA_MANAGER}} object for each media type.
the <code>MEDIA_MANAGER</code> object for each media type.
The {{Cmd|MEDIA_MANAGER}} is configured in
The <code>MEDIA_MANAGER</code> is configured in
{{Cmd|(mediagoblin/)media_types/$MEDIA_TYPE/__init__.py}}.
<code>(mediagoblin/)media_types/$MEDIA_TYPE/__init__.py</code>.

The path to the template should be relative to the
{{Cmd|mediagoblin/templates/mediagoblin}} directory.
* The path to the template should be relative to the <code>mediagoblin/templates/</code> directory.
* The standard directory for media templates is <code>mediagoblin/templates/mediagoblin/media_displays</code>

This is an example of a <code>MEDIA_MANAGER</code> dict, see the <code>display_template</code> key.

MEDIA_MANAGER = {
"human_readable": "Video",
"processor": process_video,
"sniff_handler": sniff_handler,
"display_template": "mediagoblin/media_displays/video.html",
"default_thumb": "images/media_thumbs/video.jpg",
"accepted_extensions": [
"mp4", "mov", "webm", "avi", "3gp", "3gpp", "mkv", "ogv", "m4v"]}

== Create the template ==

The medie templates are [http://jinja.pocoo.org/docs/ Jinja2]
templates that extend upon the
<code>mediagoblin/templates/mediagoblin/user_pages/media.html</code>
template. They contain media-type-specifig markup used to display
the media.

This is an example of such a template.

<pre>
{#
# GNU MediaGoblin -- federated, autonomous media hosting
# Copyright (C) 2011, 2012 MediaGoblin contributors. See AUTHORS.
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program. If not, see <http://www.gnu.org/licenses/>.
#}

{% extends 'mediagoblin/user_pages/media.html' %}

{% block mediagoblin_head %}
{{ super() }}
<script type="text/javascript"
src="{{ request.staticdirect('/js/extlib/video-js/video.js') }}"></script>
<link href="{{ request.staticdirect('/css/vjs-mg-skin.css') }}" rel="stylesheet">
{% endblock %}

{% block mediagoblin_media %}
<div class="video-player" style="position: relative;">
<video class="video-js vjs-mg-skin"
width="{{ media.media_data.width }}"
height="{{ media.media_data.height }}"
controls="controls"
preload="metadata"
data-setup="">
<source src="{{ request.app.public_store.file_url(
media.media_files['webm_640']) }}"
type="video/webm; codecs=&quot;vp8, vorbis&quot;" />
<div class="no_html5">
{%- trans -%}Sorry, this video will not work because
your web browser does not support HTML5
video.{%- endtrans -%}<br/>
{%- trans -%}You can get a modern web browser that
can play this video at <a href="http://getfirefox.com">
http://getfirefox.com</a>!{%- endtrans -%}
</div>
</video>
</div>
{% if 'original' in media.media_files %}
<p>
<a href="{{ request.app.public_store.file_url(
media.media_files['original']) }}">
{%- trans -%}
Original
{%- endtrans -%}
</a>
</p>
{% endif %}
{% endblock %}
</pre>

Latest revision as of 22:32, 22 June 2012

Media type display pages are media type-specific Jinja2 templates defined in the media type's MEDIA_MANAGER['display_template'].

Set the template path

The path for the media type display template is configured in the MEDIA_MANAGER object for each media type. The MEDIA_MANAGER is configured in (mediagoblin/)media_types/$MEDIA_TYPE/__init__.py.

  • The path to the template should be relative to the mediagoblin/templates/ directory.
  • The standard directory for media templates is mediagoblin/templates/mediagoblin/media_displays

This is an example of a MEDIA_MANAGER dict, see the display_template key.

MEDIA_MANAGER = {
    "human_readable": "Video",
    "processor": process_video,
    "sniff_handler": sniff_handler,
    "display_template": "mediagoblin/media_displays/video.html",
    "default_thumb": "images/media_thumbs/video.jpg",
    "accepted_extensions": [
        "mp4", "mov", "webm", "avi", "3gp", "3gpp", "mkv", "ogv", "m4v"]}

Create the template

The medie templates are Jinja2 templates that extend upon the mediagoblin/templates/mediagoblin/user_pages/media.html template. They contain media-type-specifig markup used to display the media.

This is an example of such a template.

{#
# GNU MediaGoblin -- federated, autonomous media hosting
# Copyright (C) 2011, 2012 MediaGoblin contributors.  See AUTHORS.
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program.  If not, see <http://www.gnu.org/licenses/>.
#}

{% extends 'mediagoblin/user_pages/media.html' %}

{% block mediagoblin_head %}
  {{ super() }}
  <script type="text/javascript"
  	src="{{ request.staticdirect('/js/extlib/video-js/video.js') }}"></script>
  <link href="{{ request.staticdirect('/css/vjs-mg-skin.css') }}" rel="stylesheet">
{% endblock %}

{% block mediagoblin_media %}
  <div class="video-player" style="position: relative;">
    <video class="video-js vjs-mg-skin"
	   width="{{ media.media_data.width }}"
	   height="{{ media.media_data.height }}"
	   controls="controls"
	   preload="metadata"
	   data-setup="">
      <source src="{{ request.app.public_store.file_url(
		   media.media_files['webm_640']) }}" 
	      type="video/webm; codecs="vp8, vorbis"" />
	  <div class="no_html5">
	    {%- trans -%}Sorry, this video will not work because 
	    your web browser does not support HTML5 
	    video.{%- endtrans -%}<br/>
	    {%- trans -%}You can get a modern web browser that 
	    can play this video at <a href="http://getfirefox.com">
	    http://getfirefox.com</a>!{%- endtrans -%}
	  </div>
    </video>
  </div>
  {% if 'original' in media.media_files %}
  <p>
    <a href="{{ request.app.public_store.file_url(
	     media.media_files['original']) }}">
      {%- trans -%}
        Original
      {%- endtrans -%}
    </a>
  </p>
  {% endif %}
{% endblock %}