source: trunk/plugins/ImageManager/flickr.php @ 1316

Last change on this file since 1316 was 1192, checked in by gogo, 10 years ago

Discussion in ticket #1478

Creating Sub Classes

Addition of method Xinha.extend. This method provides a means for more "classical" sub classing within javascript. Short story,

    var Vehicle = function() { }
    Vehicle.prototype.horn = function() { alert('Toot'); }
    var Car = function()
	{
		Car.parentConstructor.call(this); // If you want to call it.
	}
    Xinha.extend(Car, Vehicle);
    Car.prototype.horn = function()
	{
		alert('Toot');
		Car.superClass.horn.call(this);  // If you want to call it.
	}

remember the "call" method of javascript is .call(<on-this-object>, arg, arg, arg ..) and that you can also use the "apply" method to pass in arguments as an array which is .apply(<on this object>, [arg, arg, arg]), and that the arguments to your method are in the "arguments" array.

Dialog Modification

Split out the setting of the localizer from the translation of HTML in source:trunk/modules/Dialogs/XinhaDialog.js by introducing a new method Xinha.Dialog::setLocalizer(), Xinha.Dialog::translateHtml() remains compatible, the localizer is optional to it.

.htaccess Security

Further additions to the .htaccess files for the demo_images in ExtendedFileManager? and ImageManager?. I think we should give consideration to just deleting these folders totally, over the last year I've had a number of instances of people coming to me with these folders filled with various malware.

File-Picker on arbitrary fields outside Xinha (ExtendedFileManager?)

Addition of a source:trunk/plugins/ExtendedFileManager/file-picker.js hijacking of the ExtendedFileManager? in the same manner as the existing source:trunk/plugins/ImageManager/image-picker.js within ImageManager?. I'm putting this n there incase somebody finds it useful, but it may need some work as I don't use it myself any more. I am likely to come up with a way to replace both ExtendedFileManager? and ImageManager? with the "Mootools FileManager", this is a very nice file manager with a similar dialog "look" to our new dialogs, and the very VERY important bonus of it being easy to upload multiple files at once with a progress indicator (using a hidden flash component to do the hard work).

ImageManager? to use hspace and vspace attributes instead of margin.

The addition of a config option to ImageManager? "UseHSpaceVSpace" which swaps out the "margin" settings for the hspace and vspace attributes. The reason for this apparent "old fashioned-ness" is that margin is less reliably honoured when the HTML is put into an email.

YouTube and Flickr added to the ImageManager?

The addition of additional data sources (aka backends or choosers) to ImageManager?, specifically "YouTube" and "Flickr".

When one or both is enabled the user can use a selector in the image manager popup to choose from images on the local server, or search for videos on YouTube, or images on Flickr.

YouTube is enabled by setting $IMConfig['YouTube'] = TRUE; when the user selects a video the large format video still is inserted into the Xinha area, with extra information on the query string.

Flickr is enabled by setting $IMConfig['Flickr']['Key'] = 'your flickr api key here';, when the user selects an image, the image is inserted into the Xinha area.

For videos especially there needs to be some extra processing to turn that into a video when the end user sees this HTML, this is done by the "smart-image.js" script in combination with the (included) swfobject. In short, on the page WHERE YOU USE THE HTML (not where you are running Xinha to edit it) you will put this

   <script type="text/javascript" src="/path/to/xinha/plugins/ImageManager/smart-image.js"></script>
   <body onload="SmartImages.replace_all();">

it will replace the still image with the video (provided javascript is on).

Smart-image will also add a little hover attribution to Flickr sourced images (ie, hover over the image an attribution link appears). If you are going to use the Flickr source, then you must make sure you are legally permitted to do so, for one, your site can not be commercial. I've provided you with the tools, just try not to shoot yourself.

New Dialog Types

