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.
Popularity: 21% [?]
If you enjoyed this post, make sure you subscribe to our RSS feed!
This post was written by:
Lincoln - who has written 182 posts on Social CMS Buzz.
Founder of Social CMS Buzz and a fan of all things open source, social and design related.
There’s two issues with this approach, but they’re both pretty easily fixed with one process.
While you can just embed an image from whatever url you want, you can’t know for sure that image will always be at that url, if it’s moved, deleted or hotlinking is blocked then your site’s going to start looking ugly.
The second is specifying the width and height via attributes of the img tag. You’re still downloading the full image even if it’s displayed at a smaller size, and less savvy internet users are quite likely to specify large images that could add megabytes to your cumulative page size.
Both of these can be fixed by storing a copy locally, which also gives you the opportunity to resize the image physically to ensure a thumbnail is just a thumbnail.