Pligg: User Image Uploading
By: Bryan Hunsinger
Most people would love to have user image uploading functionality on their Pligg site, but don't know how to implement using the already integrated 'extra fields'. Anyone can quickly add this functionality in just a few minutes.
Follow the example below that shows how you can add a field to the article submission process to allow the user to browse their PC and add an image to their article quickly and easily. Also included is a auto-generated thumbnail.
First, you need to enable Extra Fields. You do this by clicking the 'Configure' link inside the admin area. Click 'ExtraFields' and set the value to true.
Now that we have enabled extra fields, we will plan to use link_field1 and link_field2. These two fields are stored in your database for each article submission. We do not want to display these fields during the article submission process (step 2) so the first code change you will need to do is below.
By commenting out link_field1 and link_field2, this will simply hide these two fields. Navigate to submit_extra_fields.tpl in the current template directory that you are using (Ex. pligg/templates/futurepligg/)
<!--
{if $Enable_Extra_Field_1 eq 1}
<p class="l-mid"><label for="trackback">{$Field_1_Title}:</label>
<span class="form-note">{$Field_1_Instructions}</span><br />
<input type="text" name="link_field1" id="link_field1" value="{$submit_link_field1}" size="60" class="form-full" />
</p>
{/if}
{if $Enable_Extra_Field_2 eq 1}
<p class="l-mid"><label for="trackback">{$Field_2_Title}:</label>
<span class="form-note">{$Field_2_Instructions}</span><br />
<input type="text" name="link_field2" id="link_field2" value="{$submit_link_field2}" size="60" class="form-full" />
</p>
{/if}
-->
We also need to enable both link_field1 and link_field2. We do this by editing the extra_fields.php file which is located in the libs directory. (Ex. pligg/libs/)
Change:
define('Enable_Extra_Field_1', false);
To:
define('Enable_Extra_Field_1', true);
You will want to make the change for both Enable_Extra_Field_1 and Enable_Extra_Field_2.
We are now ready to add a field to step two in the article submission process. This will allow the user to browse thier pc to select an image.
Right below the file you just edited (submit_extra_fields.tpl), you will see submit_step_2.tpl. Scroll down to the bottom and you will see both the include of the extra fields tpl:
{include file=$tpl_extra_fields.".tpl"}
and the submit button:
<input type="submit" value="{#PLIGG_Visual_Submit2_Continue#}" class="submit" />
Simply add the line below between the include and submit button.
<input type="file" name="image" size="20">
You will also need to modify your FORM tag. Add the following:
enctype="multipart/form-data"
You will now need to add the code which uploads the image the user selects from thier pc and which also creates the thumbnail. Open submit.php which is in your main pligg directory. (Ex. pligg/submit.php)
Find the do_submit2() function:
function do_submit2() {
Add the code below directly under the variable declarations (Ex. global $db, $main_smarty...)
$size = 75; // the thumbnail height
$filedir = 'images/'; // the directory for the original image
$thumbdir = 'images/'; // the directory for the thumbnail image
$prefix = 'small_'; // the prefix to be added to the original name
$maxfile = '2000000';
$mode = '0666';
$userfile_name = $_FILES['image']['name'];
$userfile_tmp = $_FILES['image']['tmp_name'];
$userfile_size = $_FILES['image']['size'];
$userfile_type = $_FILES['image']['type'];
if (isset($_FILES['image']['name']))
{
$prod_img = $filedir.$userfile_name;
$prod_img_thumb = $thumbdir.$prefix.$userfile_name;
move_uploaded_file($userfile_tmp, $prod_img);
chmod ($prod_img, octdec($mode));
$sizes = getimagesize($prod_img);
$aspect_ratio = $sizes[1]/$sizes[0];
if ($sizes[1] <= $size)
{
$new_width = $sizes[0];
$new_height = $sizes[1];
}else{
$new_height = $size;
$new_width = abs($new_height/$aspect_ratio);
}
$destimg=ImageCreateTrueColor($new_width,$new_height)
or die('Problem In Creating image');
$srcimg=ImageCreateFromJPEG($prod_img)
or die('Problem In opening Source Image');
if(function_exists('imagecopyresampled'))
{
imagecopyresampled($destimg,$srcimg,0,0,0,0,$new_width,$new_height,ImageSX($srcimg),ImageSY($srcimg))
or die('Problem In resizing');
}else{
Imagecopyresized($destimg,$srcimg,0,0,0,0,$new_width,$new_height,ImageSX($srcimg),ImageSY($srcimg))
or die('Problem In resizing');
}
ImageJPEG($destimg,$prod_img_thumb,90)
or die('Problem In saving');
imagedestroy($destimg);
}
session_start();
$_SESSION['imgnamesm']=$prefix.$userfile_name;
$_SESSION['imgname']=$userfile_name;
Also, find the do_submit3() function and these two lines:
$linkres->read();
$linkres->status='queued';
Add this code between those two lines:
session_start();
$imgsm = $_SESSION['imgnamesm'];
$imgorig = $_SESSION['imgname'];
$linkres->field1=$imgsm;
$linkres->field2=$imgorig;
Now, just one more step. Open link.php which is located in your libs directory. (Ex. pligg/libs/).
Find the store_basic() function and locate these two lines:
$link_karma = $this->karma;
$link_randkey = $this->randkey;
Add this code between those two lines:
$link_field1 = $this->field1;
$link_field2 = $this->field2;
A few lines down you will see the code which updates the database:
$db->query("UPDATE " . table_links . " set link_author=$link_author, link_blog=$link_blog, link_status='$link_status', link_randkey=$link_randkey, link_category=$link_category, link_modified=NULL, link_date=FROM_UNIXTIME($link_date), link_published_date=FROM_UNIXTIME($link_published_date), link_votes=$link_votes, link_karma=$link_karma, link_field1='$link_field1', link_field2='$link_field2' WHERE link_id=$this->id");
Notice the addition above of following code below to the end of the query.
Whew. Finally, that concludes.. the first part!
Since you may actually want to be able to display the images, I will explain a few options.
To display on an article page, in the description, you can insert the code below in link_summary.tpl in your templates directory. (Ex. pligg/templates/futurepligg)
{if $pagename neq "shakeit"}
{if $link_field2 neq ""}
<div align="center" style="border:1px solid #999999; width:200px;">
<a href="{$my_base_url}{$my_pligg_base}/images/{$link_field2}" target="_blank">
<img src="{$my_base_url}{$my_pligg_base}/images/{$link_field2}" height=200 width=200 border=0>
</a>
</div>
{/if}
{/if}
You can paste that code directly above the code below.
{if $Enable_Extra_Field_1 eq 1}{if $link_field1 neq ""}<br/><b>{$Field_1_Title}:</b> {$link_field1}{/if}{/if}
{if $Enable_Extra_Field_2 eq 1}{if $link_field2 neq ""}<br/><b>{$Field_2_Title}:</b> {$link_field2}{/if}{/if}
etc.......
You probably want to comment out those two lines as well. If you do not, the image names will be displayed.
This is a solution I came up with. It is not perfect. If you have a better solution, great..please share. I welcome all comments.
