Nice unproductive experience : test multiple gallery scripts at once

silverstripegallerylightboxWe are quite proud here that our months old specific jquery gallery script for silverstripe -the best PHP opensource CMS  as of today, just out with a new release- is still, in my opinion, the best we could deliver to customers. In the meanwhile a troup of well intentioned contributors posted their own implementation of gallery for silverstripe cms : one of them is Aaron Carlino who has worked on upload scripts  that are very interesting for the customer experience. On Carl's gallery script, the image upload, ordering and labeling are all administered from the web site front end, which is nice. But also the gallery script he provides comes with 7 variations of the famous lightbox : in the admin you can  just choose between lightbox, shadowbox, thickbox, nyromodal, prettyphoto and fancybox, and once saved and/or published online; the front end will load the chosen lightbox variation. Interesting to try, not very useful for a customer who doesn't care which script is being used once it's properly configured.

Zoom and pan with Flash

flasshopanusing images to display products on e commerce applications can successfully be combined with jabvascript lightbox, itself including a flash zoom and pan application : flashden provides a few examples of commercial applications for a very reasonable price (10$ for this one), among which the XML configuration is an interesting way of configuring various parameters such as position of controls, initial zoom percentage and alignment, Easing value. Equally interesting is the free fla source code provided by  Kirill Edelman on his blog, that will give you a few keys if you want to investigate how everything works from the inside.

Magento product page : how to display other products from same category

Magento comes with a lot of product relationship features :  implemented as selective lists maintained for each product by the shop owner, related / cross selling and up selling backend features allow some sort of manual product linking that displays product associations on the front end. For example related products are displayed by default in the product page right column, while upsell / crosssell products are displayed on the shopping cart page. These 3 types of product associations are well explained on inchoo's blog, and  on magento 's knowledge base you'll find user instructions on how to setup   product relationship in the backend.

What we aim here is to setup an automatic  display of related products on a product view page, via the categories they belong to. We build two loops : one that gets categories the product belongs to, and another one inside that gets products of each category.

How to setup category related products in Product view :

  1. add the following code somewhere in default\template\catalog\product\view.phtml
  2. Configure the category query according to your catalog by uncommenting the following :
    • ->setPage(1, 1) : selects only one category
    • ->addFieldToFilter('level',"3") : selects only 3rd level categories
    • ->addFieldToFilter('parent_id',"3") : select only child categories of no 3
    • ->setOrder("level") : combined by setPage, returns the lowest level category
  3. please that the product loop uses the $_product variable, which can be dangerous because this name is widely used. We use it here for comodity reasons because I just took toe display code from Magento's product list view
