One of the more popular questions we get from users of Pligg is “How do i display an externally hosted image on pligg story pages”, Pligg already has the function to upload images with the module Pligg Image Upload v1.03. The question above got me thinking though what if you also wanted to provide a field for users to paste the link of an external image into from imageshack or a news source like the BBC, the easiest way would be through the use of a feature in Pligg titles Extra Fields. In this tutorial we will show you how to provide your users with an Externally Linked Image URL input field upon submit and edit of the story.

Note: If you cannot see an image clearly in the tutorial click it o open at full size.

The first thing you will need to do is enable Extra Fields feature within the Pligg Cms System, To enable Extra Fields goto your pligg Administration Section, click Configure Pligg, then ExtraFields. Change the value of “Enable extra fields” from false to true.

Next we need to edit some pligg files for extra fields.

Open: /libs/extra_fields.php

FIND line 5 to 11

        define('Field_1_Title', 'misc field');        define('Field_1_Instructions', 'this is where you put the instructions for this new field.');define('Field_1_Searchable', false);

//the variables below are not yet used in version 6.02.

define('Field_1_Required', false);

define('Field_1_Validation_Method', '');

define('Field_1_Validation_Error_Message', '');

REPLACE WITH

        define('Field_1_Title', 'External Story Image');        define('Field_1_Instructions', 'Please copy and paste the url of the story image you are linking to.');define('Field_1_Searchable', false);

//the variables below are not yet used in version 6.02.

define('Field_1_Required', false);

define('Field_1_Validation_Method', '');

define('Field_1_Validation_Error_Message', '');

This code as you can see holds the description and title for the extra field we are going to create for the external images, it’s also worth noting we are using Field_1 as our extra field as this also relates to where the image link will be stored in the pligg database. You will now have a story image input area on your submit (See Image Below) and edit story pages.

Display And Positioning

Because of the way extra fields are displayed within pligg templates to get the image to display and be positioned correctly, some customization of the function is required.

The image below shows how it will look as standard and without the display and styling edits, as you can see it only displays the link as text at the bottom of the story. Not what we want.

We need to edit the link_summary.tpl file.

OPEN /yourtemplate/link_summary.tpl

Find

{if $Enable_Extra_Field_1 eq 1}{if $link_field1 neq ""}<br/><b>{$Field_1_Title}:</b> {$link_field1}{/if}{/if}

Delete this line completely.

FIND

<div class="top">

ADD BELOW

          {if $Enable_Extra_Field_1 eq 1}          {if $link_field1 neq ""}

<div style="float:right;padding:2px 0 0  5px;" ><a href="{$story_url}" title="{$title_short}"><img src="{$link_field1}" width="90px" height="80px" alt="{$title_short}" /></a></div>

{/if}

{/if}

Save link_summary.tpl and your done.

Your images will now display correctly s below

To better position the image and style yourself use CSS and replace the style=”" within the div with a css class for better styling.

And there you have it a pligg upgrade proof way (Fingers Crossed) to allow your members to attach external images to individual stories, used in conjunction with the image upload module this is the perfect either or image solution for you pligg site.

If you enjoyed this post, make sure you subscribe to our RSS feed!