(almost) English, CakePhp, Top Story, Web Development

Your own cakephp file-browser for ckeditor: part 2 – images

 , , ,

In the previous post we have seen the magic of the CKEDITR.insertHtml method, and how we can use it to avoid the whole file manager thing.

The first popup was used to insert files with links to download.

Embedding images (thumbnails with link to full version) is easy too.

The controller action is even simpler:

  1. /**
  2.  * image browser, renders the (filtered) popup list of image files for the current site
  3.  * @param <string> $opener_instance, name of the field / ckeditor instance
  4.  *	    that will get the injected html for image display.
  5.  *	    You can use multiple ck editor instances on teh same page
  6.  */
  7.     function admin_imagebrowser($opener_instance){
  8. 	if($this->admin_index('img', true)) {
  9. 	    $this->set('opener_instance', $opener_instance);
  10. 	    $this->render('admin_imagebrowser', 'basic');
  11. 	}
  12.     }

The admin_index function is still our backbone, providing both the normal action and -in this case- returning the needed files array used in our popups.

The view is where things are slightly different.

in admin_imagebrowser.ctp

  1. <?php
  2. $i = 0;
  3. foreach ($assets as $asset):
  4. 	$class = null;
  5. 	if ($i++ % 2 == 0) {
  6. 		$class = ' class="altrow"';
  7. 	}
  8. ?>
  9. <?php
  10.  
  11.      if ($asset['Asset']['medium_name'] == 'Image') {
  12. 	 $thumbsize	= 's';
  13. 	 $version = 's'.DS;
  14.      } else {
  15. 	 $version = $thumbsize = '';
  16.      }
  17.  
  18.      $path = $version . $asset['Asset']['dirname'] . DS . $asset['Asset']['basename'];
  19.  
  20. ?>
  21. 	<tr<?php echo $class;?>>
  22. 		<td>
  23. 		    <?php
  24.  
  25. 			//embed thumb or show icon/image of the document type
  26.  
  27. 			// SHOW IMAGE
  28. 			if ($asset['Asset']['medium_name'] == 'Image') echo $medium->embed($path);
  29. 		    ?>
  30. 		    <?php
  31.  
  32. 			// next, show relevant data for the file, based on media type
  33. 		    ?>
  34. 		</td>
  35. 		<td colspan="7">
  36. 			<?php // common: name, file, directory, dates ?>
  37. 			<?php echo $asset['Asset']['id']; ?>, <strong><?php echo $asset['Asset']['name']; ?></strong><br>
  38. 			<?php echo $asset['Asset']['description']; ?><br>
  39. 			<?php echo $asset['Asset']['dirname']; ?>/<?php echo $asset['Asset']['basename']; ?><br>
  40. 			<?php echo __('created: <strong>', false) . $time->format('d-m-Y H:i', $asset['Asset']['created']); ?>
  41. 			<?php echo __('</strong>, last modified: <strong>', false) . $time->format('d-m-Y H:i', $asset['Asset']['modified']) .'</strong>'; ?>
  42. 			<br>
  43. 			<?php
  44. 			    // if image, show sizes
  45. 			    if($asset['Asset']['medium_name'] == 'Image' )
  46. 			    echo __('</strong>format: <strong>', true).
  47. 			    $asset['Asset']['width'] . 'x' . $asset['Asset']['height'] .' </strong>px. '. __('</strong>, size: <strong>', true)
  48. 			    . $number->toReadableSize($asset['Asset']['size']) . '</strong>';
  49.  
  50. 			?>
  51.  
  52. 		<td class="actions">
  53. 			<?php
  54. 			    //add small image left, add small image right
  55. 			    //a d d   m e d i u m   i m a g e   baseline + <p>
  56. 			    $asset['Asset']['description'] != '' ? $description = $asset['Asset']['description'] : $description = $asset['Asset']['name'];
  57.  
  58. 			    $path_m = 'm/' . $asset['Asset']['dirname'] . '/' . $asset['Asset']['basename'];
  59. 			    $path_l = 'l/' . $asset['Asset']['dirname'] . '/'. $asset['Asset']['basename'];
  60.  
  61. 			    // generated HTML to be embedded in CKeditor
  62. 			    $insert_left =
  63. 			    $html->div('imageleft',
  64.  
  65. 				$html->link(
  66. 				$medium->embed($path_m,
  67. 					array('align' => 'baseline',
  68. 					    'alt' => $asset['Asset']['name'],
  69. 					    'title' => $asset['Asset']['name'],
  70. 					    'escape' => false,
  71. 					    )
  72. 				    )
  73. 				,array('controller' => 'assets', 'action' => 'show', $asset['Asset']['id'], 'admin' => false),
  74. 				array('escape' => false,
  75. 				    'target' => '_blank'), null)
  76.  
  77. 				."</a></p><p><em>".$description."</em></p>"
  78.  
  79. 				,array('escape' => false)). '  &nbsp;'
  80. 				;
  81.  
  82. 			    echo $html->link($html->image('icons_big/Image_Left.png',
  83. 				    array('alt' => __('embed image',true), 'title' => __('embed image, align left', true), 'border' => 0, 'align' => 'absmiddle')),
  84.  
  85. 				'javascript:InsertHTML(\''. $insert_left.'\');',
  86. 				array('escape' => false,
  87.  
  88. 				),
  89. 	    			null, null, false
  90. 			    );
  91.  
  92. 			    $insert_center =
  93. 				$html->div('imagecenter',
  94. 				    "<p>".
  95. 				$html->link(
  96. 				$medium->embed($path_l,
  97. 					array('align' => 'baseline',
  98. 					    'alt' => $asset['Asset']['name'],
  99. 					    'title' => $asset['Asset']['name'],
  100. 					    'escape' => false,
  101. 					    )
  102. 				    ),
  103. 				array('controller' => 'assets', 'action' => 'show', $asset['Asset']['id'], 'admin' => false),
  104. 				array('escape' => false, 'target' => '_blank'),null,false
  105. 			        )
  106.  
  107. 				."</a></p><p><em>".$description."</em></p>"
  108. 				,array('escape' => false))
  109. 				;
  110.  
  111. 			    echo ' ';
  112. 			    echo $html->link($html->image('icons_big/Image_Center.png',
  113. 				    array('alt' => __('embed image', true), 'title' => __('embed image, big, center', true), 'border' => 0, 'align' => 'absmiddle')),
  114.  
  115. 				'javascript:InsertHTML(\''. $insert_center.'\');',
  116. 				array('escape' => false,
  117.  
  118. 				),
  119. 				 null, false
  120. 			    );
  121.  
  122. 			   $insert_right =
  123. 			   $html->div('imageright',
  124. 				    "<p>".
  125. 				$html->link(
  126. 				$medium->embed($path_m,
  127. 					array('align' => 'baseline',
  128. 					    'alt' => $asset['Asset']['name'],
  129. 					    'title' => $asset['Asset']['name'],
  130. 					    //'escape' => false,
  131. 					    )
  132. 				    ),
  133. 				array('controller' => 'assets', 'action' => 'show', $asset['Asset']['id'], 'admin' => false),
  134. 				array('escape' => false,
  135. 				    'target' => '_blank'),null,false
  136. 			        )
  137.  
  138. 				."</a></p><p><em>".$description."</em></p>"
  139. 				, array('escape' => false)). '  &nbsp;'
  140. 				;
  141.  
  142. 			    echo ' ';
  143. 			    echo $html->link($html->image('icons_big/Image_Right.png',
  144. 				    array('alt' => __('embed image',true), 'title' => __('embed image, align right', true), 'border' => 0, 'align' => 'absmiddle')),
  145.  
  146. 				'javascript:InsertHTML(\''. $insert_right.'\');',
  147. 				array('escape' => false,
  148.  
  149. 				),
  150. 	    			null, null, false
  151. 			    );
  152.  
  153. 			?>
  154. 		</td>
  155. 	</tr>
  156. <?php endforeach; ?>
  157. </table>
  158. </div>
  159. <div class="paging">
  160. 	<?php echo $paginator->prev('<< '.__('previous', true), array(), null, array('class'=>'disabled'));?>
  161.  | 	<?php echo $paginator->numbers();?>
  162. 	<?php echo $paginator->next(__('next', true).' >>', array(), null, array('class'=>'disabled'));?>
  163. </div>
  164. <div class="actions">
  165. 	<ul>
  166. 		<li><?php echo $html->link($html->image('icons/add.png', array('align' => 'absmiddle')).__('New Asset', true), array('action'=>'browser_add'), array('escape' => false), null, false); ?></li>
  167. 	</ul>
  168. </div>
