Documentation 2.x and 3.x

How to create custom widget layout

To add new widget layout, you need to add view file in your theme directory. We will use widget "Text Image" as an example and add new layout "icon" to it which will force the size of image. In the same way you can add any number of layouts to any widget.

Step 1 / 2 - adding new view file

Copy file ip_cms/modules/standard/content_management/widget/IpTextImage/preview/default.php to ip_themes/lt_pagan/modules/standard/content_management/widget/IpTextImage/preview/icon.php. Please notice that we have renamed default.php to icon.php

Now you should see new layout in layout select box.

Custom layout of Text Image widget

Step 2 / 2 - customize icon.php view

Now modify you new view file as you like. In this case we will add style="width:50px;" attribute to image tag. Your complete image.php file should look like this:

<?php if (isset($imageSmall) && $imageSmall != ''){ ?>
<img style="width:50px;" class="ipwImage" src="<?php echo BASE_URL.$imageSmall; ?>" alt="<?php echo isset($title) ? htmlspecialchars($title) : ''; ?>" />
<?php } ?>
<div class="ipwText">
<?php echo isset($text) ? $text : ''; ?>
</div>

I know that style attribute in HTML is ugly. It is just for simplicity of example. You can put it to your website CSS.

Download complete example

Extract archive and copy "modules" dir to your theme directory.

Write a comment

You must be logged in to comment.