Back

Handling Images in FMTC’s Deal Feeds

Twitter Facebook Linked In Paper Plan

Handling Images in FMTC’s Deal Feeds

How To Handle Images in FMTC’s Deal Feeds

Some deals, including many of our local feed, include an image that goes along with the deal. When returning the deal via our API or Pod source, we give you the image URL and leave it up to you to decide what to do with it.

[
    {
        ...
        "cImage": "http://img.grouponcdn.com/iam/pRJ4J8LuLvmKxW26RW72/KH-2592x1555/v1/t440x300.jpg",
        ...
    }
]

Hotlink

The easiest way to use this image is to hotlink to it:

<img src="http://img.grouponcdn.com/iam/pRJ4J8LuLvmKxW26RW72/KH-2592x1555/v1/t440x300.jpg" />

Which produces:
Buffalo Wings

Resize

But sometimes you want to resize the image to fit your design. Let’s say you only support images 200px wide
<img src="http://img.grouponcdn.com/iam/pRJ4J8LuLvmKxW26RW72/KH-2592x1555/v1/t440x300.jpg" width="200" />

Gives you:

But this will stretch images which are small, and you set the width larger than the image width:
<img src="http://img.grouponcdn.com/iam/pRJ4J8LuLvmKxW26RW72/KH-2592x1555/v1/t440x300.jpg" width="600" />

Gives you:

If you want to set the maximum width, use css:
<img src="http://img.grouponcdn.com/iam/pRJ4J8LuLvmKxW26RW72/KH-2592x1555/v1/t440x300.jpg" style="max-width:200" />

<img src="http://img.grouponcdn.com/iam/pRJ4J8LuLvmKxW26RW72/KH-2592x1555/v1/t440x300.jpg" style="max-width:600" />

(only 440 wide, because the actual width is less than the maximum width)

Getting the image dimensions

If you want to get the actual image dimensions, you can do so in PHP:

$size = getimagesize("http://img.grouponcdn.com/iam/pRJ4J8LuLvmKxW26RW72/KH-2592x1555/v1/t440x300.jpg");
print_r($size);
Array
(
    [0] => 440
    [1] => 263
    [2] => 2
    [3] => width="440" height="263"
    [bits] => 8
    [channels] => 3
    [mime] => image/jpeg
)

You can see the width is in index 0, the height in index 1, and the width / height parameters in index 3. Your final script would be:

$size = getimagesize("http://img.grouponcdn.com/iam/pRJ4J8LuLvmKxW26RW72/KH-2592x1555/v1/t440x300.jpg");
echo '<img src="http://img.grouponcdn.com/iam/pRJ4J8LuLvmKxW26RW72/KH-2592x1555/v1/t440x300.jpg" ' . $size[3] . ' />';

and you’d output:
<img src="http://img.grouponcdn.com/iam/pRJ4J8LuLvmKxW26RW72/KH-2592x1555/v1/t440x300.jpg" width="440" height="263" />

You can resize this image via html with some simple math:

$size = getimagesize("http://img.grouponcdn.com/iam/pRJ4J8LuLvmKxW26RW72/KH-2592x1555/v1/t440x300.jpg");

$nMaxWidth = 400;

if($size[0] > $nMaxWidth) {
	$nWidth = $nMaxWidth;
	$nHeight = round(($size[1]*$nMaxWidth)/$size[0]);
}
else {
	$nWidth = $size[0];
	$nHeight = $size[1];
}

echo '<img src="http://img.grouponcdn.com/iam/pRJ4J8LuLvmKxW26RW72/KH-2592x1555/v1/t440x300.jpg" width="' . (int)$nWidth . '" height="' . (int)$nHeight . '" />';

Which would produce
<img src="http://img.grouponcdn.com/iam/pRJ4J8LuLvmKxW26RW72/KH-2592x1555/v1/t440x300.jpg" width="400" height="239" />

Download to your server

If you want to download the image to your own server, and serve it locally, you can use file_get_contents() or wp_insert_attachment() if you’re writing for WordPress.

Related Posts