StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Of course, it is possible. Besides, it is, possibly, the best approach: to create necessary thumbnail images by request. If your website is in development stage you will never guess what dimensions will create the designer tomorrow. And you will return to your uploading function again and again to fit it for new design. It worth removing hard dependency between design and logic.</p> <p>I'm not sure about codeignitor. Anyway, use something like this in your templates:</p> <pre><code>class Image { public $filename; public $caption; /** * Return full path to image. * @return string path to file to make thumb */ public function fullPath() { return "data/files/{$this->filename}"; } /** * Renders HTML IMG for thumb of given size. * * @param int $width max width, set to -1, if not important * @param type $height max height, set to -1, if not important * @return string html tag for image with correct width and height attributes */ public function htmlTag($width, $height) { $t = $this->getThumb($width, $height); return "<img src=\"{$t}\" alt=\"{$this->caption}\" width=\"{$width}\" height=\"{$height}\" />"; } /** * Get/create thumb image * @param int $width width of the image * @param int $height height of the image * @return string path to the image */ public function getThumb(&$width, &$height) { $currentImage = $this->fullPath(); $thumbFilename = md5($this->path . $width . $height) . '.png'; $thumbDir = 'data/thumbs/'; $thumbFilename = "{$thumbDir}/{$thumbFilename}"; // thumb already done? if (is_file($thumbFilename)) { // get real size to create correct html img tag if ($width<0 || $height<0) { $size = getimagesize($thumbFilename); $width = $size[0]; $height = $size[1]; } return $thumbFilename; } $ext = strtolower(pathinfo($currentImage, PATHINFO_EXTENSION)); if ($ext == 'jpeg' || $ext == 'jpg') { $source = imagecreatefromjpeg($currentImage); } else if ($ext == 'gif') { $source = imagecreatefromgif($currentImage); } else if ($ext == 'png') { $source = imagecreatefrompng($currentImage); } $currentWidth = imagesx($source); $currentHeight = imagesy($source); // the sizes which we really will apply (default setup) $realWidth = $width; $realHeight = $height; $realX = 0; $realY = 0; // decide regarding cutting // if all params > 0, cuttin will be done $cut = FALSE; if ($width > 0 && $height > 0) { $cut = TRUE; } else if ($width < 0) { // width is not important, set proportion to that $width = $realWidth = round($currentWidth * $height / $currentHeight); } else if ($height < 0) { // height is not imporant $height = $realHeight = round($currentHeight * $width / $currentWidth); } if ($cut) { $kw = $currentWidth / $width; $kh = $currentHeight / $height; $k = $kw < $kh ? $kw : $kh; $realWidth = round($currentWidth / $k); $realHeight = round($currentHeight / $k); if ($kh < $kw) { $realX = round(($realWidth - $width) / 2) * $k; } else { $realY = round(($realHeight - $height) / 2) * $k; } } $virtual = imagecreatetruecolor($width, $height); imagealphablending($virtual, false); $col = imagecolorallocatealpha($virtual, 0, 0, 0, 127); imagefill($virtual, 0, 0, $col); imagesavealpha($virtual, true); imagecopyresampled($virtual, $source, 0, 0, $realX, $realY, $realWidth, $realHeight, $currentWidth, $currentHeight); // create file imagepng($virtual, $thumbFilename); return $thumbFilename; } } </code></pre> <p>Usage:</p> <pre><code>$image = new Image(); $image->filename = "image.jpeg"; // really stored in 'data/files/image.jpg', let's say 300x400px $image->caption = "My Image"; // get thumb 50x50: left and right parts of image will be cut off echo $image->htmlTag(50, 50); // get thumb of width 100 (height does not matter, keep proportions) echo $image->htmlTag(100, -1); // get thumb of height 100 (width does not matter, keep proportions) echo $image->htmlTag(-1, 100); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload