Jump to content
  • Announcements

    • boen_robot

      Guidelines and Netiquette   03/28/2017

      Posting Problems:   Having problems posting your topic? Read through this: To join, you agree to our terms and conditions and fill out and submit a registration form. An activation email will be sent to your email adress, so you'll need to verify your account. After that the account has to be validated by one of the moderators. This will mean that it can take up to a day to be activated. A couple of things to remember to ensure approval: Don't use an email address in one of those $2 four character .com domains eg. xyds.com. These will be deleted and the domain added to the banned list. Don't use an email address that is within a domain with a bad reputation for spam. A Google search is run on every email address and email domain. Don't sign up with an email address that doesn't exist, doesn't work or requires the sender to answer a quiz before their email can get to you. Put your country and or state and city in the signup form. Blank forms will go to the botton of the "to do" list. And make sure that your email address and your country match, saying you're from Alabama and using a .ru email address is not going to get you activated. After a membership is activated the first few posts will be monitored. Posting spam or unapproved topics described in the agreement results in an immediate ban. The email provider and the IP addresses associated with the account will be banned and all posts will be deleted. These strict measures have been deemed necessary to hinder spam. Sorry for any inconvenience this causes, but it's not liable to change. If, after reading this, you still can't post and don't understand why, contact one of the Moderators listed here.   Topic Guidelines   Including the following information can expedite an accurate response from board members: Must be a Specific Problem or Question related to web design and development Include Code in Question (wrap with   for small blocks of code and for longer blocks   ) Include Code Author Include Extra Notes/Modifications/Attempts Include web link to page/file when possible Content Guidelines   You may not post, upload, link to, or email any Content that contains, promotes, gives instruction about, or provides prohibited Content. Prohibited Content includes any Content that breaks any local, state, county, national or international law. Prohibited Content also includes: No direct or indirect advertising or websites, forums, products, services No hijacking of posts (do not post your question in someone elses) Content that infringes upon any rights [ex. MP3s and ROMs] (including, but not limited to, copyrights and trademarks) Abusive, threatening, defamatory, racist, or obscene Viruses or any other harmful computer software False Information or libel Spam, chain letters, or Pyramid schemes Gambling or Illicit drugs Terrorism Hacking or cheating for internet/online games Warez, Roms, CD-Keys, Cracks, Passwords, or Serial Numbers Pornography, nudity, or sexual material of any kind Excessive profanity Invasive of privacy or impersonation of any person/entity Hacking materials or information Posting Tips   There are more BBcodes than there are buttons for on the reply menu. To get the full list, click "BB Code Help" underneath the clickable smilie face menu. Use   for small snippets of code Use   for lengthy snippets of code Use   if your snippet is HTML (optional) Use   if your snippet is SQL (optional) Rules of Conduct   Be nice. There's no need for calling someone stupid if they ask an 'easy' question. Keep your avatars and signatures absolutely child friendly. We have a younger audience on this forum. Keep your language appropriate for the same reason above. Do not PM moderators for help on the forum. Post on the topic, or create a new one.   Spam:   Recently, as you have all without doubt noticed, we have had lots of spam and advertisement on the forum. Therefore, we'd like to alert you as to what to do when you have found any of the aforementioned annoying messages: it. Immediately. Give a clear reason, please, if the advertising is not evident. DO NOT POST! Report, let the post stay as is, and we will get to it, meanwhile if you continue to post as normal in the other threads, it won't be on the top so long. Refrain from PMing the member. This won't help at all, as they are most likely spambots anyway. Thank you.       Images in signatures:   After thinking of users on dial-up, we have decided to enforce the following rules regarding signatures. Please pay heed to them. Respecting these rules is respecting the members on this forum with dial-up. Signature rules: No animated images AT ALL. No matter the amount of animation. Maximum image widthxheight: 300x150 Maximum image (file) size: 15kb Use calm colors. Do not use highly contrasting images in your signature, as this can get really annoying when seeing several posts from one member in the same thread. The same prohibited content goes for images as for posts. Lastly, use common sense. No lengthy signatures please. Save us some scrolling. Thank you.       Links in signatures:   Please understand that w3schools.com only exists because of voluntary work and is barely supported by the advertising littered throughout the tutorials and the forum. So, please, stop advertising other sites. DO not post links that drive traffic away from the w3schools domain - especially to a site that offers similar if not identical information. Please help support the site by keeping individuals on it. Thank you. Here are some guidelines as to what you can put in your signature: w3schools links --> allowed w3.org links --> allowed browser links --> allowed html editor links --> allowed personal sites --> allowed tutorial sites competing with w3schools --> NOT allowed sites completely irrelevant to webprogramming and this forum --> NOT allowed   Thanks for understanding, and for taking the time to read this. ~W3Schools Modstaff~