popup for images embedding

This time we have 3 links (one for thumb on the left, one for thumb on the right, one for big centered thumbnail).

The main (and only) difference is the preparation of the code to be embedded – just a little bit more complex. See the variables $insert_left, $insert_right and $insert_center.

The javascript doing the actual insert in the ckeditor box is the same as before

on top of admin_imagebrowser.ctp

  1. <script type="text/javascript">
  2. <!--
  3. function InsertHTML(passed)
  4. {
  5.     var oEditor = opener.CKEDITOR.instances.<?php echo $opener_instance ?>;
  6.     // Check the active editing mode.
  7.     if ( oEditor.mode == 'wysiwyg' )
  8.     {
  9.         // Insert the desired HTML.
  10.         oEditor.insertHtml( passed ) ;
  11.     }
  12.     else
  13.         alert('<?php echo __('You must be on WYSIWYG mode!', true); ?>') ;
  14.  
  15.     window.close();
  16. }
  17. -->
  18. </script>

Next time.. webservices. Searching and embedding youtube videos and flickr images / slideshows.

$i = 0;
foreach ($assets as $asset):
$class = null;
if ($i++ % 2 == 0) {
$class = ‘ class=”altrow”‘;
}
?>
<?php

if ($asset[‘Asset’][‘medium_name’] == ‘Image’) {
$thumbsize    = ‘s’;
$version = ‘s’.DS;
} else {
$version = $thumbsize = ”;
}

