lib/publify_textfilter_lightbox.rb
# frozen_string_literal: true
class PublifyApp
class Textfilter
class Lightbox < TextFilterPlugin::MacroPost
plugin_display_name "Lightbox"
plugin_description "Automatically generate tags for images displayed in a lightbox"
def self.help_text
<<~TXT
You can use `<publify:lightbox>` to display images from [Flickr](http://flickr.com)
or a provided URL which, when clicked, will be shown in a lightbox using Lokesh Dhakar's
[Lightbox](http://www.huddletogether.com/projects/lightbox/) Javascript
Example:
<publify:lightbox img="31367273" thumbsize="thumbnail" displaysize="original"/>
<publify:lightbox src="/files/myimage.png" thumbsrc="/files/myimage-thumb.png"/>
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 on top of the existing page
instead of taking you over to the Flickr site.
The second will do the same but use the `src` URL as the large
picture and the `thumbsrc` URL as the thumbnail image. To understand
what this looks like, have a peek at Lokesh Dhakar's
[examples](http://www.huddletogether.com/projects/lightbox/).
It will also have a comment block attached if a description has been
attached to the picture in Flickr or the caption attribute is used.
For theme writers, the link is enclosed in a div tag with a "lightboxplugin"
class. Because this filter requires javascript and css include files, it
will only work with themes using the `<%= page_header %>` convenience function
in their layouts. As of this writing only Azure does this.
This macro takes a number of parameters:
Flickr attributes:
* **img** The Flickr image ID of the picture that you wish to use.
This shows up in the URL whenever you're viewing a picture in Flickr;
for example, the image ID for
<http://flickr.com/photos/scottlaird/31367273> is 31367273.
* **thumbsize** The image size that you'd like to display. Typically
you would use square, thumbnail or small. Options are:
* square (75x75)
* thumbnail (maximum size 100 pixels)
* small (maximum size 240 pixels)
* medium (maximum size 500 pixels)
* large (maximum size 1024 pixels)
* original
* **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.
Direct URL attributes:
* **src** The URL to the picture you wish to use.
* **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.
Common attributes:
* **style** This is passed through to the enclosing `<div>` that this
macro generates. To float the image on the right, use
`style="float:right"`.
* **caption** The caption displayed below the image. By default,
this is Flickr's description of the image. to disable, use
`caption=""`.
* **title** The tooltip title associated with the image. Defaults to
Flickr's image title.
* **alt** The alt text associated with the image. By default, this is
the same as the title.
* **set** Add image to a set
* **class** adds an existing CSS class
TXT
end
def self.macrofilter(attrib, _text = "")
# FIXME: style is not used
# style = attrib['style']
caption = attrib["caption"]
title = attrib["title"]
alt = attrib["alt"]
theclass = attrib["class"]
set = attrib["set"]
thumburl = ""
displayurl = ""
img = attrib["img"]
if img
thumbsize = attrib["thumbsize"] || "square"
displaysize = attrib["displaysize"] || "original"
flickrimage = flickr.photos.getInfo(photo_id: img)
sizes = flickr.photos.getSizes(photo_id: img)
thumbdetails =
sizes.find { |s| s["label"].casecmp(thumbsize.downcase).zero? } || sizes.first
displaydetails =
sizes.find { |s| s["label"].casecmp(displaysize.downcase).zero? } || sizes.first
width = thumbdetails["width"]
height = thumbdetails["height"]
# use protocol-relative URL after getting the source address
# so not to break HTTPS support
thumburl = thumbdetails["source"].sub(/^https?:/, "")
displayurl = displaydetails["source"].sub(/^https?:/, "")
caption ||= flickrimage.description
title ||= flickrimage.title
alt ||= title
else
thumburl = attrib["thumbsrc"] unless attrib["thumbsrc"].nil?
displayurl = attrib["src"] unless attrib["src"].nil?
if thumburl.empty?
thumburl = displayurl
width = 100
height = 100
else
width = height = nil
end
end
rel = set.blank? ? "lightbox" : "lightbox[#{set}]"
captioncode = if caption.blank?
""
else
"<p class=\"caption\" style=\"width:#{width}px\">#{caption}</p>"
end
img_attrs = +%(src="#{thumburl}")
img_attrs << %( class="#{theclass}") if theclass
img_attrs << %( width="#{width}") if width
img_attrs << %( height="#{height}") if height
img_attrs << %( alt="#{alt}" title="#{title}")
"<a href=\"#{displayurl}\" data-toggle=\"#{rel}\" title=\"#{title}\">" \
"<img #{img_attrs}/></a>#{captioncode}"
end
end
end
end