bigsilk

Resizing Images Relative To Their Original Size...

Recommended Posts

bigsilk    0

I'm putting together a page that uses thumbnails of paintings. The paintings are different sizes, and I want the thumbnails to be relative in size to each other and the original (thus, if a painting is 5x10, I want the thumb to be .05x.10, but if another painting is 10x20, I want the thumb to .10x.20) As it happens, all the thumbs are ending up at the same height.Page:Visit the pageAnd here's the css I'm using:

body{}div.wall{width: 746px;height: 450px;text-align: center;vertical-align;center}img.gallery{width:auto;height:25%;margin:10px;}

Share this post


Link to post
Share on other sites
boen_robot    105

It would be nice if the page was actually showcasing the problem, as it seems fine to me.Either way, you should have different copies of the images for each size, and display them accordingly.

Share this post


Link to post
Share on other sites
bigsilk    0
It would be nice if the page was actually showcasing the problem, as it seems fine to me.Either way, you should have different copies of the images for each size, and display them accordingly.
The problem is that each of the images are different sizes. The painting of the woman's back is twice as tall as the guitar painting, but it appears to be the same height. The images in the directory are different sizes, but the thumbs appear the same height. This is what I'm trying to overcome, having the the thumbs represent a scale of the original.

Share this post


Link to post
Share on other sites
boen_robot    105

What is the PHP code you're currently using to generate the thumbnails? CSS isn't even close to the prolem.

Share this post


Link to post
Share on other sites
bigsilk    0

I put it here by accident. I was doing a search on a possible solution and found a search hit in .php, then hit post new topic when I couldn't find what I was looking for.Sorry.I'll contact an admin to have it moved.Nonetheless, I still have the problem.

Share this post


Link to post
Share on other sites
dsonesuk    713

i've just put this together, which sorts out the resize and positioning issue<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function resizeme(){imgtotal = document.images.length;requiredimgsize = 50; //percentagefor(i=0;i<imgtotal;i++){currentHeight = document.images.height;currentWidth = document.images.width;newHeight = (currentHeight/100)*requiredimgsize;newWidth = (currentWidth/100)*requiredimgsize;document.images.style.width=parseInt(newWidth)+"px";document.images.style.height=parseInt(newHeight)+"px";document.images.style.marginTop="-"+((parseInt(newHeight))/2)+"px";}}window.onload=resizeme;/*--*//*]]>*/</script> <style type="text/css">.wall img{ border: 1px solid #00ff00; top: 50%; position: relative; padding: 0 10px;}.wall a {display: block; float:left; height: 100%; border: 1px dashed #0000ff; }</style></head><body><div class="wall" style="border: 1px dashed red; background-color:#FF9933; height: 100px; overflow:hidden;"><a href="#"><img src="one.png" /></a><a href="#"><img src="two.png" /></a><a href="#"><img src="three.png" /></a><a href="#"><img src="four.jpg" /></a></div></body></html>

Edited by dsonesuk

Share this post


Link to post
Share on other sites
justsomeguy    958

