1. • CommentAuthorTeckniX
   • CommentTimeJul 9th 2009 edited

    
   It'd be nice to start having some categories on this forum - So that we could tag a post with: Issue - General - Suggestion - HowTo
   
   
   Anyway I'm starting this post to either get feedback on Widgets, if you've worked with them before, or this will become a way for me to track my widget progress
2. • CommentAuthorTeckniX
   • CommentTimeJul 9th 2009 edited

    
   To start things off, I'll go ahead and attache the PSD made in CS3, to allow you to make your own 'widget image'
   
   The font of 'Lucida Grande' 22pt regular and a letter spacing of 10 seems to be what was used.
   
   Once you've created the image, upload it to:
   app/webroot/wildflower/widgets/
   
   make sure to keep the file names consistent - To keep thins in line, I'll create an image left widget. Allowing people to have a pre-defined image left, content right design. My widget image should then be: wf_widget_image_left.png
   
   
   All widget files are located here:
   wildflower/views/elements/widgets/
   
   To make it simple, I've copied one of the existing widget and renamed it to match my image:
   wf_widget_image_left.ctp and wf_widget_image_left_config.ctp - once again naming convention is key.
   
   A widget consists off 2 files:
   - public view (wf_widget_image_left.ctp)
   - admin view (wf_widget_image_left_config.ctp)
   
   Customizing the public view, will change the look and feel of the widget for the public to see. Similarly, customizing the admin view will allow more elements to be added to a widget.
   
   If you were to stop here, you could check the admin and edit a page - You will notice that our brand new widget is already listed and can be used. Of course it would have the same functionality as the original widget, but it just goes to show how nice this CMS is :)
   
   
   ps: the file was zipped as 'psd' isn't a recognized extension on this forum
3. • CommentAuthorOliver Treend
   • CommentTimeJul 29th 2009

    
   Excuse my ignorance, but I don't even understand what these widgets are or how to use them.
   The default contact form widget doesn't work.
   
   What is the purpose of a widget?
   
   Thanks, and please excuse my ignorance of this wonderful CMS.
4. • CommentAuthorTeckniX
   • CommentTimeJul 31st 2009

    
   No problem - You can think of Widgets as re-usable templates.
   The contact form widget is actually empty, which doesn't help much. I apologize as I did not finish uploading my code, and therefore the above tutorial is incomplete.
   
   Going back to the definition of Widgets, say you wanted to have a certain layout always applied to one item on a page. And you wanted for admins to be able to create that item, without a ton of html knowledge.
   You would create a "Widget" that they could click on, enter some info and you would do all the formatting for them.
   
   I'll upload my code for the "Image Left - Content Right" template and hopefully that will help you understand what I meant.
