How do I Crop an image in CoffeeCup...

Oct 22nd, 2010 at 06:29 PM
User 2042229 Photo

Daniel V Taylor
Registered User
5 posts

Hello All,

I have 2 cameras which automatically upload weather data (images) to my web host. My problem is, I haven't been able to find a way in CoffeeCup to crop the images. Seems like all I'm able to do is shrink them down to the size I want on the page. But I don't want the image data to be shrunk. I just want to crop out everything in the pictures which aren't actual data (from the weather station). Then, I want the crop to be persistent on successive image updates. Of course, I need to size the images too. In a nutshell, I need to be able to crop the junk, then size to fit.

I was able to do this using "WebEasy", but there are things I really don't like about it. I don't want to have to go back to using it, just because of this one issue.

I would sure appreciate some help on this. This is the one thing holding me up.

Thanks,

Dan
tarpanet
Oct 22nd, 2010 at 07:38 PM
User 122279 Photo

Inger
Senior Advisor
14,649 posts
Online Now

I think you need to use an iframe for this.

Just paste this code into the page you want it to appear on:

<iframe width="600" height="400" src="weatherdata.html"></iframe>


...and set the dimensions so that it only displays what you want people to see. You then create another html page with the actual weather data, I called it here weatherdata.html.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Oct 23rd, 2010 at 06:54 PM
User 2042229 Photo

Daniel V Taylor
Registered User
5 posts

Inger,

For whatever reason, the iframe didn't work for me. I could see the frame. But with no content. I went back and looked at how WebEasy made it work. Looks like they do it through CSS. If I work at it long enough, I imagine I'll get it where I want it. :)

Thanks for the help!
tarpanet
Oct 24th, 2010 at 05:14 PM
User 463058 Photo

Cary
Ambassador
1,086 posts
Online Now

If you want to crop an image, then clip styling might work.
http://reference.sitepoint.com/css/clip
Oct 27th, 2010 at 05:13 PM
User 2042229 Photo

Daniel V Taylor
Registered User
5 posts

Cary,

Thanks for the tip! I don't know whether or not I should care that IE only partially supports clip styling? In any case, what I'm working on is more for fun than anything else.

Thanks again!
tarpanet
Oct 28th, 2010 at 02:04 AM
User 463058 Photo

Cary
Ambassador
1,086 posts
Online Now

I only suggest that method because you mentioned you will need the image resized as well. If the image size isn't going to be changed using html, then the image can just be applied as the background of a div of a specified size. Then the div would effectively crop the background image. Background image positioning can also be used to make sure the div is revealing the area of the image you want to show.
Oct 31st, 2010 at 08:40 AM
User 528054 Photo

Peter G
Registered User
209 posts

Hello,

I am sorry if I have misread some of the points here.. But I edit the photo/picture
before i upload them. As I want to maintain the clarity sometimes.

There are quite a few ways of doing it I should think, but I have found a program called
'Window Clippings' to be just the job, it works on the fly from the task bar and cropping is really easy.
Right click to copy to clipboard or send it direct to am image manipulation program.
You can use it any time at all, as it grabs whatever you frame on the screen...

It is perfect for cropping your image and then saving for reuse... Maybe!

http://www.windowclippings.com/

Regards
Peter
Oct 31st, 2010 at 11:16 PM
User 2042229 Photo

Daniel V Taylor
Registered User
5 posts

Cary,

I'm beginning to see that I need to get more educated on HTML/CSS...etc. So far, I've been trying to use visual editors much like a crutch, in the hopes that they would allow me to accomplish what I want. Enter w3schools. I've already started the HTML tutorial... ;) In the process, I'll get to understand <div>. Thanks again!

Peter,

Thank you too for your response. For my purpose, I can't use a snippet of an image. Because the image is rewritten every couple of minutes, it would revert to the native resolution.

- Dan -
tarpanet
Nov 12th, 2010 at 07:19 AM
User 2042229 Photo

Daniel V Taylor
Registered User
5 posts

Well, it took awhile. But I finally figured out how to get my images cropped (instead of getting squished). To recap a little, Avanquest WebEasy was able to do this from the visual editor. But, I didn't understand HOW it did it. To find out, I stripped out EVERYTHING that didn't have to do with this image cropping business, and was left with the following;

In 'index.html';
<html>
<head>
<link rel="stylesheet" type="text/css" href="index_p.css" media="screen,projection,print"/>
</head>
<body>
<span id="e2"></span>
</body>
</html>

In 'index_p.css';
span#e2 { /* sky001001.jpg */
background : transparent url(sky001001.jpg) no-repeat top left;
position : absolute;
left : 209.00pt;
top : 75.00pt;
width : 200.00pt;
height : 275.00pt;
}

As a test, I tried using the '<img src=...>' tag. But that just squeezed the content of the image when resized smaller (instead of cropping the right, & bottom of the image, as I wanted). After that test, I retried with '<span id="e2"></span>'. I haven't yet figured out WHY this works, when the '<img>' tag doesn't? But, at least I can now continue on rebuilding my weather site!

Note that if I resize the image in the CC html editor, the changes are made to the <span> tag, in index.html, which override the values in the css file.

- Dan -
tarpanet
Nov 20th, 2010 at 01:09 AM
User 463058 Photo

Cary
Ambassador
1,086 posts
Online Now

tarpanet wrote:
As a test, I tried using the '<img src=...>' tag. But that just squeezed the content of the image when resized smaller (instead of cropping the right, & bottom of the image, as I wanted). After that test, I retried with '<span id="e2"></span>'. I haven't yet figured out WHY this works, when the '<img>' tag doesn't? But, at least I can now continue on rebuilding my weather site!


When using IMG, you are basically grabbing the edges of the image and either stretching or squishing it. The complete image always resizes as necessary to fill the height and width specified.

The SPAN is using the method I suggested above, but it uses a span instead of a div. Think of it as a transparent box with your image applied as a background. The background image cannot change size, but changing the size of the span or div will affect how much or how little of the background image can be seen.

The css uses "top left" for the background image positioning. Other values can be used instead of top and left to shift the image up, down, left or right within the span.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.