add og tags in permalink view, twig/css/js cleanup

2025-10-23 18:03:17 +00:00 · 2015-10-23 16:46:50 +02:00
parent 6b48fb8462
commit c370145647
4 changed files with 190 additions and 27 deletions
--- a/lib/Alchemy/Phrasea/Controller/PermalinkController.php
+++ b/lib/Alchemy/Phrasea/Controller/PermalinkController.php
@@ -119,13 +119,51 @@ class PermalinkController extends AbstractDelivery
        throw new NotFoundHttpException('Wrong token.');
    }

-    private function doDeliverPermaview($sbas_id, $record_id, $token, $subdef)
+    private function doDeliverPermaview($sbas_id, $record_id, $token, $subdefName)
    {
        $databox = $this->getDatabox($sbas_id);
-        $record = $this->retrieveRecord($databox, $token, $record_id, $subdef);
+        $record = $this->retrieveRecord($databox, $token, $record_id, $subdefName);
+
+        // build up record ogMetaData data:
+        $ogMetaDatas = [];
+        $subdef = $record->get_subdef($subdefName);
+        $preview = $record->get_preview();
+        $thumbnail = $record->get_thumbnail();
+        $baseUrl = $this->app['request']->getScheme() . '://' . $this->app['request']->getHost();
+
+        // generate metadatas:
+        switch($record->getType() ) {
+            case 'video':
+                $ogMetaDatas['og:type'] = 'video.other';
+                $ogMetaDatas['og:image'] = $baseUrl.$thumbnail->get_url();
+                $ogMetaDatas['og:image:width'] = $thumbnail->get_width();
+                $ogMetaDatas['og:image:height'] = $thumbnail->get_height();
+                break;
+            case 'flexpaper':
+            case 'document':
+                $ogMetaDatas['og:type'] = 'article';
+                $ogMetaDatas['og:image'] = $baseUrl.$thumbnail->get_url();
+                $ogMetaDatas['og:image:width'] = $thumbnail->get_width();
+                $ogMetaDatas['og:image:height'] = $thumbnail->get_height();
+                break;
+            case 'audio':
+                $ogMetaDatas['og:type'] = 'music.song';
+                $ogMetaDatas['og:image'] = $baseUrl.$thumbnail->get_url();
+                $ogMetaDatas['og:image:width'] = $thumbnail->get_width();
+                $ogMetaDatas['og:image:height'] = $thumbnail->get_height();
+                break;
+            default:
+                $ogMetaDatas['og:type'] = 'image';
+                $ogMetaDatas['og:image'] = $preview->get_permalink()->get_url();
+                $ogMetaDatas['og:image:width'] = $subdef->get_width();
+                $ogMetaDatas['og:image:height'] = $subdef->get_height();
+                break;
+
+        }

        return $this->app['twig']->render('overview.html.twig', [
-            'subdef_name' => $subdef,
+            'ogMetaDatas'    => $ogMetaDatas,
+            'subdef'      => $subdef,
            'module_name' => 'overview',
            'module'      => 'overview',
            'view'        => 'overview',
--- a/templates/web/common/indexfloat.html.twig
+++ b/templates/web/common/indexfloat.html.twig
@@ -1,14 +1,15 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html lang="{{ app['locale'] }}">
+<!DOCTYPE html>
+<html lang="{{ app['locale'] }}" prefix="og: http://ogp.me/ns#">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{% if local_title is defined%}{{local_title}} | {% endif %}{{ app['conf'].get(['registry', 'general', 'title']) }} - {{ module_name }} </title>
-    <link type="text/css" rel="stylesheet" href="/assets/common/css/common{% if not app.debug %}.min{% endif %}.css" />
+    <meta property="og:title" content="{% if local_title is defined%}{{local_title}} | {% endif %}{{ app['conf'].get(['registry', 'general', 'title']) }} - {{ module_name }}">
+    <meta property="og:site_name" content="{{ app['conf'].get(['registry', 'general', 'title']) }}">
+    <meta property="og:url" content="{{ app['request'].getUri }}">
+    {% block rss %}{% endblock %}
    {% block stylesheet %}{% endblock %}
    {% block icon %}{% endblock %}
-    {% block rss %}{% endblock %}
    {% block javascript %}{% endblock %}
-
  </head>
  <body>
    <div id="mainContainer">
@@ -17,7 +18,6 @@
        <div id="mainContent">
                {% block content %}{% endblock %}
        </div>
-
    </div>
    {% include 'common/analytics.html.twig' %}
  </body>
--- a/templates/web/common/thumbnail.html.twig
+++ b/templates/web/common/thumbnail.html.twig
@@ -8,6 +8,9 @@
    {% if record_type == 'AUDIO_MP3' %}
        {% set original_w = 320 %}
        {% set original_h = 60 %}
+        {% set box_w = 320 %}
+        {% set box_h = 60 %}
+

        {% set fit_size = {
            "width":original_w,
--- a/templates/web/overview.html.twig
+++ b/templates/web/overview.html.twig
@@ -45,28 +45,150 @@
    <script type="text/javascript" src="/assets/vendors/jquery/jquery{% if not app.debug %}.min{% endif %}.js"></script>
    <script type="text/javascript" src="/assets/vendors/jquery-ui/jquery-ui{% if not app.debug %}.min{% endif %}.js"></script>
    <script type="text/javascript" src="/assets/permaview/js/permaview{% if not app.debug %}.min{% endif %}.js"></script>
+{% endblock %}
+
+{% block rss %}
+    {% for metaKey, metaValue in ogMetaDatas %}
+        <meta property="{{ metaKey }}" content="{{ metaValue }}" />
+    {% endfor %}
+{% endblock %}
+
+{% block stylesheet %}
+    <style type="text/css">
+        html {
+            color: white;
+            background-color: #212121;
+        }
+
+        body {
+            font-family: Helvetica, Arial, sans-serif;
+            font-size: 14px;
+            overflow: auto;
+            min-height: 100%;
+            width: 100%;
+            top: 0;
+            left: 0;
+            position: absolute;
+        }
+        #mainContainer {
+            margin-top: 32px;
+        }
+
+        h1 {
+            font-size: 26px;
+            font-weight: bold;
+            padding: 50px 0 20px;
+        }
+
+        #page {
+            width: 860px;
+            background-color: #414141;
+            padding: 0 20px;
+            margin: 0 auto;
+            height: 100%;
+        }
+        .record {
+            margin: 0 auto;
+        }
+        .preview .thumb_wrapper {
+            overflow: hidden;
+        }
+
+        .caption {
+            padding: 30px 0 20px;
+        }
+        dl {
+            margin-bottom: 20px;
+        }
+
+        dt,
+        dd {
+            line-height: 20px;
+        }
+
+        dt {
+            font-weight: bold;
+        }
+
+        dd {
+            margin-left: 10px;
+        }
+
+        .dl-horizontal {
+            *zoom: 1;
+        }
+
+        .dl-horizontal:before,
+        .dl-horizontal:after {
+            display: table;
+            line-height: 0;
+            content: "";
+        }
+
+        .dl-horizontal:after {
+            clear: both;
+        }
+
+        .dl-horizontal dt {
+            float: left;
+            width: 160px;
+            overflow: hidden;
+            clear: left;
+            text-align: right;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .dl-horizontal dd {
+            margin-left: 180px;
+        }
+        </style>
+{% endblock %}
+{% block javascript %}
+
+    {#{% if subdef.get_type() == 'VIDEO_MP4' or subdef.get_type() == 'VIDEO_FLV' %}
+        <script type="text/javascript"
+                src="{{ path('minifier', { 'f' : 'assets/jquery/jquery.js,include/jslibs/jquery.mousewheel.js' }) }}"></script>
+        <script type="text/javascript" src="{{ path('minifier', { 'f' : 'assets/jquery.ui/jquery-ui.js' }) }}"></script>
+        <script type="text/javascript" src="/include/jslibs/flowplayer/flowplayer-3.2.13.min.js"></script>
+
+    {% elseif subdef.get_type() == 'FLEXPAPER' or subdef.get_type() == 'AUDIO_MP3' %}
+        <script type="text/javascript"
+                src="{{ path('minifier', { 'f' : 'assets/jquery/jquery.js,include/jslibs/jquery.mousewheel.js,assets/swfobject/swfobject.js' }) }}"></script>
+        <script type="text/javascript" src="{{ path('minifier', { 'f' : 'assets/jquery.ui/jquery-ui.js' }) }}"></script>
+
+    {% else %}
+
+        <script type="text/javascript"
+                src="{{ path('minifier', { 'f' : 'assets/jquery/jquery.js,include/jslibs/jquery.mousewheel.js,include/jquery.image_enhancer.js' }) }}"></script>
+        <script type="text/javascript" src="{{ path('minifier', { 'f' : 'assets/jquery.ui/jquery-ui.js' }) }}"></script>
+
        <script type="text/javascript">
            $(document).ready(function () {
-        $('.preview .thumb_wrapper').width('100%');
                $('.preview.enhancable').image_enhance({
                    zoomable: true
                });
            })
        </script>
+    {% endif %}#}
+
+    <script type="text/javascript">
+        $(document).ready(function () {
+            $('.preview .thumb_wrapper').width('100%');
+        });
+    </script>
+
 {% endblock %}

-
-
-
 {% block content %}
    <div id="page" >
        <h1>{{ record.get_title() }}</h1>
+
        <div class="preview enhancable">
            {% import 'common/thumbnail.html.twig' as thumbnail %}
-        {% set subdef = record.get_subdef(subdef_name) %}
-
            {{ thumbnail.format(subdef, subdef.get_width(), subdef.get_height(), '', true, false) }}
        </div>
+
        <div class="caption">
            {% include 'common/caption.html.twig' %}
        </div>