if ($_product) {
  // get collection of categories this product is associated with
  $categories =$_product->getCategoryCollection()
  //  ->setPage(1, 1)
 //->addFieldToFilter('level',"3")					
 //->addFieldToFilter('parent_id',"3")					
 //->setOrder("level")
   ->load();
        
// if the product is associated with any category
if ($categories->count()) 
foreach ($categories as $_category)
{
  $cur_category = Mage::getModel('catalog/category')->load($_category->getId());
?>

Dans la même collection :getName()?>

addCategoryFilter($_category) ->addAttributeToSelect('small_image'); foreach ( $products as $productModel ) { $_product = Mage::getModel('catalog/product')->load($productModel->getId()); $width=135; $height=135; $_imageUrl = $this->helper('catalog/image')->init($productModel, 'small_image')->resize($width, $height); ?>
htmlEscape($_product->getName())?>
width="" height=""/> getPriceHtml($_product, true) ?> isSaleable()): ?>
__('Out of stock') ?>
getShortDescription()) ?> __('Learn More') ?>

opensource commerce : bakesale is back in the game

Great news this morning in the email : bakesale, a CAKE PHP based opensource ecommerce application, is back online with a new version scheduled mid february. Of course we don't expect a small team to compete with Magento but CAKE PHP users or learners will be delighted to find this application delievered  in a production state. New features include Some of the major features include  User Groups/Categories,  Easier Static Pages, Plugin Installer,  Theme Installer,  Discount codes. Something standard for ecommerce but worth mentionning because bakesale was among AJAX precursors in the opensource ecommerce business. Glad to be back online ?

Automatic Toc building

ausoleilbreton

Remember Wikipedia's table of content, that creates anchors and links automatically from page titles : we've enjoyed the feature on MODX CMS, an old but still efficient opensource content management system for PHP / Mysql. Two plugins are available for this software, free of course :  The Automatic Page TOC Generator plugin and the  Automatic TOC and Navbar work the same way, via a simple process that parses H1 .. H6 tags, takes HTML within, builds the table of content, and  inserts the generated table of contents anywhere in your template. Many options are available that can specify explicitly the area to be indexed or put a navbar before the heading to get bazck up to the top of the page. The result can be as shown above on the ausoleilbreton.com web site (work in progress).

Sugar CRM has gone extjs

webmail490

Combining best of both worlds : One of the most popular opensource CRM (Customer Relationship Management) software is now using extjs javscript library a lot for user interface quickies.

Developers will love documentation around various implementation of this AJAX library : Since Sugar 5.1, the search is layout out via type-ahead combo box system called QuickSearch based around ExtJS. In version 5.2, a lot of tools  feature powerful interaction javascripts, such as the email reader / composer (imazge above), or the application studio, located in  The Developer tools sub-panel that displays options to build new modules and customize existing ones. The Module Builder enables you to build custom modules and Studio enables you to customize existing modules. Creating  relationships between modules is also an option while removing default modules is as easy as performing drag and drop operations within the admin.

jQuery Parallax

diagram_parallax

Another example of useless feature that could become very useful when a critical mass of web geeks start using ti for specific image display : the jquery parallax plugin order images or elements to respond to mouse effects with a 3D effect. Stunning effect for the display of 3d Landscapes, such as displayed on the plugin homepage, or letter 3D movement, as illustrated in this example. The stephband.info author's website demonstrates a powerful implmeentation of this plugin.

Theming Magento eShop frontend : a beginner’s guide

In a previous article, We've briefly explained the four concepts behind Magento's rendering system. The last 3  entities are  perfectly understandable for web developers :

  • template (in app/design/frontend) stores HTML code for a series of twenty page types and page components, such as  catalog, navigation, shopping cart, checkout, cms.
  • Skin (in skin/frontend) stores the css stylesheets,
  • Locale stores language specific strings, in CSV format

Instanciating your own template out of Magento's default install is a child game. Our introduction article covered the automatic installation of packaged themes from Magento Connect : to perform the same task manually, you'll just have to perform a simple cut & paste operation of two basic folders :

  • template : copy / duplicate app/design/default/frontend  to app/design/frontend/YOURTHEME
  • skin : copy /duplicate skins/frontend/default to skins/frontend/YOURTHEME
    Notice at this stage that two skins are copied : you'll have to specify the skin you want in the backend System / configuration /design form, as shown below

The first entity, though, is a bit harder to understand. It is called Layou and  is coded out of raw XML format, and explained on Magento's Designer Guide.

Kaltura releases All-in-One Video Module for Drupal / WordPress

Kaltura, the platform that brought open source to video and enabled groups to edit and collaborate with online video, has released a video module for the open source Drupal CMS. Kaltura's platform includes an easily customizable set of widgets that seamlessly integrate into video applications on web platforms of any kind. Publishers can deploy existing widgets and apps or take advantage of Kaltura's open architecture in order to develop new ones. Whether you need a basic online video platform or one with a robust set of advanced features – Kaltura has a solution for you. Our open framework provides everything you need to design, develop, and deploy rapid and cost-effective video applications on any site.
Read more

Generic Data save with Zend Framework

This technical article hilights one the famous ideal goal we all want to achieve : scaffolding, CRUD, BREAD, call it what you want, all we want is to get rid of repetitive sql query writing.  Zend framework provides powerful data abstraction  and here are a few tips to use Zend_DB_Table to its best. Of course this article assumes you have an idea of MVC development with Zend Framework.

Why are we doing this ? in the course of writing ajax actions, we needed our controller to react to any POST provided by specific forms : whatever the fields in the form, we want them to be saved to our table. Code below is a specific implementation of a controller that responds to specific ajax queries. Please bear in mind that it is only provided as an example of generic query action. Other portions of code are not optimal, such as viewless actions in the renderAjax method, not the best.

[update 20090428] Alternative :  Smart save on Zend_Db_Table objects from zfsnippets

Controller Implementation

Our controller is a simple Zend_Controller_Action. We load the database model at init time, and specify the primary key  (node parameter) in a class variable. Note that our data model is also stored in a class variable.

class UserController extends Zend_Controller_Action
{
public function init()
    {
        $this->session = new Zend_Session_Namespace('User');
      //  $this->view->translate = Zend_Registry::get('Zend_Translate');
	  	require_once 'models/Users.php';
		$this->data=new Users();
		$this->node = $this->getRequest()->getParam(node);
		WXC_Log::log("init node : " . $this->node);
    }

Quick look at the model

at this stage I specify on particular function I like to implement in Zend Framework Models : the primary key ! Other functions of the model could include add, delete and update : we'll see below that our generic data admin prefers to do the job in the controller.

class Users extends Zend_Db_Table_Abstract
{
    protected $_name = 'users';
 	public function primaryKey()
	{
		$info = $this->info();
		return $info[primary][1];
	}
}

Back to the crontroller : the renderAjax method is a quick one that stops the view from being rendered. If you are a specialist of Zend Framework you will notice that this can be better performed with the contextSwitch action helper. Use the code below only for testing, for production you'd rather spend a few minutes learning about helpers !

		private function renderAjax()
{
		$this->_helper->layout->disableLayout();
		 $this->_helper->viewRenderer->setNoRender();
}

Action !

Listing records is the first thing you want to look for when working at data scaffolding. the code below reads metadata from the table, lists all columns from your table, fetches data and returns them as JSON (ready for extjs grid display, by the way).

 public function listAction()
{
	 $this->renderAjax();

	  if (null === $select)    $select = $this->data->select();

      $thRowSet = $this->data->fetchAll( $this->data->select());

	$nodes=array();
	 $arrMeta=$this->data->info();
		$arrCols=$arrMeta[cols];

foreach($thRowSet as $row ){
	$arr_node=array();
foreach ($arrCols as  $v)
	$arr_node[$v]=$row->$v;

	$nodes[]=$arr_node;
}

	echo Zend_Json::encode( $nodes );
}

The next step would be to add records : we have not worked on this yet so you'll want to try this with tables that have a few records in them. The method below works with two types of data sets.

  1. Multiple column form submit :this would be the classical response to a from submission, where each field bears the NAME of the database field, and obvisouly the value is the data. Such forms are transmitted via FORM array with key / value pairs. We read the POST (getRequest->getParam) that match metadata built from the database table column array. We then provide a clean arrData array of new data for the update() method of our Zend_Db_Table instanciation. This method takes two arguments: the first is the associative array mapping columns to change to new values to assign to these columns. The second is the where clause that we built from the primary key
  2. Single column submit : the technique is useful when working with extjs in place editing, where one piece of code can edit multiple fields. The field variable contains the database column name and the value is the data. We add a check that matches the field against database table column names
public function saveAction()
{
	$this->renderAjax();
$id= $this->node;
 $key = $this->data->primaryKey();
$strWhere = $key. '='  . $id;

 $arrMeta=$this->data->info();

// all columns submit
$arrCols=$arrMeta[cols];
$arrData=array();
reset($arrCols);
while (list($k,$v)=each($arrCols))
	{
		 if ($v!="parent_id"  && $v!= $this->data->primaryKey()
		  && array_key_exists($v, $this->getRequest()->getParams()))
		 {
			$arrData[$v]=$this->getRequest()->getParam($v);

			}
	}

//single column submit via field/ value
if ($this->getRequest()->getParam('field')!="")
{$field = $this->getRequest()->getParam('field');
$value= $this->getRequest()->getParam('value');
$arrData[$field] =$value;

}

  if (is_array($arrData))
	{
	  try{      $this->data->update($arrData,$strWhere);
	 echo 1;}
	  catch(Zend_Exception $e){  echo 0;}

	}
else echo 0;

}

A good start for extjs development : Hope this is useful for you !!

Ajax webmail on your server

For maniacs who have not yet switched their mail operations to the ever growing gmail storage offer, a few opensource web based email players will provide efficient ajax webmail operations. Choosing between IMAP and POP3 shouldn't be a problem but bear in mind the basic difference between them : IMAP stores emails on the mail server while POP3 needs the client to perform this. As a result you will find it harder to implement POP3 storage from the client perspective, and this is why it took a long time for companies such as AfterLOgic to release their client. WebMail Lite is a very efficient web client that comes opensource with multiple templates and complete source code. In its time we reviewed RoundCube, that only works with IMAP. Same for new player biuCentrax Mail Center, image above, that demosntrates extjs library integration. Of course, for non ajax playing you can count on the old but reliable Horde framework IMP client.

Prestashop : How to setup thumbnail / combination link

The ability to make mulitple products out on one for size, color or other speicifications, is a great feature of Prestashop, but on small display trick is missing. Prestashop's default template (v1.1) includes the automatic resizing of multiple images for a product. It also allows the administrator / editor to specify one of the product images for each combination. As a result, the front end display of the product will let the combination select box interact with the mbig image display : here we explain how to modify the product template to let the thumbnail click act onthe combination choice.

Read more

How to install magento free themes

Well you've finally decided you're going to switch to Magento for building ecommerce website. While new versions of Magento coming up regularly make the learning curve easier to climb, be prepared for at least a few days before you can use magento's features to its best. This article explains the few tricks and tips that will start you off with variations on the basic design of magento's default installation.

Read more

host videos with ostube

(Press release) we are pleased to announce the availability of osTube 2.3!

Our core development team for the osTube 2.x branch again did an amazing job and brought over 150 enhancements and bugfixes to the framework. Moreover, the database and their queries were optimized so that the performance of database queries could be significantly increased (up to 150%, depending on the queries).

And the very best: Our flash developers finished the new media player so that we could bundle it with the current release. The new player is now widescreen (16:9), faster (ActionScript3 code) and has a lot of new settings that you can play with. All osTube Professional (Plus) Edition owners will be happy to hear that all video ad's are now fully integrated directly into the player and that external websites (when embedded) will also show the advertisements.

As you know, AUVICA introduced a daily forum support since version 2.0 in 2007. This year AUVICA has sponsored a new core developer that will take care of the future updates in the next years. His name is Andreas and you will see him around here or in the forum once in a while.

Andreas will also take care of regular minor updates where needed.

The most important enhancements for 2.3 are:

• Easy updater for osTube versions 2.0, 2.1 and 2.2
• Brand-New ViMP Mediaplayer in widescreen (16:9) with even more options
• Sidebar integration for related or further media directly in the media player
• "Lights off"-Mode that will automatically darken the browser window when watching videos
• Google Maps Support to geotag media and users
• Optimized Rich-Text-Editor for description fields
• Easy Google analytics integration from within the admin panel
• Database and SQL Query optimizations
• Refined template structure to add custom layout
• Thumbnails are optimized
• plus over 150 smaller enhancements and bugfixes

Silverstripe : tinymce improvements for image handling

The image button on the tinymce instance of silverstripe html text fields is really nice and well layed out : it gives editors one of the best text / image integration, with a minimum user actions that's both powerful, intuitive, and reactive thanks to AJAX calls to the folder structure.

One small drawback is that it comes with one small feature that can be annoying at times, especially when you're looking for inserting images without resampling them, especially for transparent images or tight image integration / quality that Silverstripe resampling functions (PHP based) cannot match (check out the original image hack).

Image size limit feature

In silverstripe, when you select a big image, width and height are automatically resized to a maximum of 600 pixels. Quick hackers might want to deactivate this feature by commenting the resize algorithm in cms/code/ThumbnailStripField.php (lines 73/80 of 2.3 rc2).

But for those who want the best of both worlds (enjoy limitation AND allow original size), here is a hack that will allow editors to choose between the limited image size (max 600, very useful for huge uploads straight from high definition camera) and the original size (very useful for reasonable image size, like example here of 800). Next trick would be to allow editor to type in width and height with automatic calculation of the image proportion. We're getting closer to photoshop indeed.

Read more

100 best Content management solutions

EcontentMag, onlinep publication that reviews content management software, has just issued the result of the eighth annual EContent 100, a list of companies that matter most in a digital content industry that involves many domains : Classification & Taxonomy, Collaboration, Content Commerce, Content Creation-Production- and Digital Publishing, Content Delivery, Content Management, Content Security, Fee-Based Info Services, Intranets & Portals, Mobile Content, Search Engines & Technologies, Social Media. The 12 categories that structure this yearly competition illustrate the complexity of an industry that's slowly  growing to the age of adulthood : opensource and proprietary solutions compete in a universe where even the low wage workers of India are quickly switching to western standards. The global economic crisis will certainly highlight the difficulty to maintain costly and complex solutions while simple, efficient and often free solutions will prove stronger as ever. By the way, Worpress 2.7 is out !!

Magic toolbox Zoom, magnify, thumbnail : how to convert opensource

Go for a ride on magic toolbox 's website, try the 3 effects, and be tempted to purchase the tiny javascript that does the job for you : yes, the packed file you will receive after this small contribution is worth the money asked. But a few clicks away lies... the same magic, with opensource license and no server count obligation. Look no further :  Jquery has its own magnify effect, implemented by Huy Dinh. TJP ZOOM is another example of the effect, implemented with plain DHTML / Javascript. For the thumbnail effect, look for one of many light box implementations, such as ThickBox (nice), LightBox (very nice) or NyroModal (not bad either). And for the zoom effect, we'll leave you back to your imagination and javascript skill, combined with various samples from plugins above. Or alternatively you can come back to magic toolbox and give a few bucks.

Jquery popeye : galleries, differently

The popularity of javascript lightboxes has spread over the internet and no serious webmaster could think of displaying images without a specific thumbnailer and / or a dynamic slider of popup. The author of jQuery.popeye had  seen enough lightboxes and decided to implement his own box that features the advantage of being integrated like an image, with comments written below and navigation buttons.

Silverstripe 2.3 CMS new features

We are actively testing Silverstripe 2.3 rc2, the lastest candidate for imminent new release of Silverstripe CMS / CMF. Among very efficient code upgrade and efficiency improvements, we love the following feature enhancements and definitely recommend professionnals to engage in learning this  Content Management framework that fits CMS and  website development, including the administration and layout of dynamic image galleries.

  • Security new features : possibility to select multiple groups for viewing and administration privileges
    What would be nice now : integrate the user import function from the newsletter module (see our post on how to do this for version 2.2)
  • Wysiwyg editor new features : possibility to insert predefined template was missing for webmasters wishing to go beyond the single layout  for each page type. Editors can now choose between predefined templates where content is structured in various configuration (read on for instructions on how to set that up).
    What would be nice now : display a small preview of the layout, like typo3 does. Or integrate on demand page component addition (example : on demand HTML editors, list types, gallery types in one page)
  • Other promising features (not tested) : data CRUD scaffolding, Update to TinyMCE 3.2, HTML flash code is now full XHTML compliant!

Read more