$path = $version . $asset[‘Asset’][‘dirname’] . DS . $asset[‘Asset’][‘basename’];

?>
<tr<?php echo $class;?>>
<td>
<?php

//embed thumb or show icon/image of the document type

// SHOW IMAGE
if ($asset[‘Asset’][‘medium_name’] == ‘Image’) echo $medium->embed($path);
?>
<?php
////echo $path;
// next, show relevant data for the file, based on media type
?>
</td>
<td colspan=”7″>
<?php // common: name, file, directory, dates ?>
<?php echo $asset[‘Asset’][‘id’]; ?>, <strong><?php echo $asset[‘Asset’][‘name’]; ?></strong><br>
<?php echo $asset[‘Asset’][‘description’]; ?><br>
<?php echo $asset[‘Asset’][‘dirname’]; ?>/<?php echo $asset[‘Asset’][‘basename’]; ?><br>
<?php echo __(‘created: <strong>’, false) . $time->format(‘d-m-Y H:i’, $asset[‘Asset’][‘created’]); ?>
<?php echo __(‘</strong>, last modified: <strong>’, false) . $time->format(‘d-m-Y H:i’, $asset[‘Asset’][‘modified’]) .'</strong>’; ?>
<br>
<?php
// if image, show domensions
if($asset[‘Asset’][‘medium_name’] == ‘Image’ )
echo __(‘</strong>format: <strong>’, true).
$asset[‘Asset’][‘width’] . ‘x’ . $asset[‘Asset’][‘height’] .’ </strong>px. ‘. __(‘</strong>, size: <strong>’, true)
. $number->toReadableSize($asset[‘Asset’][‘size’]) . ‘</strong>’;

?>

<?php // echo $asset[‘Asset’][‘site_id’]; ?>

<td class=”actions”>
<?php
//add small image left, add small image right
//a d d   m e d i u m   i m a g e   baseline + <p>
$asset[‘Asset’][‘description’] != ” ? $description = $asset[‘Asset’][‘description’] : $description = $asset[‘Asset’][‘name’];

$path_m = ‘m/’ . $asset[‘Asset’][‘dirname’] . ‘/’ . $asset[‘Asset’][‘basename’];
$path_l = ‘l/’ . $asset[‘Asset’][‘dirname’] . ‘/’. $asset[‘Asset’][‘basename’];

// generated HTML to be embedded in CKeditor
$insert_left =
$html->div(‘imageleft’,
// “<div class=\”imageleft\”>”.”<p><a href=\”/assets/show/”.$asset[‘Asset’][‘id’]. “\” target=\”_blank\”>”.
$html->link(
$medium->embed($path_m,
array(‘align’ => ‘baseline’,
‘alt’ => $asset[‘Asset’][‘name’],
‘title’ => $asset[‘Asset’][‘name’],
‘escape’ => false,
)
)
,array(‘controller’ => ‘assets’, ‘action’ => ‘show’, $asset[‘Asset’][‘id’], ‘admin’ => false),
array(‘escape’ => false,
‘target’ => ‘_blank’), null)
//.”</a></p><p><em>”.htmlentities($description, ENT_QUOTES).”</em></p>”
.”</a></p><p><em>”.$description.”</em></p>”
//.”</div>”
,array(‘escape’ => false)). ‘  &nbsp;’
;
//debug ($insert_left);
//$insert_left =”-“;
//                  echo ‘<a href=\’javascript:InsertHTML(\”. $insert_left .’\’);\’ >’
//                . $html->image(‘icons_big/Image_Left.png’,
//                    array(‘alt’ => __(’embed image’, true), ‘title’ => __(’embed image, align left’, true), ‘border’ => 0, ‘align’ => ‘absmiddle’)).
//                  ‘</a>’;
echo $html->link($html->image(‘icons_big/Image_Left.png’,
array(‘alt’ => __(’embed image’,true), ‘title’ => __(’embed image, align left’, true), ‘border’ => 0, ‘align’ => ‘absmiddle’)),
//’javascript:;’,
‘javascript:InsertHTML(\”. $insert_left.’\’);’,
array(‘escape’ => false,
//’onclick=”javascript:InsertHTML(“‘. $insert_right .'”); return false;”‘
),
null, null, false
);