Added a new Dialog type "DetachedDialog?". This "faked" dialog extends the Xinha.Dialog and is a "drop in" replacement for it, the difference is the DetachedDialog? is not associated to any instance of Xinha. No Xinha needs to be instantiated for a "plugin" to use a DetachedDialog?. Where this is useful is in leveraging off plugins to provide functionality outside of Xinha, see link-picker.js below (in Linker).

Also added a new Dialog type "DivDialog?". Similar to the DetachedDialog?, except the dialog HTML is written directly into an html element supplied to the dialog. The use of this is similar to the above, providing a means for getting a plugin "away" from Xinha to provide it's services for other things. This Dialog may need some work since it was written before the new Xinha.Dialog was created, in brief test it worked mostly. Worth keeping around as it's a pretty simple example of how a new Dialog type can be constructed by extending the existing one.

Added a "Link Picker" to leverage the Linker plugin for providing a "Browse" button next to normal input fields in order to select a link which is written into the field.

This is the initial usage of the DetachedDialog?, the basic usage of this is described in the comments in that file source:trunk/plugins/Linker/link-picker.js

Hid all dotfiles from the Linker scanner, the linker shouldn't be showing "hidden" files.

CSS fix to dTree in linker, just to make sure it's styles were not getting clobbered.

Stylist Duplicate Stylesheet Fix

Stop the Stylist from possibly adding a duplicate stylesheet into pageStyleSheets, this was creating a subtle problem in certain circumstances.

New Plugin: WysiwygWrap?

Added a new plugin WysiwygWrap, basically this wraps the content of your Xinha with some specific elements you tell it, when in Wysiwyg mode, and strips them out again when you go back to code (or submit). The idea is to make it so that, combined with an appropriate pageStyleSheet(s) you can more easily simulate in Xinha what it will "look like" when that HTML is "published" wherever it's getting published.

It takes a simple configuration of xinha.config.WysiwygWrap = { elements: [ list of the ancestor elements to insert, in order top down ] }
Example:

  xinha.config.WysiwygWrap = { elements: ['div#outer', 'div.inner'] }

will produce this in your Xinha Wysiwyg mode html

	<div id="outer">
		<div class="inner">
			** Original Xinha Content For Editing Here **
		</div>
	</div>

so your pageStyleSheet would just make nice CSS for those outer and inner to make the html in the Wysiwyg mode look closer to how it would look "on the site".

In practice, I'm not sure this works that well, it seemed a good idea at the time, but it can be a bit fragile.

