This site has been archived and you can no longer log in or post new messages. For up-to-date community resources please visit

eZ Community » Learn » eZ Publish » Transforming jQuery plugins into eZ...

Transforming jQuery plugins into eZ publish extensions

Friday 11 February 2011 1:06:54 pm

  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Step 3: Polishing your extension

Our extension now is functional, but needs some polishing. First realize that images can appear in different sizes, while our slider only accepts one specific size of image. We need to fix that.

The way is to create an image class to generate images of a fixed size. Create the contentslider/settings/image.ini.append.php file:

<?php /* #?ini charset="utf-8"?
*/ ?>

In our block's template, change the following code snippet:

<a href={fetch( 'content', 'node', hash( 'node_id', $vnode.data_map.object.content.relation_list[0].node_id ) ).url_alias|ezurl}>
{attribute_view_gui image_class=large attribute=$vnode.data_map.image}

To :

<a href={fetch( 'content', 'node', hash( 'node_id', $vnode.data_map.object.content.relation_list[0].node_id ) ).url_alias|ezurl}>{attribute_view_gui image_class=slider attribute=$vnode.data_map.image}

To use multiple blocks in one page, you must change the id pikaname to a single value, so that we can use the variable {$}, our final template code looks like this:

{def $valid_nodes = $block.valid_nodes}
<!-- BLOCK: START -->
<div class="pikachoose">
        <ul id="container{$}" class="jcarousel-skin-pika">
        {foreach $valid_nodes as $vnode}
        <li><a href={fetch( 'content', 'node', hash( 'node_id', $vnode.data_map.object.content.relation_list[0].node_id ) ).url_alias|ezurl}>{attribute_view_gui image_class=slider attribute=$vnode.data_map.image}</a><span>{$vnode.object.data_map.message.data_text}</span></li>
{ezcss_require( 'contentslider.css' )}
{ezscript_require( array('ezjsc::jquery','jquery.jcarousel.min.js', 'jquery.pikachoose.js') )}
<script type="text/javascript">
                function (){ldelim}
                    $("#container{$}").jcarousel({ldelim}scroll:5, wrap: 'circular',                    
                            initCallback: function(carousel) {ldelim}
                                $(carousel.list).find('img').click(function() {ldelim}
<!-- BLOCK: END -->
{undef $valid_nodes}

This code uses ezjscore functions, there’s already a good tutorial about this extension, so, I’ll not explain here how it works, you just need to know that it is including the css and js files.

You will also need to make some changes to the file contentslider / design / ezflow / stylesheets / contentslider.css, so it will look a little better in your site:

.pika-wrap {width: 520px; margin: 0 auto;}
.pika-image {position: relative; height: 300px; width: 445px; background: #fafafa; border: 1px solid #e5e5e5; padding: 10px;}
    /*position image holders */
    .pika-image .animation, .pika-image .main-image {position: absolute; top: 10px; left: 10px;}
    .pika-image .animation {display: none;z-index:2;}
    .pika-image img {border:0;}
.pika-image .caption {position: absolute; background: url(../images/75-black.png);  border: 1px solid #141414; font-size: 11px; color: #fafafa; padding: 10px; text-align: right; bottom: 10px; right: 10px;}
    .pika-image .caption p {padding: 0; margin: 0; line-height: 14px;}
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
    .pika-imgnav a.previous {background: url(../images/prev.png) no-repeat left 50%; height: 300px; width: 50px; top: 10px; left: 10px;cursor:pointer;}
    .pika-imgnav {background: url(../images/next.png) no-repeat right 50%; height: 300px; width: 50px; top: 10px; right: 10px;cursor:pointer;}
    .pika-imgnav {background: url(../images/play.png) no-repeat 50% 50%; height: 100px; width: 40px;top:0;left:50%;display: none;cursor:pointer;}
    .pika-imgnav a.pause {background: url(../images/pause.png) no-repeat 50% 50%; height: 100px; width: 40px;top:0;left:50%;display:none;cursor:pointer;}
.pika-textnav {overflow: hidden; margin: 10px 0 0 0;}
.pika-textnav a {font-size: 12px; text-decoration: none; font-family:  helvetica, arial, sans-serif; color: #333; padding: 4px;}
        .pika-textnav a:hover {background: #e5e5e5; color: #0065B2;}
    .pika-textnav a.previous {float: left; width: auto; display: block;}
    .pika-textnav {float: right; width: auto; display: block;}
    .pika-textnav a.previous, .pika-textnav {display:none;}
.pika-thumbs {margin: 10px 0 0 0; padding: 0; overflow: hidden; }
    .pika-thumbs li {float: left; list-style-type: none; width: 74px; padding: 3px; margin: 0 2px; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer;}
        .pika-thumbs li:last {margin: 0;}
        .pika-thumbs li .clip {position:relative;width: 74px; height: 74px; text-align: center; vertical-align: center; overflow: hidden;}
.clip span{background-color:black;position:absolute;top:5px;left:5px;display:block;}
/* jCarousel Styles */
/*if you're not using the carousel you can delete everything below this */
.jcarousel-skin-pika .jcarousel-container-horizontal { padding: 15px 0px;}
.jcarousel-skin-pika .jcarousel-container-vertical { width: 90px; height: 350px; padding: 20px 20px;}
.jcarousel-skin-pika .jcarousel-clip-horizontal {height: 90px; width: 465px;}
.jcarousel-skin-pika .jcarousel-clip-vertical { width:  90px; height: 350px;}
.jcarousel-skin-pika .jcarousel-item-horizontal { margin-right: 10px;}
.jcarousel-skin-pika .jcarousel-item-vertical {margin-bottom: 10px;}
.jcarousel-skin-pika .jcarousel-item-placeholder {background: #fff; color: #000;}
36 542 Users on board!

Tutorial menu


Printer Friendly version of the full article on one page with plain styles


Proudly Developed with from