That's going to resize every single image on the page, including the interface graphics (e.g. the couple sitting on the bench). If the interface graphics are converted to background images in CSS the Javascript should work (i.e., if the only images on the page are the paintings).It looks like all of your pages are just static HTML pages. If you aren't using PHP to upload the images, if you're just building the pages with the images there, the best thing to do is to resize the images yourself and create thumbnails. That way people don't have to download the full images only to have them resized smaller, you can save yourself some bandwidth and save transfer time and give them the thumbnails first which can link to the larger images. Or, you can also use PHP to set up an upload form where it can resize the images automatically and create thumbnails when you upload a new image. Or, you can have a PHP script that will resize each image dynamically when they load up the page. That may be a bit slow (it may take .5 seconds per image), but it may give you the most flexibility.

Share this post


Link to post
Share on other sites
dsonesuk    713

Oh my Gosh you are right! the background colours, solid borders, not to mention dashed borders, and there's totally the wrong number of images, wrong background(well there's no background actually) all would make this code unusable. if only there was a way to remove these, and restrict the number of images to be resized and reposition? looks like a job for Mr Picky! enter YOU.

Share this post


Link to post
Share on other sites
justsomeguy    958

You don't take criticism very well, do you? I'm simply trying to cover the possible options, you can appreciate that right? Javascript is good for a lot of things, but it's not always the best tool for the job. But, like they say, if all you have is a hammer, everything looks like a nail.This is the solution I was talking about. This is a PHP script that will resize the image for you, I've modified my image resize function to accept a percentage argument and a display argument that controls whether it saves as a new file or just outputs to the browser:

