Howto: Simplify Image Upload
Posted: Mon Aug 05, 2013 1:42 am
Sometimes when you are adding a lot of images such as a step by step procedure you may want to quickly upload images, using a 3rd party plugin to TinyMCE (The text editor for phpMyFAQ) you are able to reduce the clicks and simplify the process. All images will be saved into a directory you specify in step 3. In this howto I am using 'TinyMCE Images Upload' from http://justboil.me with phpMyFAQ 2.8.2.
1. Download the 'TinyMCE Images Upload' plugin from http://justboil.me.
2. Copy the jbimages folder from within the zip file to phpmyfaq\admin\editor\plugins.
3. Edit config.php file found in phpmyfaq\admin\editor\plugins\jbimages. Minimally, you should only specify a target directory for your uploads.
4. Edit footer.php found in phpmyfaq\admin.
Add jbimages to plugins (line 83):
Now you will need to add the icon for jbimages by adding jbimages to theme_advanced_buttons3 (line 89) at the end of the line. Should look something like this:
Note: This can be moved around in either theme_advanced_buttons1,theme_advanced_buttons2 or theme_advanced_buttons3 by its position in the list.
Save and you're done!
5. (Optional) Image Tidy Pack - Intercept the contents of an FAQ prior to saving back to the database and perform some tidy actions. This will prefix the image name with the record ID, this will keep your images grouped by record id and keep them unique between articles. This will also save out images pasted into TineMCE from Firefox and also enable/disable compression to reduce the file size of pasted images.
Edit record.save.php found in phpmyfaq\admin.
Add the following before $recordData = array (line 123):
Make any changes to the modify settings section then save and you're done.
This is how it works. It looks for all images that match the image path set in $imgPath (should match setting in step 3) and the ones that have not be prefixed with the record id it will rename e.g. example.jpg -> 7_example.jpg. It will also update the contents of the article prior to saving so the name matches.
Also you are able to paste in images when using Firefox from programs such as Windows Snipping Tool, the problem with this is the whole image is stored within the article and not as a separate file which is not ideal. So I butchered some code from http://jk3.us/2011/10/31/pasting-images-in-tinymce/ to now allow images to save out with compression and with prefixing the record id.
I need to clean the code up but it works, the aim is to simplify getting images into the FAQ. Easier something is to use, the more chance you have of people using it.
-------------------------------------------------
More information on the plugin can be found at http://justboil.me.
Please use at your own risk and make sure to test prior to rolling out. Do not hold me responsible if your data center gets enveloped by fire and incinerates into a gelatinous goo
1. Download the 'TinyMCE Images Upload' plugin from http://justboil.me.
2. Copy the jbimages folder from within the zip file to phpmyfaq\admin\editor\plugins.
3. Edit config.php file found in phpmyfaq\admin\editor\plugins\jbimages. Minimally, you should only specify a target directory for your uploads.
4. Edit footer.php found in phpmyfaq\admin.
Add jbimages to plugins (line 83):
Code: Select all
plugins:"jbimages,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,syntaxhl,phpmyfaq",
Code: Select all
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,ltr,rtl,|,fullscreen,jbimages",
Save and you're done!
5. (Optional) Image Tidy Pack - Intercept the contents of an FAQ prior to saving back to the database and perform some tidy actions. This will prefix the image name with the record ID, this will keep your images grouped by record id and keep them unique between articles. This will also save out images pasted into TineMCE from Firefox and also enable/disable compression to reduce the file size of pasted images.
Edit record.save.php found in phpmyfaq\admin.
Add the following before $recordData = array (line 123):
Code: Select all
// ------- Start Image Tidy Pack -------
// v1 - Initial script
// v1.1 - Added paste from Firefox support
// v1.2 - Added compression support
// Still requires a bit of cleaning up
// - Modify settings here -
$imgPath = "/images/";
$imgSysPath = $_SERVER['DOCUMENT_ROOT'] . $imgPath;
$prefix = $recordId."_";
// Compress pasted images and set PNG or JPG quality (JPG: 0-100, 100=Highest Quality, PNG: 0-9, 0=Highest Quality)
$compress = True;
$quality = 90;
// Compressed output format 'png' or 'jpg'.
$cFormat = 'jpg';
// ------------------------
// Set regex query for images to search for, must be in the path specified above. Restrict the allowed characters.
$regexQuery = '/src="' . preg_quote($imgPath, '/') . '([A-Za-z0-9 -._()]+)"/';
preg_match_all($regexQuery, $content, $foundImages, PREG_SET_ORDER);
// Loop through all images found
foreach ($foundImages as $foundImage) {
// Do not proceed if images already is prefixed.
if (strpos($foundImage[1],"$prefix") !== 0) {
// prefix the new name.
$newName = $prefix . $foundImage[1];
// Rename the file.
rename($imgSysPath . $foundImage[1], $imgSysPath . $newName);
// Replace the image name in the contents with the new name.
$content = str_replace('src="' . $imgPath . $foundImage[1], 'src="' . $imgPath . $newName, $content);
}
}
// Set regex query for inline images (e.g. data:image/png), We will save out the images.
$regexQuery = '/src="(data:.*?)"/i';
preg_match_all($regexQuery, $content, $foundImgData, PREG_SET_ORDER);
// Data types to ext name.
$types = array(
'image/jpeg' => 'jpg',
'image/png' => 'png',
'image/gif' => 'gif',
);
// Loop through each embedded image and save out.
foreach ($foundImgData as $imgData) {
$src = $imgData[1];
$semicolon_place = strpos($src, ';');
$comma_place = strpos($src, ',');
$type = substr($src,5,$semicolon_place-5);
$base64_data = substr($src, $comma_place+1);
$data = base64_decode($base64_data);
// Create unique name using MD5.
$md5 = md5($data);
// Are we compressing?
if($compress)
{
// Export image as compressed JPG.
// Get image object.
switch ($types[$type]) {
case 'png':
$image = imagecreatefrompng($src);
break;
case 'jpg':
$image = imagecreatefromjpeg($src);
break;
case 'gif':
$image = imagecreatefromgif($src);
break;
}
// Export as prefered format.
switch ($cFormat) {
case 'png':
// Save image.
imagepng($image, "{$imgSysPath}/{$prefix}{$md5}.png", $quality);
// Replace the image name in the contents with the new name.
$content = str_replace($src,"{$imgPath}{$prefix}{$md5}.png",$content);
break;
case 'jpg':
// Save image.
imagejpeg($image, "{$imgSysPath}/{$prefix}{$md5}.jpg", $quality);
// Replace the image name in the contents with the new name.
$content = str_replace($src,"{$imgPath}{$prefix}{$md5}.jpg",$content);
break;
}
// Remove image object.
imagedestroy($image);
} else {
// Export image as is.
if (!file_exists($imgSysPath)) {
mkdir($imgSysPath, 0775);
}
$imgSysPath .= "/{$prefix}{$md5}.{$types[$type]}";
if (!file_exists($imgSysPath)) {
$handle = fopen($imgSysPath,'w');
fwrite($handle, $data);
fclose($handle);
}
// Replace the image name in the contents with the new name.
$content = str_replace($src,"{$imgPath}{$prefix}{$md5}.{$types[$type]}",$content);
}
}
// ------- Finish Image Tidy Pack -------
This is how it works. It looks for all images that match the image path set in $imgPath (should match setting in step 3) and the ones that have not be prefixed with the record id it will rename e.g. example.jpg -> 7_example.jpg. It will also update the contents of the article prior to saving so the name matches.
Also you are able to paste in images when using Firefox from programs such as Windows Snipping Tool, the problem with this is the whole image is stored within the article and not as a separate file which is not ideal. So I butchered some code from http://jk3.us/2011/10/31/pasting-images-in-tinymce/ to now allow images to save out with compression and with prefixing the record id.
I need to clean the code up but it works, the aim is to simplify getting images into the FAQ. Easier something is to use, the more chance you have of people using it.
-------------------------------------------------
More information on the plugin can be found at http://justboil.me.
Please use at your own risk and make sure to test prior to rolling out. Do not hold me responsible if your data center gets enveloped by fire and incinerates into a gelatinous goo