<IMAGE_WIDTH> + 70px? [Archive]

PPersson

11-14-2007, 12:52 PM

In my template I would need a div to have the width of the image and another 70 pixels for navigations arrows on the right and the left hand side of the image. How do I code this?

That is:
<div id="navigate" style="width:<IMAGE_WIDTH>;">
... should be something like:
<div id="navigate" style="width:"<IMAGE_WIDTH>+70px";">

How do you add pixels to a tag?

Thanks for your help
/Pär

Lazlo

11-14-2007, 01:54 PM

You can do it with some core hacking (not recommend). Replace in index.php of your PP installaton (around line 480)

$image_width = $image_extra['0'];

with

$image_width = $image_extra['0']+70;

But you could also do this with CSS, by giving the photo a div and the arrows another div around the photo div with the arrows absolute positioned.

PPersson

11-14-2007, 02:03 PM

That won't do the trick, I'm afraid.

1) I can't hack the tag <IMAGE_WIDTH> as I use it "unedited" in other places.
2) This is the way I have now but what width should I type for the div around the photo? The width for this div is "<IMAGE_WIDTH>+70px" ...

austriaka

11-14-2007, 02:36 PM

I'm afraid it is not possible to do it like this.
I would try this with a float:left and float:right for the arrows.

Perhaps a min-width:<IMAGE_WIDTH> would work?

jaywilliams

11-14-2007, 02:46 PM

Why not create an addon?

It would be super easy to do for something like this.
<IMAGE_WIDTH_70> perhaps?

Dennis

11-14-2007, 03:04 PM

The above approach is used in my new template.

Lazlo

11-14-2007, 07:32 PM

That won't do the trick, I'm afraid.

1) I can't hack the tag <IMAGE_WIDTH> as I use it "unedited" in other places.
2) This is the way I have now but what width should I type for the div around the photo? The width for this div is "<IMAGE_WIDTH>+70px" ...

The hack works at my blog.

2. That doesn't work. it's html, not server side processed

Dkozikowski

11-14-2007, 09:12 PM

Here is a slick solution to your problem. Copy the following code bellow into a basic text editor and save the file as img_width.php

Upload img_width.php to your addons folder.

Use the following tag(s) within your image_template.html file.

<IMG_WIDTH append="70px" operator="+">

append is the numerical value you wish to add or subtract from the current images width.

operator determines if the appended value is added or subtracted from the current images width. Currently you can use the following operators, add (+) or subtract (-)

So, for example, if the current displayed images width is 400px and you use the following template tag, <IMG_WIDTH append="70px" operator="+">, the final width output would be 400 + 70 for a total width of 470px.

Also note, you can use multiple instances of the <IMG_WIDTH> template tag with different append and operator values within the same template file.

<?php
/*

Pixelpost 1.5 - 1.7
Written by: Dwilkinsjr
Written for: Pixelpost www: http://www.pixelpost.org/



Contact: dwilkinsjr@dwilkinsjr.com
Copyright (c) 2007 <http://wwww.dwilkinsjr.com>

License: http://www.gnu.org/copyleft/gpl.html

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

*/

$addon_name = "Image Width";
$addon_version = "0.5";
$addon_description = "This addon will allow you to alter an images width by adding or subtracting from its origional value.<br /><br />New Tag: <code><IMG_WIDTH append=\"70px\" operator=\"+\"></code><br /><br />ADDON Author: Dwilkinsjr (<a href='http://www.dwilkinsjr.com/' target='_blank'>dwilkinsjr.com</a>)";

/**
* Only run when the template tag is found the on page
*
*/
if(preg_match("<IMG_WIDTH.*?>", $tpl)) {

/**
* Match ALL tags, not just the first one
*
*/
preg_match_all("/<IMG_WIDTH\s*(.*?)\s*>/s", $tpl, $tags);
$tags = $tags[1];
$i = 0;

foreach($tags as $arg_string) {

/**
* Reset the arguments for each tag
*
*/
$args = '';
while($arg_string != "") {
preg_match("/^(.*?)=('|\")?(.*?)\\2\s*(.*)$/s", $arg_string, $out);

$args[$out[1]] = $out[3];
$arg_string = $out[4];
}

/**
* Set defaults
*
*/
$final_width = $image_width;

/**
* Get arguments if set. If not, use default
*
*/
if($args['append']) {

$append = $args['append'];
$append = eregi_replace('[^0-9]+','',$append);

if($args['operator']) {

$operator = $args['operator'];

if($operator != '+') {

$final_width = $image_width - $append;

}else{

$final_width = $image_width + $append;

}

}else{

$final_width = $image_width + $append;

}

}

/**
* Only replace ONE!
*
*/
$tpl = preg_replace("/<IMG_WIDTH\s*(.*?)\s*>/", $final_width, $tpl,1);

$i++;
}
}
?>

kevincrafts

11-15-2007, 03:44 AM

how about some javascript?

document.getElementById('navigate').style.width = (<IMAGE_WIDTH> + 70) + "px";

or something like that?

dakwegmo

11-15-2007, 01:23 PM

how about some javascript?

That's what I was thinking, though dwilkinsjr's solution is better because it works even if javascript is disabled.

dwilkinsjr that is pretty slick.

Dkozikowski

11-15-2007, 01:45 PM

That's what I was thinking, though dwilkinsjr's solution is better because it works even if javascript is disabled.

Exactly the reason for the PHP code I threw together. JS can be great and some spectacular stuff can be accomplished, but, I never rely on users having it enabled. Call me old school ;)

dwilkinsjr that is pretty slick.

Thanks

-okapi-

12-17-2007, 02:52 PM

very nice and useful, thank you, dwilkinsjr+!
if the same worked with IMG_HEIGHT accordingly, i could avoid the use of any tables in the layout that i'm currently working on. actually, could this easily be done by creating a second addon, replacing "width" by "height" in the code? ;)

i want to have a layout that is able to handle images of different sizes, and i was wondering how this could be done only with DIV layers, while pixelpost does not allow to execute PHP in templates. so, your solution is perfect for me, thank you a lot!

michael

Dkozikowski

12-18-2007, 01:30 AM

Thanks -okapi-

Here is a IMG_HEIGHT version. It should work:

Create a new file called img_height.php and paste the following code:

<?php
/*

Pixelpost 1.5 - 1.7
Written by: Dwilkinsjr
Written for: Pixelpost www: http://www.pixelpost.org/



Contact: dwilkinsjr@dwilkinsjr.com
Copyright (c) 2007 <http://wwww.dwilkinsjr.com>

License: http://www.gnu.org/copyleft/gpl.html

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

*/

$addon_name = "Image Height";
$addon_version = "0.5";
$addon_description = "This addon will allow you to alter an images hight by adding or subtracting from its origional value.<br /><br />New Tag: <code><IMG_HIGHT append=\"70px\" operator=\"+\"></code><br /><br />ADDON Author: Dwilkinsjr (<a href='http://www.dwilkinsjr.com/' target='_blank'>dwilkinsjr.com</a>)";

/**
* Only run when the template tag is found the on page
*
*/
if(preg_match("<IMG_HEIGHT.*?>", $tpl)) {

/**
* Match ALL tags, not just the first one
*
*/
preg_match_all("/<IMG_HEIGHT\s*(.*?)\s*>/s", $tpl, $tags);
$tags = $tags[1];
$i = 0;

foreach($tags as $arg_string) {

/**
* Reset the arguments for each tag
*
*/
$args = '';
while($arg_string != "") {
preg_match("/^(.*?)=('|\")?(.*?)\\2\s*(.*)$/s", $arg_string, $out);

$args[$out[1]] = $out[3];
$arg_string = $out[4];
}

/**
* Set defaults
*
*/
$final_height = $image_height;

/**
* Get arguments if set. If not, use default
*
*/
if($args['append']) {

$append = $args['append'];
$append = eregi_replace('[^0-9]+','',$append);

if($args['operator']) {

$operator = $args['operator'];

if($operator != '+') {

$final_height = $image_height - $append;

}else{

$final_height = $image_height + $append;

}

}else{

$final_height = $image_height + $append;

}

}

/**
* Only replace ONE!
*
*/
$tpl = preg_replace("/<IMG_HEIGHT\s*(.*?)\s*>/", $final_height, $tpl,1);

$i++;
}
}
?>

Save and upload to your addons folder.

I could merge the two together but I don't have the time right now. Maybe someday soon.

Enjoy

-okapi-

12-18-2007, 07:35 AM

thanks a lot, dwilkinsjr+, this is very kind of you!
your addons are very interesting for pixelpost users who are creating their own templates!
one can do a lot only with absolute (and relative) positioned layers, without having much trouble with browser compatibility. the only problem is the lack of flexibility of such a layout, while handling images of different sizes.
these addons are an elegant way in pixelpost to define widths and heights of div-containers relative to the width or the height of the displayed image.

thanks again!
michael

Dkozikowski

01-02-2008, 01:05 PM

FYI: This is now an official addon listed within Pixelpost's Extend section, Image Sx/y (http://www.pixelpost.org/extend/addons/image-sxy/).