Changing inline image widths programmatically.

[eluser]Daniel H[/eluser]
Hi there,

I have a requirement whereby images embedded in blog posts can change widths depending on where the post is being viewed. For example, in the main blog, images can extend to 630px, whereas on the homepage, they can be 470px max.

So what I need to do is process the blog post, find all the image tags, if the width for the image is greater or equal than 630px, change this to 470px.

I can do this with jQuery, but wondering if there was a way to do this using PHP using regex?

Dan.

[eluser]srisa[/eluser]
I believe you will be using different templates for displaying blogs in different places. Is it not acceptable to have different width and height attributes for the img tag in the different templates?

[eluser]Daniel H[/eluser]
No, because the image might be narrower than 470px so I wouldn't want to increase the width.

[eluser]TheFuzzy0ne[/eluser]
This is just a stab in the dark here, but would CSS max-width be of any use here?

[eluser]slowgary[/eluser]
[quote author="TheFuzzy0ne" date="1247876863"]This is just a stab in the dark here, but would CSS max-width be of any use here?[/quote]

I don't see any other way. Leave the width and height attributes out of the img tag and just specify a max-width for images depending on the column. The height part will take care of itself.

[eluser]John_Betong[/eluser]
[quote author="slowgary" date="1247892579"][quote author="TheFuzzy0ne" date="1247876863"]This is just a stab in the dark here, but would CSS max-width be of any use here?[/quote]

I don't see any other way. Leave the width and height attributes out of the img tag and just specify a max-width for images depending on the column. The height part will take care of itself.[/quote]
 
If the image width has a maximum w size of 470px and could be smaller then try:
 
1. enclosing the images in a predefined div with a width of 470px
2. use the following code to display the image

Code:

<div style='width:470px; text-align:center'>

   <img src='&lt;?php echo $image ?&gt;' style='width:&lt;?php echo $width ?&gt;px; margin:auto'>

</div>

 
Images with a width of less than 470px will be horizontally centered and aligned to the top of the div.
 
 
edit: just ran some tests and the previous css code with a width of 100% re-sized the image to fit into the div. This was not wanted so I changed the <img

[eluser]John_Betong[/eluser]
&nbsp;
Just ran some more tests and this is version 002.

1. image $width is calculated.
2. div-box is drawn with a width of 470px
3. $width is passed to the <img > display code
4. text is displayed in the div-box and floats around the image if and only if the image width is < 470px
otherwise text will follow the image

Code:

<?php
        global $img;
        $img     = './images/please_lord.jpg';
        $dims    = getimagesize($img);
        // Debug stuff
        // echo '<pre>';
        //   print_r($dims);
        // echo '</pre>';
        // echo '$width = ' .$dims[0];
    ?&gt;
        
    
    <div style='width:640px; height:420px; margin:42px 0 0 42px; border:dotted 2px; background:#ffc; text-align:left; border:dotted'>
        <img src='&lt;?php echo $img ?&gt;' style='float:left; padding:1em; width:&lt;?php echo $dims[0] ?&gt;px; background:transparent' alt='fred' />
        Dear Lord, please grant me the ability to punch people in the face over TCP/IP.  
        Dear Lord, please grant me the ability to punch people in the face over TCP/IP.  
        Dear Lord, please grant me the ability to punch people in the face over TCP/IP.  
        Dear Lord, please grant me the ability to punch people in the face over TCP/IP.  
        Dear Lord, please grant me the ability to punch people in the face over TCP/IP.  
        Dear Lord, please grant me the ability to punch people in the face over TCP/IP.  
        Dear Lord, please grant me the ability to punch people in the face over TCP/IP.  
        Dear Lord, please grant me the ability to punch people in the face over TCP/IP.  
        Dear Lord, please grant me the ability to punch people in the face over TCP/IP.  
        Dear Lord, please grant me the ability to punch people in the face over TCP/IP.  
    </div>

&nbsp;
&nbsp;
&nbsp;
&nbsp;

[eluser]slowgary[/eluser]
Maybe I'm missing something but couldn't it be done with some simple CSS like so:

Code:

.column_wide {
     width: 630px;
}

.column_wide img {
     max-width: 610px;
}

.column_narrow {
     width: 490px;
}

.column_narrow img {
     max-width: 470px;
}

[eluser]John_Betong[/eluser]
[quote author="slowgary" date="1247898303"]Maybe I'm missing something but couldn't it be done with some simple CSS like so:

Code:

.column_wide {
     width: 630px;
}

.column_wide img {
     max-width: 610px;
}

.column_narrow {
     width: 490px;
}

.column_narrow img {
     max-width: 470px;
}

[/quote]
&nbsp;
&nbsp;
I have just tried your code and it works a treat. I will use it in my next CI Gallery which I hope to get started today.

Many thanks.
&nbsp;
&nbsp;
&nbsp;
&nbsp;52

[eluser]slowgary[/eluser]
Just remember that IE6 doesn't recognize max-width, so you'll need to set an implicit width or figure out a JS solution. I'd probably just set a percentage based width for IE6.