$insert_center =
$html->div(‘imagecenter’,
“<p>”.
$html->link(
$medium->embed($path_l,
array(‘align’ => ‘baseline’,
‘alt’ => $asset[‘Asset’][‘name’],
‘title’ => $asset[‘Asset’][‘name’],
‘escape’ => false,
)
),
array(‘controller’ => ‘assets’, ‘action’ => ‘show’, $asset[‘Asset’][‘id’], ‘admin’ => false),
array(‘escape’ => false, ‘target’ => ‘_blank’),null,false
)
//.”</a></p><p><em>”.htmlentities($description, ENT_QUOTES).”</em></p>”
.”</a></p><p><em>”.$description.”</em></p>”
,array(‘escape’ => false))
;

echo ‘ ‘;
echo $html->link($html->image(‘icons_big/Image_Center.png’,
array(‘alt’ => __(’embed image’, true), ‘title’ => __(’embed image, big, center’, true), ‘border’ => 0, ‘align’ => ‘absmiddle’)),
//’javascript:;’,
‘javascript:InsertHTML(\”. $insert_center.’\’);’,
array(‘escape’ => false,
//’onclick’ => ‘javascript:InsertHTML(\”. $insert_center .’\’);’
),
null, false
);

$insert_right =
$html->div(‘imageright’,
“<p>”.
$html->link(
$medium->embed($path_m,
array(‘align’ => ‘baseline’,
‘alt’ => $asset[‘Asset’][‘name’],
‘title’ => $asset[‘Asset’][‘name’],
//’escape’ => false,
)
),
array(‘controller’ => ‘assets’, ‘action’ => ‘show’, $asset[‘Asset’][‘id’], ‘admin’ => false),
array(‘escape’ => false,
‘target’ => ‘_blank’),null,false
)
//.”</a></p><p><em>”.htmlentities($description, ENT_QUOTES).”</em></p>”
.”</a></p><p><em>”.$description.”</em></p>”
, array(‘escape’ => false)). ‘  &nbsp;’
;

echo ‘ ‘;
echo $html->link($html->image(‘icons_big/Image_Right.png’,
array(‘alt’ => __(’embed image’,true), ‘title’ => __(’embed image, align right’, true), ‘border’ => 0, ‘align’ => ‘absmiddle’)),
//’javascript:;’,
‘javascript:InsertHTML(\”. $insert_right.’\’);’,
array(‘escape’ => false,
//’onclick=”javascript:InsertHTML(“‘. $insert_right .'”); return false;”‘
),
null, null, false
);

//               $html->link(
//                $medium->embed($path_m,
//                    array( //’align’ => ‘right’,
//                        ‘alt’ => $asset[‘Asset’][‘name’],
//                        ‘title’ => $asset[‘Asset’][‘name’],
//                        //’border’ => 0,
//                        ‘hspace’ => 8
//                        )
//                    ),
//                array(‘controller’ => ‘assets’, ‘action’ => ‘show’, $asset[‘Asset’][‘id’], ‘admin’ => false),
//                array(‘target’ => ‘_blank’),null,false
//                );

//                echo $html->link($html->image(‘icons_big/Image_Left.png’,
//                    array(‘alt’ => __(’embed image’, true), ‘title’ => __(’embed image, align left’, true), ‘border’ => 0, ‘align’ => ‘absmiddle’)),
//                ‘javascript:InsertHTML(\”. $insert_left .’\’); return false;\”,
//                array(‘escape’ => false,
//                 //’onclick’ =>’javascript:InsertHTML(\”. $insert_left .’\’); return false;\”
//                ),
//                null, false
//                );

//@TODO: add attach feature (not embed in text, create a relation)
// echo $ajax->link($html->image(‘icons/attachment.png’, array(‘alt’ => ‘allega’, ‘title’ => ‘allega’, ‘border’ => 0, ‘align’ => ‘absmiddle’)) .
//    __(‘Embed this file’, true), array(‘action’ => ‘attach’, $asset[‘Asset’][‘id’]), array(‘complete’ => ‘window.close();’), null, false);

//echo ‘<p>’.$insert_center .'</p>’;
?>
</td>
</tr>
<?php endforeach; ?>
</table>
</div>
<div class=”paging”>
<?php echo $paginator->prev(‘<< ‘.__(‘previous’, true), array(), null, array(‘class’=>’disabled’));?>
|     <?php echo $paginator->numbers();?>
<?php echo $paginator->next(__(‘next’, true).’ >>’, array(), null, array(‘class’=>’disabled’));?>
</div>
<div class=”actions”>
<ul>
<li><?php echo $html->link($html->image(‘icons/add.png’, array(‘align’ => ‘absmiddle’)).__(‘New Asset’, true), array(‘action’=>’browser_add’), array(‘escape’ => false), null, false); ?></li>
</ul>
</div>