开发者

How can I apply classes to images based on their aspect ratio with PHP?

I'm working on a drupal6 site and I've got a page that shows thumbnail images (linked to full node content).

The images are currently allowed to have a dynamic width based on the parent div, and are both vertical and horizontal.

the problem I'm having is that there is a max-width applied to these images, which crushes my horizontal images. the question I have is: how can I use PHP to get the image element which has a unique ID,开发者_开发问答 discover if it is horizontal or vertical and apply a CSS class based on the image's aspects.

I'd need to either put this in my template.php as a pre-process, or in my page.tlp.php. I can't use Jquery/javascript because I can't risk the FOUC. I also and developing this site as a multi-site drupal instal per instructions, and I'm not allowed to have anything outside my own site directory folder.

I've looked at getimagesize() and getElementsByTagName() but I'm just not sure how to put it together as my PHP is pretty limited. I'm hoping that someone here can point me in the right direction VS giving my the answer.

Thanks Stephanie


Basically use getimagesize to extract the width and the height of the image. Then compare the two. If width is bigger than height, print image-horizontal, else print image-vertical. Here is a sample code that will do the job. It uses list to get just the first two elements of the returned by getimagesize array which are the widht and the height. Then inside the echo statement, we do the check and print the appropriate class:

list($width, $height) = getimagesize($your_full_path_to_image);
echo '<img src="'.$your_url_to_image.'" class="'.(($width > $height) ? 'image-horizontal' : 'image-vertical').'" />';


As a follow up, I'm sorry to say I never got this working in the way I'd laid out in my original question. I'm not sure if it wasn't possible, not possible in my specific instance, or if I was simply unable to figure it out.

I ended up using straight css to do the scaling and faked a consistant width by adding backgrounds

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