C5 turns PNG into a jpeg?!?
Permalink
Hi Guys
Came across a weird issue. We are adding a png image through an add-on but when it displays on the page, and I look at the source code, it changes the file type to a jpeg, displaying it in a black background?!?
When I view the file in the file manager, its a PNG although I did notice when you view properties, the image preview at the bottom is also a jpeg? (see attached image)
C5 seems to be converting the uploaded PNG to a jpeg and this is what the block is linking too. When I add the PNG to a content block, all's fine.
Anyone else came across this and if so, how do you fix it?
Came across a weird issue. We are adding a png image through an add-on but when it displays on the page, and I look at the source code, it changes the file type to a jpeg, displaying it in a black background?!?
When I view the file in the file manager, its a PNG although I did notice when you view properties, the image preview at the bottom is also a jpeg? (see attached image)
C5 seems to be converting the uploaded PNG to a jpeg and this is what the block is linking too. When I add the PNG to a content block, all's fine.
Anyone else came across this and if so, how do you fix it?
Yeah just about to do that. Thought it might be more of a C5 issue.
Will find out
Will find out
The add-on is probably using getThumbnail() or something. When we resize images we try to maintain the original image but in some older versions of concrete5 we made them into JPEGs.
Thanks Andrew
Yeah the site is using an older version. (if it ain't broke yada yada...)
Will look at the add-on. What would I put instead of getThumbnail? (if I find it)
I will be re-doing the clients site in the near future so will use the latest version but need a quick fix just now.
Yeah the site is using an older version. (if it ain't broke yada yada...)
Will look at the add-on. What would I put instead of getThumbnail? (if I find it)
I will be re-doing the clients site in the near future so will use the latest version but need a quick fix just now.
How did you end up fixing this? I'm having the same issue.
I am not sure about this, but I think you could just copy the concrete/helpers/image.php from a newer version of C5 into your older version and that should address the problem (I think -- but I would keep the old file around as a backup and make sure you test everything first in case it causes problems).
It seems to be older version of C5 that have this problem. I was given a bit of code to change to solve this. Will dig that out and post it up.
Although it is specific to an add-on so may not be useful... if I can find my notes!
Thanks for the help guys I will keep trouble shooting. I'm using the jb_gallerific add-on. The problem is only happening with this add-on so I'm assuming he has that file in his helper directory. I will test a new version of that file and see what happens. Again, thanks for the help I really appreciate it.
UPDATE: This seems to be happening with the imageresizer.php I've uploaded this file as an attachment. Thoughts? I'm not seeing anything yet.
UPDATE: This seems to be happening with the imageresizer.php I've uploaded this file as an attachment. Thoughts? I'm not seeing anything yet.
For anyone having this problem. This was my fix for the Gallerific add-on in packages->jb_gallerific->helpers->imageresizer.php
[code]
public function create($originalPath, $newPath, $width, $height) {
// first, we grab the original image. We shouldn't ever get to this function unless the image is valid
$imageSize = @getimagesize($originalPath);
$oWidth = $imageSize[0];
$oHeight = $imageSize[1];
$finalWidth = 0;
$finalHeight = 0;
// first, if what we're uploading is actually smaller than width and height, we do nothing
if ($oWidth < $width && $oHeight < $height) {
$finalWidth = $oWidth;
$finalHeight = $oHeight;
} else {
// otherwise, we do some complicated stuff
// first, we divide original width and height by new width and height, and find which difference is greater
$wDiff = $oWidth / $width;
$hDiff = $oHeight / $height;
if ($wDiff > $hDiff) {
// there's more of a difference between width than height, so if we constrain to width, we should be safe
$finalWidth = $width;
$finalHeight = $oHeight / ($oWidth / $width);
} else {
// more of a difference in height, so we do the opposite
$finalWidth = $oWidth / ($oHeight / $height);
$finalHeight = $height;
}
}
$image = @imageCreateTrueColor($finalWidth, $finalHeight);
switch($imageSize[2]) {
case IMAGETYPE_GIF:
$im = @imageCreateFromGIF($originalPath);
break;
case IMAGETYPE_JPEG:
$im = @imageCreateFromJPEG($originalPath);
break;
case IMAGETYPE_PNG:
$im = @imageCreateFromPNG($originalPath);
break;
}
if ($im) {
// Better transparency - thanks for the ideas and some code from mediumexposure.com
if (($imageSize[2] == IMAGETYPE_GIF) || ($imageSize[2] == IMAGETYPE_PNG)) {
$trnprt_indx = imagecolortransparent($im);
// If we have a specific transparent color
if ($trnprt_indx >= 0) {
// Get the original image's transparent color's RGB values
$trnprt_color = imagecolorsforindex($im, $trnprt_indx);
// Allocate the same color in the new image resource
$trnprt_indx = imagecolorallocate($image, $trnprt_color['red'], $trnprt_color['green'], $trnprt_color['blue']);
// Completely fill the background of the new image with allocated color.
imagefill($image, 0, 0, $trnprt_indx);
// Set the background color for new image to transparent
imagecolortransparent($image, $trnprt_indx);
} else if ($imageSize[2] == IMAGETYPE_PNG) {
// Turn off transparency blending (temporarily)
imagealphablending($image, false);
// Create a new transparent color for image
$color = imagecolorallocatealpha($image, 0, 0, 0, 127);
// Completely fill the background of the new image with allocated color.
imagefill($image, 0, 0, $color);
// Restore transparency blending
imagesavealpha($image, true);
}
}
$res = @imageCopyResampled($image, $im, 0, 0, 0, 0, $finalWidth, $finalHeight, $oWidth, $oHeight);
if ($res) {
switch($imageSize[2]) {
case IMAGETYPE_GIF:
$res2 = imageGIF($image, $newPath);
break;
case IMAGETYPE_JPEG:
$res2 = imageJPEG($image, $newPath, AL_THUMBNAIL_JPEG_COMPRESSION);
break;
case IMAGETYPE_PNG:
$res2 = imagePNG($image, $newPath);
break;
}
}
}
}
[\code]
[code]
public function create($originalPath, $newPath, $width, $height) {
// first, we grab the original image. We shouldn't ever get to this function unless the image is valid
$imageSize = @getimagesize($originalPath);
$oWidth = $imageSize[0];
$oHeight = $imageSize[1];
$finalWidth = 0;
$finalHeight = 0;
// first, if what we're uploading is actually smaller than width and height, we do nothing
if ($oWidth < $width && $oHeight < $height) {
$finalWidth = $oWidth;
$finalHeight = $oHeight;
} else {
// otherwise, we do some complicated stuff
// first, we divide original width and height by new width and height, and find which difference is greater
$wDiff = $oWidth / $width;
$hDiff = $oHeight / $height;
if ($wDiff > $hDiff) {
// there's more of a difference between width than height, so if we constrain to width, we should be safe
$finalWidth = $width;
$finalHeight = $oHeight / ($oWidth / $width);
} else {
// more of a difference in height, so we do the opposite
$finalWidth = $oWidth / ($oHeight / $height);
$finalHeight = $height;
}
}
$image = @imageCreateTrueColor($finalWidth, $finalHeight);
switch($imageSize[2]) {
case IMAGETYPE_GIF:
$im = @imageCreateFromGIF($originalPath);
break;
case IMAGETYPE_JPEG:
$im = @imageCreateFromJPEG($originalPath);
break;
case IMAGETYPE_PNG:
$im = @imageCreateFromPNG($originalPath);
break;
}
if ($im) {
// Better transparency - thanks for the ideas and some code from mediumexposure.com
if (($imageSize[2] == IMAGETYPE_GIF) || ($imageSize[2] == IMAGETYPE_PNG)) {
$trnprt_indx = imagecolortransparent($im);
// If we have a specific transparent color
if ($trnprt_indx >= 0) {
// Get the original image's transparent color's RGB values
$trnprt_color = imagecolorsforindex($im, $trnprt_indx);
// Allocate the same color in the new image resource
$trnprt_indx = imagecolorallocate($image, $trnprt_color['red'], $trnprt_color['green'], $trnprt_color['blue']);
// Completely fill the background of the new image with allocated color.
imagefill($image, 0, 0, $trnprt_indx);
// Set the background color for new image to transparent
imagecolortransparent($image, $trnprt_indx);
} else if ($imageSize[2] == IMAGETYPE_PNG) {
// Turn off transparency blending (temporarily)
imagealphablending($image, false);
// Create a new transparent color for image
$color = imagecolorallocatealpha($image, 0, 0, 0, 127);
// Completely fill the background of the new image with allocated color.
imagefill($image, 0, 0, $color);
// Restore transparency blending
imagesavealpha($image, true);
}
}
$res = @imageCopyResampled($image, $im, 0, 0, 0, 0, $finalWidth, $finalHeight, $oWidth, $oHeight);
if ($res) {
switch($imageSize[2]) {
case IMAGETYPE_GIF:
$res2 = imageGIF($image, $newPath);
break;
case IMAGETYPE_JPEG:
$res2 = imageJPEG($image, $newPath, AL_THUMBNAIL_JPEG_COMPRESSION);
break;
case IMAGETYPE_PNG:
$res2 = imagePNG($image, $newPath);
break;
}
}
}
}
[\code]
You can always try asking the add-on developer by clicking on the 'support button' on the add-on page in the market-place.
Sorry couldn't be of further help.
Wagdi