Pligg Extra Fields: Display Externally Hosted Images On Pligg Story Pages

photos_hec.jpgOne 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.

ExtraFields.true.jpg

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.

ExtraFields.submit.jpg

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.

ExtraFields.story.before.jpg

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 :)

ExtraFields.story.after.jpg

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!

Article Details

#

Author: Lincoln on June 16th, 2008

Category: Pligg Tutorials

Tags: , , , ,

  1. Ben says:

    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.

  2. LincolnHawks says:

    Hi Ben,

    I agree with you on both issues of images disappearing over time and the overall load size of images, a few people however had been trying to do this with Extra Fields and were having problems getting images to display etc. The most streamlined way to achieve a solution as you say would be to grab the image from the external source and convert to a thumbnail that’s stored in the data base.

    This solution would most probably have to come in module form to keep the pligg codebase as clean as possible and compatible without edits for future upgrades.

    It may even be an idea to add this feature to the Image Upload module giving you an either Upload a file or Upload from external URL, definitely something i may look into in the future.

  3. Sergio Lopes says:

    Hi,

    I’m still waiting for that this feature to come on next Pligg Image Upload version as its on roadmap. :)

    Nice work!

    Later,
    Sergio

  4. bob says:

    what about a tutorial on putting extra fields on profiles!!!!

  5. LincolnHawks says:

    @bob what a great idea, i will write one soon ;)

  6. Apnastory says:

    Thank to you. I am successful. I wait for new pligg code for better.

  7. Storypot says:

    It is an outstanding feature.

  8. kobe says:

    But how to use it with if command.
    If image uploaded from user then don’t let use this feature and vice versa?

  9. telesmatic says:

    Thanks a lot. You rock!!

  1. bloggingzoom.com
  2. Vote for this article at blogengage.com
  3. pligg.com
  4. Pligg - Reminds us once again why it’s worth avoiding at all costs | Social CMS Buzz

Leave a Reply