5. • CommentAuthorTeckniX
   • CommentTimeJul 31st 2009

    
   === tutorial continues ===
   Now that you have both your admin and public view files created, let's start modifying these files.
   
   ----- wf_widget_image_left_config.ctp -------
   <h2 class="section">Editing a widget</h2>
   
   <?php
   echo $form->create('WildWidget', array('url' => '/' . Configure::read('Wildflower.prefix') . '/widgets/update', 'id' => 'edit_widget_form'));
   echo '<div class="slider_block">';
   echo '<h3>Image Left - Content Right</h3>';
   echo '<div style="width: 30%;float:left;">';
   if (empty($images)):?>
   <p>No files uploaded yet.</p>
   <?php else: ?>
   
   <ul class="file-list list">
   <?php foreach ($images as $file):
   $largeImage = WildAsset::getUploadUrl($file['WildAsset']['name']);
   if(!empty($this->data['WildWidget']['items']['image']) and $this->data['WildWidget']['items']['image'] == $largeImage):
   $css = ' selected';
   else:
   $css = '';
   endif;
   ?>
   <li id="file-<?php echo $file['WildAsset']['id']; ?>" class="actions-handle<?=$css?>">
   
   <img class="thumbnail" width="50" height="50" src="<?php echo $html->url("/wildflower/thumbnail/{$file['WildAsset']['name']}/50/50/1"); ?>" alt="<?php echo $file['WildAsset']['name']; ?>" />
   
   <h3><?php echo hsc($file['WildAsset']['name']); ?></h3>
   
   <span class="imgUrl"><?= $largeImage ?></span>
   
   <span class="cleaner"></span>
   </li>
   
   <?php endforeach; ?>
   </ul>
   <?php
   echo $this->element('wf_pagination');
   endif;
   
   echo $form->input("WildWidget.items.image", array('type' => 'hidden', 'label' => 'Image'));
   echo '</div>
   <div style="width: 65%; margin-left: 20px; display: inline; float:left;">';
   echo $form->input("WildWidget.items.text", array('type' => 'textarea', 'label' => '', 'rows'=>10, 'cols'=>60));
   echo '</div>';
   echo '</div>';
   
   echo $form->hidden('id');
   echo $form->end(__('Save', true));
   ?>
   
   <div class="cancel-edit"> <?php __('or'); ?> <?php echo $html->link(__('Cancel', true), '#CancelWidgetEdit', array('id' => 'CancelWidgetEdit')); ?></div>
   
   
   <script type="text/javascript">
   $('li.actions-handle').click(function() {
   $('li.selected').removeClass('selected');
   $(this).addClass('selected');
   $('#WildWidgetItemsImage').val($(this).children('span.imgUrl').html());
   return false;
   });
   $('li.actions-handle').hover (function() {
   $(this).addClass('hover');
   },
   function(){
   $(this).removeClass('hover');
   }
   );
   </script>
   --------------------------------------------------
   
   ------- wf_widget_image_left.ctp ---------
   <div id="image_left">
   <img src="<?=$this->webroot;?>wildflower/thumbnail/<?= end(explode('/',$data['WildWidget']['items']['image']))?>/200/1000" />
   </div>
   <div id="content_right">
   <?= $data['WildWidget']['items']['text'] ?>
   </div>
   <div class="clear"></div>
   ----------------------------------------------------
   
   Now for the image lookup to actually work, we need to snatch the code from the image insert functionality, so that we can create an array of all images.
   
   In the wild_widgets_controller.php, under the function wf_config($name, $id){}, add the following before $this->render
   
   --- code snippet ---
   $this->paginate['conditions'] = "WildAsset.mime LIKE 'image%'";
   $images = $this->paginate('WildAsset');
   $this->set('images', $images);
   -----------------------
   
   This may not be some 'proper' cakePHP/WF code, but it works :)
   
   The config file is a simple copy of the image code, this creates a list of 'usable' images and saves that image to a hidden field. The right content is a simple textarea where HTML can be entered.
   
   If you upload these files to your widget folder, you can see them working right away. For the purpose of my design, I needed the image on the left to always be 200px, and therefore I'm using the image resize functionality built-in to WF to do this. Others may have a different use.
   
   Now the beauty of this, is that you can have ANYONE create an image-left content-right page, without screwing anything up. It's as easy as selecting the image to be used and adding some content!
   
   
   As a disclaimer I am not responsible for anything that happens to your staging area if you use the code above and everything around you starts to fail/burn/drown/etc. I'm also offering my apologies as a developer to you as the consumer/wannabedeveloper about this horribly hacked code and your inability to get a promotion at work because of it :D
6. • CommentAuthorTeckniX
   • CommentTimeJul 31st 2009

    
   BUGS:
   - On the image left functionality, the paging still happens if you add ($this->paginate['limit'] = 10;) to the controller, but it's currently not working. I'll be working on fixing this asap.
7. • CommentAuthorTeckniX
   • CommentTimeJul 31st 2009

    
   As a quick fix to the image paging, I simply defined my left image widget to have:
   - height of 300px and have overflow-y: auto;
   and removed the paging call of:
   - echo $this->element('wf_pagination');
   
   Like so:
   
   ---- wf_widget_image_left_config.ctp ----
   
   echo '<h3>Image Left - Content Right</h3>';
   echo '<div style="width: 30%;float:left;height: 300px; overflow-y:auto;">';
   
   ----------------------------------------------------
   
   It's not a true fix, but works for the time being.

Wildflower CMS is the creation of Klevo
the Wildflower Logo was created by Oliver Treend