add coverflow appendix

diff --git a/en/images/appendix-coverflow/coverflow_2-300x170.gif b/en/images/appendix-coverflow/coverflow_2-300x170.gif
new file mode 100644 (file)
index 0000000..6c48f52
Binary files /dev/null and b/en/images/appendix-coverflow/coverflow_2-300x170.gif differ

diff --git a/en/manual.xml b/en/manual.xml
index c9b7226..0dd8f68 100644 (file)
--- a/en/manual.xml
+++ b/en/manual.xml
@@ -45771,6 +45771,88 @@ http://www.loc.gov/standards/marcxml/schema/MARC21slim.xsd
       </section>
     </section>
   </chapter>
+  <appendix id="coverflow">
+
+      <appendixinfo>
+        <authorgroup>
+          <author>
+            <firstname>Kyle</firstname>
+            <surname>Hall</surname>
+            <affiliation>
+              <orgname>ByWater Solutions</orgname>
+            </affiliation>
+          </author>
+          
+          <editor>
+            <firstname>Nicole C.</firstname>
+            <surname>Engard</surname>
+          </editor>
+        </authorgroup>
+        
+        <pubdate>2014</pubdate>
+      </appendixinfo>
+    <title>New titles slider for OPAC</title>
+    <para>Often times libraries will want to add a flowing widget with new materials at the library
+      to their main public catalog page.  To do this you can use a widget from any number of
+      services (usually for a cost) or you can <link linkend="pluginsystem">enable plugins</link> in
+      Koha and use the <ulink
+        url="http://git.bywatersolutions.com/koha-plugins.git/shortlog/refs/heads/cover_flow">Cover
+        Flow plugin</ulink> which is based on the <ulink
+        url="https://github.com/drien/jquery-flipster">Flipster</ulink>, a responsive jQuery
+      coverflow plugin.</para>
+    <para>Once the plugin is installed, the steps to get your coverflow to show up are as
+      follows:</para>
+    <para>First, you need to create one or more public reports for your coverflow widget or widgets
+      to be based on. This is how the plugin knows what the content of your widget should contain.
+      Each report needs only three columns; title, biblionumber, and isbn. It is important that you
+      have a good and valid isbn, as that is the datum used to actually fetch the cover. In the
+      iteration of the plugin, we are using Amazon cover images, but I believe in the end I will
+      make the cover image fetcher configurable so we can use any data source for cover image
+      fetching.</para>
+    <para>Second, we need to configure the plugin. The plugin configuration is a single text area
+      that uses YAML ( actually, it’s JSON, whcih is a subset of YAML ) to store the configuration
+      options. In this example it looks like
+      this:<programlisting>- id: 42
+  selector: #coverflow
+  options:
+  style: coverflow</programlisting></para>
+    <para>In this example, we are telling the plugin to use the report with id 42, and use it to
+      create a coverflow widget to replace the HTML element with the id “coverflow”. The options
+      list is passed directly to Flipster, so any options supported by Flipster can be set from the
+      plugin configuration! In fact, in addition to the traditional coverflow, Flipster has a
+      “carousel” mode which is a much more compact version of the coverflow. You can also configure
+      which cover the widget will start on, among other options.</para>
+    <para>At the time the plugins options are saved or updated, the plugin will then generate some
+      minified JavaScript code that is automatically stored in the Koha system preference
+      OpacUserJS. Here is an example of the
+      output:<programlisting>/* JS for Koha CoverFlow Plugin 
+ This JS was added automatically by installing the CoverFlow plugin
+ Please do not modify */$(document).ready(function(){$.getScript("/plugin/Koha/Plugin/Com/ByWaterSolutions/CoverFlow/jquery-flipster/src/js/jquery.flipster.min.js",function(data,textStatus,jqxhr){$("head").append("&lt;link id='flipster-css' href='/plugin/Koha/Plugin/Com/ByWaterSolutions/CoverFlow/jquery-flipster/src/css/jquery.flipster.min.css' type='text/css' rel='stylesheet' /&gt;");$('#coverflow').load("/coverflow.pl?id=42",function(){var opt={'items':'.item','minfactor':15,'distribution':1.5,'scalethreshold':0,'staticbelowthreshold':false,'titleclass':'itemTitle','selectedclass':'selectedItem','scrollactive':true,'step':{'limit':4,'width':10,'scale':true}};$('#coverflow').flipster({style:'coverflow',});});});});
+/* End of JS for Koha CoverFlow Plugin */</programlisting></para>
+    <para>Why do this? For speed! Rather than regenerating this code each and every time the page
+      loads, we can generate it once, and use it over and over again.</para>
+    <para>If you inspect the code closely, you’ll notice it references a script “coverflow.pl”. This
+      is a script that is included with the coverflow plugin. Since we need to access this from the
+      OPAC ( and we don’t want to set off any XSS attack alarms ), we need to modify the web server
+      configuration for the public catalog and add the followup to
+      it:<programlisting>ScriptAlias /coverflow.pl "/var/lib/koha/mykoha/plugins/Koha/Plugin/Com/ByWaterSolutions/CoverFlow/coverflow.pl"</programlisting></para>
+    <para>This line gives us access to the coverflow.pl script from the OPAC. This script retrieves
+      the report data and passes it back to the public catalog for creating the coverflow widget.
+      Koha::Cache is supported in order to make the widget load as quickly as possible!</para>
+    <para>The final step is to put your selector element somewhere in your public catalog. In this
+      example, I put the following in the system preference
+      OpacMainUserBlock:<programlisting>&lt;span id="coverflow"&gt;Loading...&lt;/span&gt;</programlisting></para>
+    <para>Once that is in place, you need only refresh your OPAC page, and there you have it, your
+      very own catalog coverflow widget! Not only do these coverflows look great on a computer
+      screen, but they look great on mobile platforms as well, and are even touch responsive!<screenshot>
+        <screeninfo>Coverflow Widget</screeninfo>
+        <mediaobject>
+          <imageobject>
+            <imagedata fileref="images/appendix-coverflow/coverflow_2-300x170.gif"/>
+          </imageobject>
+        </mediaobject>
+      </screenshot></para>
+  </appendix>
 
   <appendix id="sysprefdefaults">
     <title>System Preference Defaults</title>