File size: 7.9 KB
Line 
1<?php
2/**
3 * Show a list of images in a long horizontal table.
4 * @author $Author: gogo $
5 * @version $Id: images.php 877 2007-08-12 15:50:03Z gogo $
6 * @package ImageManager
7 */
8
9require_once('config.inc.php');
10
11require_once('Classes/ImageManager.php');
12require_once('Classes/Flickr.php');
13
14// Search for youtube videos
15$opts = array(
16              'per_page'=> 20,
17              'sort'   => 'relevance',             
18              'extras' => 'license,owner_name,tags',
19              'license' => @$_REQUEST['flkLicense'] ? $_REQUEST['flkLicense'] : flickr_get_default_usage_id(),             
20              );
21
22if(@$_REQUEST['flkSearch'])
23{
24  $opts['text'] = $_REQUEST['flkSearch'];
25}
26
27if(@$_REQUEST['flkUsername'])
28{
29  $user_id = flickr_get_user_id($_REQUEST['flkUsername']);
30  if($user_id)
31  {
32    $opts['user_id'] = $user_id;
33  }
34}
35
36$data = flickr_request('flickr.photos.search', $opts);
37
38
39$records = $data['photos']['photo'];
40
41// For future purposes, we may want an image manager
42$relative = '/';
43$manager = new ImageManager($IMConfig);
44
45/* ================= OUTPUT/DRAW FUNCTIONS ======================= */
46
47
48function rip_flickr_data($record)
49
50  $lics = flickr_get_licenses();
51  // echo '<pre>'; print_r($lics);  die();
52 
53  $title = $record['title'];
54  $license = $lics[$record['license']];
55 
56  // echo '<pre>';print_r($license); die();
57 
58  $description = '';
59  $sizes = flickr_request('flickr.photos.getSizes', array('photo_id' => $record['id']));
60  $sizes = $sizes['sizes'];
61  $thumbs = array(); // w:h => array( file, file, file)
62  $largest = array(0,'', 0, 0);   
63  $smallest = array(3000*3000,'', 3000, 3000); // Ok, hacky, sosumi
64 
65  foreach($sizes['size'] as $thumb)
66  {
67    if($thumb['label'] == 'Square') continue; // These are a little smaller than default
68    if(!isset($thumbs["{$thumb['width']}x{$thumb['height']}"]))
69    {
70      $thumbs["{$thumb['width']}x{$thumb['height']}"]  = array();
71     
72      if(($thumb['width'] * $thumb['height']) > $largest[0])
73        $largest = array($thumb['width'] * $thumb['height'], $thumb['width'] . 'x' . $thumb['height'], $thumb['width'] , $thumb['height']);
74     
75      if(($thumb['width'] * $thumb['height']) < $smallest[0])
76        $smallest = array($thumb['width'] * $thumb['height'], $thumb['width'] . 'x' . $thumb['height'], $thumb['width'] , $thumb['height']);
77    }
78    $thumbs["{$thumb['width']}x{$thumb['height']}"][] = $thumb;
79   
80  }
81
82  // Find the main image link
83  $mainImage = $thumbs[$largest[1]];
84  $mainImage = array_pop($mainImage);
85 
86  // Find the thumb image link
87  $thumbImage = $thumbs[$smallest[1]];
88  $thumbImage = array_pop($thumbImage);
89 
90  // Final image to pass to manager (use query param to record the embed url)
91  $combinedImage = $mainImage['source'] .
92  '?x-flickr-photo='.rawurlencode($record['id']) .
93  '&x-lic='.rawurlencode($license['x-id'])   .
94  '&x-uid='.rawurlencode($record['owner'])       . 
95  '&x-by='.rawurlencode($record['ownername'])    .   
96  '&x-tn='.rawurlencode($thumbImage['source']);
97 
98 
99  return array
100  (
101   'title'         => $title,
102   'description'   => $description,
103   'dimensions'    => "{$mainImage['width']}x{$mainImage['height']}",
104   'license'       => $license,
105   'mainImage'     => $mainImage['source'],
106   'thumbImage'    => $thumbImage['source'],
107   'combinedImage' => $combinedImage,
108   
109   'smallest' => $smallest,
110   'largest'  => $largest,
111   'thumbs'   => $thumbs,   
112  );
113}
114                           
115function drawFiles($list, &$manager)
116{
117        global $relative;
118        global $IMConfig;
119$IMConfig['ViewMode'] = 'thumbs';
120    switch($IMConfig['ViewMode'])
121    {
122      case 'details':
123      {
124       
125        ?>
126        <script language="Javascript">
127          <!--
128            function showPreview(f_url)
129            {             
130              window.parent.document.getElementById('f_preview').src = window.parent._backend_url + '__function=thumbs&img=' + encodeURIComponent(f_url);
131            }
132          //-->
133        </script>
134        <table class="listview">
135        <thead>
136        <tr><th>Title</th><th>Description</th><th>Dimensions</th></tr></thead>
137        <tbody>
138          <?php
139          foreach($list as $record)
140          {
141           
142            extract(rip_flickr_data($record));
143           
144            ?>
145            <tr>
146              <th><a href="#" class="thumb" style="cursor: pointer;" onclick="selectImage('<?php echo xinha_js_encode($combinedImage)?>', '<?php echo xinha_js_encode($title); ?>', <?php echo $largest[2];?>, <?php echo $largest[3]; ?>);return false;" title="<?php echo htmlspecialchars($title); ?> - <?php echo htmlspecialchars($dimensions); ?>" onmouseover="showPreview('<?php echo xinha_js_encode($combinedImage);?>')" onmouseout="showPreview(window.parent.document.getElementById('f_url').value)" ><?php echo htmlspecialchars($title) ?></a></th>
147              <td><?php echo htmlspecialchars($description); ?></td>
148              <td><?php echo htmlspecialchars($dimensions); ?>             
149            </tr>
150            <?php       
151          }
152          ?>
153        </tbody>
154        </table>
155        <?php
156      }     
157      break;
158     
159      case 'thumbs':
160      default      :
161      {
162        foreach($list as $record)
163        {
164          extract(rip_flickr_data($record));
165          ?>
166          <div class="thumb_holder" id="holder_<?php echo asc2hex($combinedImage) ?>">           
167            <a href="#" class="thumb" style="cursor: pointer;" onclick="selectImage('<?php echo xinha_js_encode($combinedImage)?>', '<?php echo xinha_js_encode($title); ?>', <?php echo $largest[2];?>, <?php echo $largest[3]; ?>);return false;" title="<?php echo htmlspecialchars($title); ?> - <?php echo htmlspecialchars($dimensions); ?>">
168              <img src="<?php print $thumbImage ?>" alt="<?php echo $title; ?> - <?php echo htmlspecialchars($dimensions); ?>"/>             
169            </a>
170            <div class="flk-license"><a href="<?php echo $license['url'] ?>" target="_blank"><?php echo htmlspecialchars($license['name']) ?></a></div>
171          </div>
172          <?php
173        }
174      }
175    }
176}//function drawFiles
177
178
179
180/**
181 * No directories and no files.
182 */
183function drawNoResults()
184{
185?>
186<div class="noResult">No Photos Found</div>
187<?php
188}
189
190/**
191 * No directories and no files.
192 */
193function drawErrorBase(&$manager)
194{
195?>
196<div class="error"><span>Invalid base directory:</span> <?php echo $manager->config['images_dir']; ?></div>
197<?php
198}
199
200/**
201 * Utility to convert ascii string to hex
202 */
203function asc2hex ($temp)
204{
205  $len = strlen($temp);
206  $data = "";
207  for ($i=0; $i<$len; $i++) $data.=sprintf("%02x",ord(substr($temp,$i,1)));
208  return $data;
209}
210
211?>
212<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
213
214<html>
215<head>
216        <title>Flickr Picture List</title>
217  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
218        <link href="<?php print $IMConfig['base_url'];?>assets/imagelist.css" rel="stylesheet" type="text/css" />
219  <script type="text/javascript">
220   _backend_url = "<?php print $IMConfig['backend_url']; ?>";
221  </script>
222
223<script type="text/javascript" src="<?php print $IMConfig['base_url'];?>assets/dialog.js"></script>
224<script type="text/javascript">
225/*<![CDATA[*/
226
227        if(window.top)
228    HTMLArea = Xinha    = window.top.Xinha;
229
230        function hideMessage()
231        {
232                var topDoc = window.top.document;
233                var messages = topDoc.getElementById('messages');
234                if(messages)
235                        messages.style.display = "none";
236        }
237
238        init = function()
239        {
240          __dlg_translate('ImageManager');
241                hideMessage();
242                var topDoc = window.top.document;
243
244//    update_selected();
245        }       
246       
247/*]]>*/
248</script>
249<script type="text/javascript" src="<?php print $IMConfig['base_url'];?>assets/images.js"></script>
250<script type="text/javascript" src="../../popups/popup.js"></script>
251<script type="text/javascript" src="assets/popup.js"></script>
252
253</head>
254
255<body class="flickr">
256<?php if ($manager->isValidBase() == false) { drawErrorBase($manager); }
257        elseif(count($records)) { ?>
258
259        <?php drawFiles($records, $manager); ?>
260
261<?php } else { drawNoResults(); } ?>
262</body>
263</html>
Note: See TracBrowser for help on using the repository browser.