Changesets can be listed by changeset number.
The Git repository is here.
- Revision:
- 193
- Log:
First stage commit of Typo 4.1, modified for the ROOL site.
Includes all local modifications but a final pass needs to be
made to delete any files left over from earlier Typo versions
that shouldn't be here anymore. See the 'tags' section of the
repository for a clean Typo 4.1 tree.Note that symlinks to shared files in the RISC OS Open theme
directory have been deliberately included this time around; I
decided that on balance it was better to leave them in as
placeholders, since unlike symlinks in app/views/shared, the
Typo theme structure is not a standard Rails concept.
- Author:
- rool
- Date:
- Wed Apr 04 18:51:02 +0100 2007
- Size:
- 5514 Bytes
1 | require 'net/http' |
2 | require 'flickr/flickr' |
3 | |
4 | class Typo |
5 | class Textfilter |
6 | class Lightbox < TextFilterPlugin::MacroPost |
7 | plugin_display_name "Lightbox" |
8 | plugin_description "Automatically generate tags for images displayed in a lightbox" |
9 | |
10 | def self.help_text |
11 | %{ |
12 | You can use `<typo:lightbox>` to display images from [Flickr](http://flickr.com) |
13 | or a provided URL which, when clicked, will be shown in a lightbox using Lokesh Dhakar's |
14 | [Lightbox](http://www.huddletogether.com/projects/lightbox/) Javascript |
15 | |
16 | Example: |
17 | |
18 | <typo:lightbox img="31367273" thumbsize="thumbnail" displaysize="original"/> |
19 | <typo:lightbox src="/files/myimage.png" thumbsrc="/files/myimage-thumb.png"/> |
20 | |
21 | The first will produce an `<img>` tag showing image number 31367273 from Flickr using the thumbnail image size. The image will be linked to the original image file from Flickr. When the link is clicked, the larger picture will be overlaid |
22 | on top of the existing page instead of taking you over to the Flickr site. |
23 | The second will do the same but use the `src` URL as the large picture and the `thumbsrc` URL as the thumbnail image. |
24 | To understand what this looks like, have a peek at Lokesh Dhakar's |
25 | [examples](http://www.huddletogether.com/projects/lightbox/). |
26 | It will also have a |
27 | comment block attached if a description has been attached to the picture in Flickr or the caption attribute is used. |
28 | |
29 | For theme writers, the link is enclosed in a div tag with a "lightboxplugin" |
30 | class. Because this filter requires javascript and css include files, it |
31 | will only work with themes using the `<%= page_header %>` convenience function |
32 | in their layouts. As of this writing only Azure does this. |
33 | |
34 | This macro takes a number of parameters: |
35 | |
36 | Flickr attributes: |
37 | |
38 | * **img** The Flickr image ID of the picture that you wish to use. This shows up in the URL whenever |
39 | you're viewing a picture in Flickr; for example, the image ID for <http://flickr.com/photos/scottlaird/31367273> |
40 | is 31367273. |
41 | * **thumbsize** The image size that you'd like to display. Typically you would use square, thumbnail or small. Options are: |
42 | * square (75x75) |
43 | * thumbnail (maximum size 100 pixels) |
44 | * small (maximum size 240 pixels) |
45 | * medium (maximum size 500 pixels) |
46 | * large (maximum size 1024 pixels) |
47 | * original |
48 | * **displaysize** The image size for the lightbox overlay shown when the user clicks the thumbnail. Options are the same as for thumbsize, but typically you would use medium or large. If your image files are quite large on Flickr you probably want to avoid using original. |
49 | |
50 | Direct URL attributes: |
51 | |
52 | * **src** The URL to the picture you wish to use. |
53 | * **thumbsrc** The URL to the thumbnail you would like to use. If this is not provided, the original picture will be used with the width and height properties of the `<img>` tag set to 100x100. |
54 | |
55 | Common attributes: |
56 | |
57 | * **style** This is passed through to the enclosing `<div>` that this macro generates. To float the |
58 | image on the right, use `style="float:right"`. |
59 | * **caption** The caption displayed below the image. By default, this is Flickr's description of the image. |
60 | to disable, use `caption=""`. |
61 | * **title** The tooltip title associated with the image. Defaults to Flickr's image title. |
62 | * **alt** The alt text associated with the image. By default, this is the same as the title. |
63 | } |
64 | end |
65 | |
66 | def self.macrofilter(blog,content,attrib,params,text="") |
67 | style = attrib['style'] |
68 | caption = attrib['caption'] |
69 | title = attrib['title'] |
70 | alt = attrib['alt'] |
71 | |
72 | img = attrib['img'] |
73 | if img |
74 | thumbsize = attrib['thumbsize'] || "square" |
75 | displaysize = attrib['displaysize'] || "original" |
76 | |
77 | flickr = ::Flickr.new(FLICKR_KEY) |
78 | flickrimage = ::Flickr::Photo.new(img) |
79 | sizes = flickrimage.sizes |
80 | |
81 | thumbdetails = sizes.find {|s| s['label'].downcase == thumbsize.downcase } || sizes.first |
82 | displaydetails = sizes.find {|s| s['label'].downcase == displaysize.downcase } || sizes.first |
83 | |
84 | width = thumbdetails['width'] |
85 | height = thumbdetails['height'] |
86 | thumburl = thumbdetails['source'] |
87 | |
88 | displayurl = displaydetails['source'] |
89 | |
90 | caption ||= flickrimage.description |
91 | title ||= flickrimage.title |
92 | alt ||= title |
93 | else |
94 | thumburl = attrib['thumbsrc'] |
95 | displayurl = attrib['src'] |
96 | |
97 | if thumburl.empty? |
98 | thumburl = displayurl |
99 | width = 100 |
100 | height = 100 |
101 | else |
102 | width = height = nil |
103 | end |
104 | end |
105 | |
106 | if(caption.blank?) |
107 | captioncode="" |
108 | else |
109 | captioncode = "<p class=\"caption\" style=\"width:#{width}px\">#{caption}</p>" |
110 | end |
111 | |
112 | set_whiteboard blog, content unless content.nil? |
113 | |
114 | %{<div style="#{style}" class="lightboxplugin"><a href="#{displayurl}" rel="lightbox" title="#{title}"><img src="#{thumburl}" #{%{width="#{width}" } unless width.nil?}#{%{height="#{height}" } unless height.nil?}alt="#{alt}" title="#{title}"/></a>#{captioncode}</div>} |
115 | end |
116 | |
117 | def self.set_whiteboard(blog, content) |
118 | content.whiteboard['page_header_lightbox'] = " <link href=\"#{PATH_PREFIX}/stylesheets/lightbox.css\" media=\"all\" rel=\"Stylesheet\" type=\"text/css\" />\n <script src=\"#{PATH_PREFIX}/javascripts/lightbox.js\" type=\"text/javascript\"></script>" |
119 | end |
120 | end |
121 | end |
122 | end |