vb.org Archive - custom border image around images created with [img] tags

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB3 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=111)

- - custom border image around images created with [img] tags (https://vborg.vbsupport.ru/showthread.php?t=125276)

bhxtyrant

08-29-2006 11:33 PM

custom border image around images created with [img] tags

Hey guys,Hope this is the right place but i am trying to do something but am in the dark on how.

Basically i want to edit the default code used to [img] tags.I would basically like to add my own custom border image to it so when an image is posted using the [img] tags the border will be displayed around images.However i am unsure of how to go about this.I know how to code it i just dont know there to find the code that does this.Any help would be great.Thanks

The-Ensemble

08-30-2006 12:20 AM

I'd suggest creating a BB code. Much easier and then you can always create various version and borders with bb codes :P

bhxtyrant

08-30-2006 01:02 AM

EDIT:After thinking this over more i think you are right.So that leaves one question.I created a custom BB code which works for displaying images with the border i wanted.However i havent got a clue on how to make images "clickable links" so a thumbnail can direct to the full image.Any help would be great.

bhxtyrant

08-31-2006 03:07 AM

bump

The-Ensemble

08-31-2006 12:41 PM

well thats a toughish one.
Why not link the image to the thumbnail, so a thumbnail shows up and link that thumbnail to the full image?

bhxtyrant

08-31-2006 02:47 PM

Hello again,
Thats actually what i am trying to do but either i did something wrong or it isnt working correctly.When i add the thumnail image that works fine but when i try to link it to the full image it just wont work and messes up the custom bb tags.Could you perhaps post an example so i can double check to see if mine is correct?

The-Ensemble

08-31-2006 03:06 PM

Now I'm getting kinda confused try to sort this one out. I'm thinking maybe create a justify box, and insert your thumbnail inside it, So the border wraps around it leaving no gaps and have the thumnail linked to full sized image using a [url=http://blah.com/blah.jpg[/url] around the img coding.

bhxtyrant

08-31-2006 09:11 PM

This is the code i am using for my custom BB code.It works fine for images/thumbnails but it will no work when trying to add a hyperlink.Hope this helps clear up your confusion.

Quote:

Title-Content Image
Tag-Cimage
Replacment-
<table cellpadding="0" cellspacing="0" style="display: inline; margin:5px; margin-top:5px;">
<tr>
<td width="4" height="4" background="http://www.wumbrella.com/forum/images/re-wu/mainfiles/fr_top_ls.jpg"></td>
<td height="4" background="http://www.wumbrella.com/forum/images/re-wu/mainfiles/fr_top_mid.jpg"></td>
<td width="4" height="4" background="http://www.wumbrella.com/forum/images/re-wu/mainfiles/fr_top_rs.jpg"></td>
</tr>
<tr>
<td width="4" background="http://www.wumbrella.com/forum/images/re-wu/mainfiles/fr_left.jpg"></td>
<td>https://vborg.vbsupport.ru/</td>
<td width="4" background="http://www.wumbrella.com/forum/images/re-wu/mainfiles/fr_right.jpg"></td>
</tr>
<tr>
<td width="4" height="4" background="http://www.wumbrella.com/forum/images/re-wu/mainfiles/fr_bot_ls.jpg"></td>
<td height="4" background="http://www.wumbrella.com/forum/images/re-wu/mainfiles/fr_bot_mid.jpg"></td>
<td width="4" height="4" background="http://www.wumbrella.com/forum/images/re-wu/mainfiles/fr_bot_rs.jpg"></td>
</tr>
</table>

Use Option-No

Kirk Y

08-31-2006 09:14 PM

1 Attachment(s)

Find in "includes/class_bbcode.php":

Code:

function handle_bbcode_img_match($link)

        {

                $link = $this->strip_smilies(str_replace('\\"', '"', $link));



                // remove double spaces -- fixes issues with wordwrap

                $link = str_replace('  ', '', $link);



                return '<img src="' .  $link . '" border="0" alt="" />';

        }

Replace with:

Code:

function handle_bbcode_img_match($link)

        {

                $link = $this->strip_smilies(str_replace('\\"', '"', $link));



                // remove double spaces -- fixes issues with wordwrap

                $link = str_replace('  ', '', $link);



                return '<span class="post"><img src="' .  $link . '" border="0" alt="" /></span>';

        }

Now go into your AdminCP -> Styles and Templates Manager -> Choose Main CSS from the Style Dropdown.

Scroll down to Additional CSS Definitions and add this:

Code:

.post image{

        border-style:dashed;

        border-color:red;

        border-width:1px;

      }

bhxtyrant

08-31-2006 09:30 PM

Thanks acid but that doesnt help me to much as i dont want a css border i want a border made of custom graphics that i have made.See the code in my post above yours to see what i mean.

Kirk Y

08-31-2006 09:56 PM

1 Attachment(s)

Like this?

bhxtyrant

08-31-2006 11:08 PM

Yes thats exactly right,Im trying to make a custom BB code now after thinking about it because i dont want these borders to show up on images like signatures which also use the default [img] tags.

Kirk Y

08-31-2006 11:40 PM

My way only puts the border around IMG tags within the message.

bhxtyrant

09-01-2006 02:24 AM

Ah then thats perfect,if you could give me an example that would be great.Will your way work with my border though?It's made of 8 images,
top left,top mid,top right,right side,left side,bottom left,bottom mid,bottom right.

Oh also will this work with VBA pages as well?I use VBAcmps for news and articles so this must work on those pages as well which is another reason i was think a custom BB code may be best.

Kirk Y

09-01-2006 09:20 PM

I'm trying to find a way to make a border using images with CSS.

bhxtyrant

09-01-2006 09:36 PM

Using your method is it strictly CSS or can you use table html as well?Thats how i created it before then used CSS to add the images to there correct cells.

Kirk Y

09-01-2006 09:53 PM

When you're making the file edit to class_bbcode.php, you can alter the HTML used for the IMG tags. You'll have the same URL Linking problem though with the tables even with the file edit.

Reason being that you're not wrapping the link tag around the image - rather you're wrapping it around the whole table; so it's no longer clickable.

bhxtyrant

09-01-2006 11:04 PM

Ah i see thats the current problem as well.So i guess CSS is the only option.You looked like you handled it very easily in your test but i assume your backround is a very basic one?Mine will be a custom image made to make inserted images look like an old style photograph something like this.

http://img399.imageshack.us/img399/9...rbanner0gt.jpg

Kirk Y

09-01-2006 11:22 PM

In my screenshot, I used the HTML you provided a few posts back; so the border was made from your images.

bhxtyrant

09-02-2006 12:30 AM

ah i see so it does work so then doesnt that mean basically that you have it working?

Kirk Y

09-02-2006 02:03 AM

I used the HTML you've been using in your new BBCode -- so if your users try doing:

Code:

[url="google.com"][img]http://mysite.com/image.jpg[/img][/url]

The picture won't be linkable.

bhxtyrant

09-02-2006 03:21 AM

Ah i see.Seems this is gonna be the hardest thing to overcome.Is there perhaps a way i can make a custom BBcode just to control the border?for example if i wanted an image to have the boarder i could do-

Quote:

[border][url="google.com"] [img]http://mysite.com/image.jpg[/ img] [/ url][/border]

That would be a decent alternative as this doesnt really need to be used on every image.I like your idea better though so that would be prefered if it were possible.

:EDIT:
Cant i use something like this to manage the images via CSS?

Quote:

.postimage.topleft{background-image: url(test.jpg);}
.postimage.topright{background-image: url(test.jpg);}
.postimage.topmid{background-image: url(test.jpg);}
.postimage.left{background-image: url(test.jpg);}
.postimage.right{background-image: url(test.jpg);}
.postimage.botleft{background-image: url(test.jpg);}
.postimage.botright{background-image: url(test.jpg);}
.postimage.botmid{background-image: url(test.jpg);}

bhxtyrant

09-03-2006 06:20 AM

Hmm i was thinking of something that might be an option.Can i put the table code with image border in the area used for [url] tags then use some sort of "if" tag or conditional to make the border only appear when used along with [img] tags?

bhxtyrant

09-04-2006 05:25 PM

bump

All times are GMT. The time now is 05:23 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01213 seconds Memory Usage 1,769KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (4)bbcode_code_printable (3)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (24)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: