Alessandro Molina avatar Alessandro Molina committed 85e07bc

Make possible to show photos in their own page with opengraph data

Comments (0)

Files changed (7)

photos/controllers/root.py

 """Main Controller"""
 
 from tg import TGController
-from tg import expose, flash, require, url, lurl, request, redirect, validate
+from tg import expose, flash, require, url, lurl, request, redirect, validate, abort
 from tg.i18n import ugettext as _, lazy_ugettext as l_
 from tg.decorators import cached_property
 
 from photos import model
-from photos.model import DBSession, Gallery
+from photos.model import DBSession, Gallery, Photo
 
 from repoze.what import predicates
 from tgext.crud import EasyCrudRestController
     @validate(dict(gallery=SQLAEntityConverter(Gallery)), error_handler=index)
     def gallery(self, gallery):
         return dict(gallery=gallery)
+
+    @expose('genshi:photos.templates.photo')
+    @validate(dict(photo=SQLAEntityConverter(Photo)), error_handler=lambda:abort(404))
+    def photo(self, photo):
+        return dict(photo=photo)

photos/model/models.py

 from sqlalchemy.orm import backref, relation
 
 from photos.model import DeclarativeBase
-from tgext.pluggable import app_model, primary_key
+from tgext.pluggable import app_model, primary_key, plug_url
 
 from tgext.datahelpers.fields import Attachment, AttachedImage
 
 
     gallery_id = Column(Integer, ForeignKey(Gallery.uid))
     gallery = relation(Gallery, backref=backref('photos', cascade='all, delete-orphan'))
+
+    def url(self, inline):
+        if inline:
+            return self.image.url
+        else:
+            return plug_url('photos', '/photo/%s' % self.uid)

photos/partials.py

 from tg import expose
 
 @expose('genshi:photos.templates.gallery_partial')
-def gallery(gallery=None):
+def gallery(gallery=None, inline=True):
     if gallery is None:
         gallery = DBSession.query(Gallery).first()
-    return dict(gallery=gallery)
+    return dict(gallery=gallery, inline=inline)
 
 @expose('genshi:photos.templates.albums_partial')
 def albums(galleries=None):

photos/public/css/style.css

 
 #photos_gallery_title {
     margin-bottom: 16px;
+}
+
+#photos_bigphoto_title {
+    font-size: 20px;
+    margin-bottom: 20px;
+}
+
+#photos_bigphoto_picture {
+    margin-bottom: 20px;
+}
+
+#photos_bigphoto_picture > img {
+    width: 100%;
+}
+
+#photos_bigphoto_description {
+    font-size: 12px;
 }

photos/templates/gallery_partial.html

 <div xmlns:py="http://genshi.edgewall.org/">
     <a class="photos_photo" py:for="photo in gallery.photos"
-       py:if="photo.image" href="${photo.image.url}">
+       py:if="photo.image"
+       href="${photo.url(inline)}">
         <div>
             <div class="photos_image_frame">
                 <img src="${photo.image.thumb_url}"/>

photos/templates/photo.html

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:py="http://genshi.edgewall.org/"
+      xmlns:xi="http://www.w3.org/2001/XInclude">
+
+<xi:include href="../master.html" />
+
+<head>
+    <link rel="stylesheet" type="text/css" media="screen" href="${tg.url('/_pluggable/photos/css/style.css')}" />
+    <title>${photo.name}</title>
+    <meta name="description" content="${photo.description}" />
+    <meta property="og:title" content="${photo.name}" />
+    <meta property="og:description" content="${photo.description}" />
+    <meta property="og:image" content="${photo.image.url}" />
+</head>
+<body>
+    <div id="photos_bigphoto_title">${photo.name}</div>
+    <div id="photos_bigphoto_picture">
+        <img src="${photo.image.url}"/>
+    </div>
+    <div id="photos_bigphoto_description">
+        ${photo.description}
+    </div>
+</body>
+</html>
 
 setup(
     name='tgapp-photos',
-    version='0.2.2',
+    version='0.2.3',
     description='Minimal Pluggable Photogallery for TurboGears2, EasyCrudRestController based for management',
     long_description=README,
     author='Alessandro Molina',
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.