<?phpif (isset($_GET['image']))  $image = trim($_GET['image']);if ($image == "")  exit("no image");$w = isset($_GET['w']) ? $_GET['w'] : 0;$h = isset($_GET['h']) ? $_GET['h'] : 0;$pct = isset($_GET['pct']) ? $_GET['pct'] : 0;resize_image(array(  'source' => $image,  'w' => $w,  'h' => $h,  'pct' => $pct,  'disp' => true));function resize_image($opts){  $src = isset($opts['source']) ? $opts['source'] : '';  $dest = isset($opts['dest']) ? $opts['dest'] : '';  $w = isset($opts['w']) ? intval($opts['w']) : 0;  $h = isset($opts['h']) ? intval($opts['h']) : 0;  $pct = isset($opts['pct']) ? floatval($opts['pct']) : 0;  $disp = isset($opts['disp']) ? $opts['disp'] : false;  if ($src == '')  {	echo 'no source';	return;  }  if ($w == 0 && $h == 0 && $pct == 0)  {	echo 'no size';	return;  }  if ($dest == '')	$dest = $src; // resize in place  // open the image  $ext = strtolower(array_pop(explode('.', $src)));  switch ($ext)  {	case 'jpg':	case 'jpeg':	  $i = imagecreatefromjpeg($src);	break;	case 'gif':	  $i = imagecreatefromgif($src);	break;	case 'png':	  $i = imagecreatefrompng($src);	break;	default:	  echo 'bad extension';	  return;  }  $new_w = imagesx($i);  $new_h = imagesy($i);  if ($pct == 0)  {	if (($w != 0 && $new_w < $w && $h == 0) ||		($w == 0 && $h != 0 && $new_h < $h) ||		($w != 0 && $new_w < $w && $h != 0 && $new_h < $h))	{	  // image is small enough	  if ($dest != $src)	  {		if (!$disp)		{		  copy($src, $dest);		  return;		}	  }	}	else	{	  // determine new size	  if ($w != 0 && $new_w > $w)	  {		$new_h = ($w / $new_w) * $new_h;		$new_w = $w;	  }	  if ($h != 0 && $new_h > $h)	  {		$new_w = ($h / $new_h) * $new_w;		$new_h = $h;	  }	}  }  else  {	$new_w *= $pct;	$new_h *= $pct;  }  // resize  $new = imagecreatetruecolor($new_w, $new_h);  imagecopyresampled($new, $i, 0, 0, 0, 0, $new_w, $new_h, imagesx($i), imagesy($i));  imagedestroy($i);  if (!$disp)  {	// save the image	switch ($ext)	{	  case 'jpg':	  case 'jpeg':		imagejpeg($new, $dest);	  break;	  case 'gif':		imagegif($new, $dest);	  break;	  case 'png':		imagepng($new, $dest);	  break;	}  }  else  {	// output to browser	switch ($ext)	{	  case 'jpg':	  case 'jpeg':		header('Content-type: image/jpeg');		imagejpeg($new);	  break;	  case 'gif':		header('Content-type: image/gif');		imagegif($new);	  break;	  case 'png':		header('Content-type: image/png');		imagepng($new);	  break;	}  }  imagedestroy($new);}?>

If you save that file as resize_img.php, you can use this code to show "guitar.jpg" at 25% of original size:<img src="resize_image.php?image=guitar.jpg&pct=.25">or at 320x240:<img src="resize_image.php?image=guitar.jpg&w=320&h=240">or at a height of 100px, and resize the width to match:<img src="resize_image.php?image=guitar.jpg&h=100">You can call that picky if you want, I prefer to call it the best tool for the job.

Edited by justsomeguy

Share this post


Link to post
Share on other sites
Max Castril    0

Hi there

I have a website ( www.beautifulcastril.com ) which has approx 1,400 images of the area.  I have just included a 'view images' section which displays thumbnails whch you can then click on to see the full sized image.  The images from which I am producing the thumbnails are 512 x 384px and the large images are 1600 x 1200px.  As I am displaying the images at a width of 150px, I would like to use php to reduce the 512px images to 150px before download to reduce server load and screenfll time.  I have looked through the code from justsomeguy but it seems awfully complex (to a simple soul like me!).  Is there no php instruction such as 'resize('myimage.jpg',150) ?? I don't need to test for the existence of a file as I have just found it with glob().

 

I have trawled through the imagick manual but just get more and more baffled, apart from the fact that it seems that my server (1and1.es) doesn't support imagick.  

 

I can always trawl through 1,400 images and load them individually into MS Paint, resize them, save them on the PC and then upload them via FileZilla but it will take hours and is not very elegant.

 

All advice will be much appreciated.

 

Regards from a very sunny Spain.

Max

all_images.php

Share this post


Link to post
Share on other sites
dsonesuk    713
6 hours ago, Max Castril said:

I have trawled through the imagick manual but just get more and more baffled, apart from the fact that it seems that my server (1and1.es) doesn't support imagick.

Really? maybe is a Spain hosting problem, because they show how to install here https://help.1and1.com/hosting-c37630/webspace-and-access-c85098/ssh-c37775/install-imagemagick-via-ssh-a649013.html

 

  • Like 1

Share this post


Link to post
Share on other sites
dsonesuk    713
7 hours ago, Max Castril said:

I can always trawl through 1,400 images and load them individually into MS Paint, resize them, save them on the PC and then upload them via FileZilla but it will take hours and is not very elegant.

Well it would using MS Paint, but using FastStone Photo Resizer, it will do multiple selected images, to a specific size proportionately, rename adding custom suffix like '_thumb', and save to alternative format, to a destination you chose.

  • Like 1

Share this post


Link to post
Share on other sites
Max Castril    0

Thanks, dsonesuk.  I will work on your advice. 

 

The FastStone looks really good - I will probably just use that in future instead of MS Paint.  I think the imagick is a bit beyond my powers of understanding, to be honest.

 

Thanks

Max

 

Share this post


Link to post
Share on other sites
dsonesuk    713

You would only use ImageMagik for formats that php imagecreate functions can't process, like tiff images to jpg/png that was brought up in recent topic, for jpg/png/gif images, php should be able to resize/rename/relocate without the need for imagemagick.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×