Inscribe an image into container using PHP server-side codePublished: Friday, 08 February 2013 16:20 Written by Ogri Hits: 13284
The problem arose when I was making a website with an online store. Pictures of products on the pages have to be displayed identically, whereas the customer has pictures of all possible sizes and proportions. In order to free him from the image editing, it was decided to inscribe them in a container - <div>
block of fixed size, framed with border. Horizontally elongated images will be inscribed by width, while vertically elongated ones - by height respectively. The images should be clickable.
Actually, the problem is quite typical and has existing solutions, for example, only using CSS-styles. However, when such a powerful weapon as a server-side code is in hands, it's a sin not to use it when you are rather a programmer than a designer. So I wrote a function that covers every possible aspect ratio of the container and inscribed image. Let me offer it to the public.
Let's call our function out_adjusted_link_image
. Its definition will look like this:
function out_adjusted_link_image($img_file, $img_alt, $img_title,
$a_href, $div_wd, $div_ht,
$div_more_style = '', $a_more = '')
Parameters:
$img_file
$img_alt, $img_title
$a_href
$div_wd, $div_ht
$div_more_style
$a_more
Function return value - string containing HTML-script of our construction container - link - image.
We build the body of the function. Step by step:
1. Define the constants that specify both dimensions by which we inscribe:
define('ALIGN_BY_WD', 0);
define('ALIGN_BY_HT', 1);
2. Find image size. To do this, use the function getimagesize()
. As an argument, this function requires the image file name, including path to it. It returns an array of 7 elements, of which we are interested in the first two (ie indexes 0 and 1) containing respectively the width and height of the image.
$size = getimagesize($img_file);
$img_wd = $size[0];
$img_ht = $size[1];
3. Determine which dimension will be used to inscribe. If the container is more vertically "flattened" than the image, so after adjusting the size the image will be fit by height, otherwise, - by width. This logic is implemented in the following PHP code snippet:
if ($div_wd / $div_ht > $img_wd / $img_ht)
$align = ALIGN_BY_HT;
else
$align = ALIGN_BY_WD;
A special case when proportions of both rectangles are equal, and you can align in any dimension, is processed in the else
block.
4. Now we can inscribe our picture into container. To do this, we calculate the width and height of the inscribed image - $new_img_wd
and $new_img_ht
. For subsequent centering also define variables $rel_edge
and $abs_edge
- edges for relative and absolute positioning on relevant measurements, and $new_img_dim
- the size that will be used to set the indent. Assign values to them in accordance with the directions of alignment.
if ($align == ALIGN_BY_HT) {
$new_img_ht = $div_ht;
$new_img_wd = $new_img_ht * $img_wd / $img_ht;
$rel_edge = 'left';
$abs_edge = 'top';
$new_img_dim = $new_img_wd;
}
else {
$new_img_wd = $div_wd;
$new_img_ht = $new_img_wd * $img_ht / $img_wd;
$rel_edge = 'top';
$abs_edge = 'left';
$new_img_dim = $new_img_ht;
}
5. Center the image. Picture inscribed by width will be vertically adjusted, while the one inscribed by height - horizontally. To do this, use the technique of alignment as described in the previous article. Assign the required string of style to the variable $img_style
:
$img_style = 'position:absolute; ' . $rel_edge . ':50%; width:' .
$new_img_wd . 'px; height:' . $new_img_ht . 'px; margin-' .
$rel_edge . ':-' . ($new_img_dim / 2) . 'px; ' .
$abs_edge . ':0';
Now we can build a whole structure container - anchor - image, and such a string will be returned by the function:
return '<div style="position:relative; width:' . $div_wd .
'px; height:' . $div_ht . 'px; border:1px solid silver;' .
$div_more_style . '"><a href="' . $a_href . '" '. $a_more .
'><img src="' . $img_file . '" alt="' . $img_alt . '" title="' .
$img_title . '" style="' . $img_style . '" /></a></div>';
Here's how this structure looks in a browser:
Have we achieved the desired result? Not really. Try to move the cursor over our block and see that the margins between the image and the edges of the container are beyond the link. To ensure the link to cover the entire block, do the following:
- Place our inscribed and centered image before the link anchor.
- Instead, place transparent PNG-image inside the anchor, and specify the size of this image to be the same as the size of the container.
Thus, our picture becomes overlapped with the transparent image and remains visible yet. The zone of link action expands to fill the container.
The modified code snippet that returns the value of the function takes the following form:
return '<div style="position:relative; width:' . $div_wd .
'px; height:' . $div_ht . 'px; border:1px solid silver;' .
$div_more_style . '"><img src="' . $img_file . '" style="' .
$img_style . '" /><a href="' . $a_href . '" '. $a_more .
'><img src="images/Transparent.png" alt="' .
$img_alt . '" title="' . $img_title . '" width="' .
$div_wd . '" height="' . $div_ht .
'" style="position:absolute; top:0px; left:0px;" /></a></div>';
Place your cursor now and experience the difference:
Bringing together all of the above code parts, we get the function in its final form:
function out_adjusted_link_image($img_file, $img_alt, $img_title,
$a_href, $div_wd, $div_ht,
$div_more_style = '', $a_more = '') {
define('ALIGN_BY_WD', 0);
define('ALIGN_BY_HT', 1);
$size = getimagesize($img_file);
$img_wd = $size[0];
$img_ht = $size[1];
if ($div_wd / $div_ht > $img_wd / $img_ht)
$align = ALIGN_BY_HT;
else
$align = ALIGN_BY_WD;
if ($align == ALIGN_BY_HT) {
$new_img_ht = $div_ht;
$new_img_wd = $new_img_ht * $img_wd / $img_ht;
$rel_edge = 'left';
$abs_edge = 'top';
$new_img_dim = $new_img_wd;
}
else {
$new_img_wd = $div_wd;
$new_img_ht = $new_img_wd * $img_ht / $img_wd;
$rel_edge = 'top';
$abs_edge = 'left';
$new_img_dim = $new_img_ht;
}
$img_style = 'position:absolute; ' . $rel_edge . ':50%; width:' .
$new_img_wd . 'px; height:' . $new_img_ht . 'px; margin-' .
$rel_edge . ':-' . ($new_img_dim / 2) . 'px; ' .
$abs_edge . ':0';
return '<div style="position:relative; width:' . $div_wd .
'px; height:' . $div_ht . 'px; border:1px solid silver;' .
$div_more_style . '"><img src="' . $img_file . '" style="' .
$img_style . '" /><a href="' . $a_href . '" '. $a_more .
'><img src="images/Transparent.png" alt="' .
$img_alt . '" title="' . $img_title . '" width="' .
$div_wd . '" height="' . $div_ht .
'" style="position:absolute; top:0px; left:0px;" /></a></div>';
}
Here is an example of the function call. It renders in your browser this nice monkey inscribed into the clickable square:
echo out_adjusted_link_image('images/monkey.jpg', 'Monkey', 'Monkey',
'#anchor', 200, 200,
'left:50%; margin-left:-100px', 'target="_blank"');
Here the container itself is also centered horizontally within its own parent block in the same manner.
In one of the later articles I'm planning to explain, how I embed this code into the content of material in Joomla website.
Latest News
-
Tuesday, 21 July 2020 03:18
Joomla 3: Redirect to same page after successful login -
Saturday, 30 December 2017 16:11
Joomla: how to add your own language constants or override existing ones -
Thursday, 30 November 2017 23:27
Joomla: Integrate reCAPTCHA v2 (NO CAPTCHA) into JComments -
Saturday, 25 June 2016 15:33
Unified filtering of mod_jcomments_latest module's output -
Thursday, 17 September 2015 16:23
Post an illustrated Joomla-site article on Facebook using OG-tags
Articles Most Read
-
133540
Migrating from Joomla 1.5 to Joomla 2.5. Part 2-1. Transferring jDownloads and jComments -
65242
Joomla: Integrate reCAPTCHA v2 (NO CAPTCHA) into JComments -
37684
Editing animated GIF-images in Photoshop CS3 -
37038
Migrating from Joomla 1.5 to Joomla 2.5. Part 2-2. Template, editor, and other extensions -
32424
Migrating from Joomla 1.5 to Joomla 2.5. Part 1. Transferring content
Login
Guest Column
Recent comments
-
Custom 404 error page in Joomla 2.5
-
lpay game online 11.08.2022 23:01
-
web site 11.08.2022 21:39
Hello, this weekend is good for me, as this moment i am reading this great informative piece of writing ...
-
homepage 11.08.2022 16:35
It's a pity youu don't have a donate button! I'd definitely donate to this brilliant blog! I suppose ...
-
homepage 11.08.2022 15:16
Hello There. I discovered your blog the usage of msn. That is a really smartly written article. I'll ...
-
-
Joomla: Integrate reCAPTCHA v2 (NO CAPTCHA) into JComments
-
gambling online 10.08.2022 16:31
It's amazing to pay a visit this site and reading the views of all mates concerning this article ...
-
-
Joomla: Merge two sites into one using component J2XML
-
ekonomi son dakika 11.08.2022 18:34
Today, I went to thhe beach with my kids. I found a sea shell and gave it to my 4 year old daughteer ...
-
ege güncel haber 11.08.2022 06:26
Unquestionably believe that which you stated. Your favorite reason seemed to be on the net the easiest ...
-
-
Migrating from Joomla 1.5 to Joomla 2.5. Introduction
-
ceri 138 11.08.2022 09:33
I'm gone to convey my little brother, that he should also pay a visit this website on regular basis to ...
-
-
Migrating from Joomla 1.5 to Joomla 2.5. Part 2-2. Template, editor, and other extensions
-
PG SLOT เว็บตรง 10.08.2022 17:19
pg slot เว็บตรงมาแรงจนฉุดไม่อยู่ เล่นง่าย จ่ายทุกบิล ทำเทิร์นน้อยสำหรับโบนัส แล้วก็ โปรโมชั่นที่ท่านเลือก ...
-
-
Post an illustrated Joomla-site article on Facebook using OG-tags
-
Seo package Prices 11.08.2022 18:28
%% Stop by my blog post: Seo package Prices ...
-
Read more...