PDA

View Full Version : Profile Enhancements - URL, BB code & Embed code information under album images


C.Birch
24 Dec 2007, 13:21
Please note as of vb3.7 beta 6 this mod is no longer needed as its now supported by vb right out the box.

The below template edit will add information boxs under images from the user photo albums for the images URL along with BB Codes and Embed Codes.

This is something i feel VB should add out of the box as its very easy to do.

How To:

In the template 'album_pictureview'

Find:
$vbphrase[picture]</title>
</head>

and add below:

<script type="text/javascript">
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>

Find:
<span class="shade">$vbphrase[picture_added]</span> $pictureinfo[adddate] <if condition="!$show['detailedtime']"><span class="time">$pictureinfo[addtime]</span></if>
</td>
</tr>
</table>
</td>
</tr>

and add below:

<tr>
<td align="$stylevar[left]"><table width="80%" border="0" class="tborder" align="center" cellpadding="3" cellspacing="0">
<tr>
<td class="alt2" nowrap="nowrap"><div class="smallfont normal">
<div align="right"><strong>Image URL:</strong></div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield2" class="bginput" type="text" id="textfield2" onClick="SelectAll('textfield2');" value="$vboptions[bburl]/picture.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]" size="50" READONLY>
</span></div></td>
</tr>
<tr>
<td class="alt2" nowrap="nowrap"><div class="smallfont normal">
<div align="right"><strong>BB Code:</strong> </div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield3" class="bginput" type="text" id="textfield3" onClick="SelectAll('textfield3');" value="https://www.vbulletin.org/forum/" size="50" READONLY>
</span></div></td>
</tr>
<tr>
<td class="alt2" nowrap="nowrap"><div class="smallfont normal">
<div align="right"><strong>Embed Code:</strong> </div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield" class="bginput" type="text" id="textfield" onClick="SelectAll('textfield');" value="<img src='$vboptions[bburl]/picture.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]' style='border:1px solid #000000;' >" size="50" READONLY>
</span></div></td>
</tr>
</table>

</td>
</tr>

Added vmacedonia's select all the text on mouse click code and updated to beta 4 code edits.

If you would like this to be part of the stock VB install, Jason (Jase2) as made a topic on the VB forums so please vote for it here: http://www.vbulletin.com/forum/showthread.php?p=1498764#post1498764

Trigr
24 Dec 2007, 13:57
PERFECT!

Thanks.

ssvp
24 Dec 2007, 15:06
Dude that is sooo Kick #@#!!!! Thanks much.

C.Birch
24 Dec 2007, 15:40
Add READONLY to the text boxs, its something i over looked. to made it read only just add READONLY after size="50" so it will read size="50" READONLY

I have updated the first post with the update.

SwollenCranium
24 Dec 2007, 15:50
This is something i feel VB should add out of the box as its very easy to do.

You could fill an entire forum with a list of what Vbulletin should have done, or done differently.


Anyway ...

Awesome addition, thanks !

bollie
24 Dec 2007, 16:18
Nice thx ;)

Traxdata
24 Dec 2007, 17:02
Good job :) Thanks.
just waiting for "how to allow to post images in user profile messages" mod :)

SwollenCranium
24 Dec 2007, 20:23
Doesn't seem to work.

And yeah, I edited the forum address.

C.Birch
24 Dec 2007, 21:06
MY full template 'album_pictureview'



$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
$headinclude
$usercss
<title>$vboptions[bbtitle] - <phrase 1="$userinfo[username]" 2="$albuminfo[title_html]">$vbphrase[xs_album_y]</phrase> - $vbphrase[picture]</title>
</head>
<body>
$header
$navbar

<div id="usercss">

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tcat">
<if condition="$show['picture_nav']">
<div class="smallfont" style="float: $stylevar[right]">
<a href="album.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pic_location[prev_pictureid]">$pic_location[prev_text_short]</a> |
<a href="album.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pic_location[next_pictureid]">$pic_location[next_text_short]</a>
</div>
</if>

<phrase 1="$pic_location[pic_position]" 2="$albuminfo[picturecount]" 3="$albuminfo[title]">$vbphrase[picture_x_of_y_from_album_z]</phrase>
</td>
</tr>
<tr>
<td class="alt1" align="center">
<table width="<if condition="$pictureinfo['width'] < 400">400<else />$pictureinfo[width]</if>" cellpadding="$stylevar[cellpadding]">
<tr>
<td align="center"><img src="picture.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]" alt="$vbphrase[picture]" /></td>
</tr>
<if condition="$pictureinfo['caption_html']">
<tr>
<td align="$stylevar[left]"><em>$pictureinfo[caption_html]</em></td>
</tr>
</if><tr>
<td align="$stylevar[left]"><table width="80%" border="0" class="tborder" align="center" cellpadding="3" cellspacing="0">
<tr>
<td class="alt2"><div class="smallfont normal">
<div align="right"><strong>Image URL:</strong></div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield2" type="text" value="http://www.yourdomain.com/picture.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]" size="50" READONLY>
</span></div></td>
</tr>
<tr>
<td class="alt2"><div class="smallfont normal">
<div align="right"><strong>BB Code:</strong> </div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield3" type="text" value="http://www.yourdomain.com/picture.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]" size="50" READONLY>
</span></div></td>
</tr>
<tr>
<td class="alt2"><div class="smallfont normal">
<div align="right"><strong>Embed Code:</strong> </div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield" type="text" value="<img src='http://www.yourdomain.com/picture.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]' style='border:1px solid #000000;' >" size="50" READONLY>
</span></div></td>
</tr>
</table>

</td>
</tr>
<tr>
<td align="$stylevar[left]" class="smallfont">
<if condition="$show['edit_picture_option'] OR $show['add_group_link'] OR $show['reportlink']">
<div class="smallfont normal" style="float: $stylevar[right]">
<if condition="$show['edit_picture_option']">
<div><a href="album.php?$session[sessionurl]do=editpictures&amp;albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]">$vbphrase[edit_picture]</a></div>
</if>
<if condition="$show['add_group_link']">
<div><a href="album.php?$session[sessionurl]do=addgroup&amp;albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]">$vbphrase[add_to_group]</a></div>
</if>
<if condition="$show['reportlink']">
<div><a href="album.php?$session[sessionurl]do=report&amp;albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]">$vbphrase[report_picture]</a></div>
</if>
</div>
</if>
<span class="shade">$vbphrase[picture_added]</span> $pictureinfo[adddate] <if condition="!$show['detailedtime']"><span class="time">$pictureinfo[addtime]</span></if>
</td>
</tr>
</table>
</td>
</tr>
</table>

<if condition="$show['picture_nav']">
<div class="smallfont" align="center" style="margin-top: $stylevar[cellpadding]px">
<a href="album.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pic_location[prev_pictureid]">$pic_location[prev_text]</a> |
<a href="album.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pic_location[next_pictureid]">$pic_location[next_text]</a>
</div>
</if>

</div>

$footer
</body>
</html>


replace everything with that and just edit the yourdomain.com parts to your address, its in 3 places.

SwollenCranium
24 Dec 2007, 21:18
Thanks works now .. looks identical ( except for url info) to the one I did myself, Not sure what happened.

Gray Matter
24 Dec 2007, 22:18
Nice, but you should add class="bginput" to the input boxes, otherwise they won't conform to the style if custom CSS is applied.

C.Birch
24 Dec 2007, 22:44
Yeps your right, have updated the first post. It was only a fast done thing to be forward, if i get time over xmas and new year im going add copy to clipboard buttons.

UncoderMom
25 Dec 2007, 00:01
WOW WOW WOW WOW

Did I say WOW?

Thank you soooo much!!!!!

.Tim
27 Dec 2007, 02:58
If you use $vboptions[bburl] instead of the domain name people won't have to change it.

And the image url needs to be:

<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield2" class="bginput" type="text" value="$vboptions[bburl]/album.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]" size="50" READONLY>
</span></div></td>

If you want it to link back to the image page and not just the image.

C.Birch
27 Dec 2007, 09:19
If you use $vboptions[bburl] instead of the domain name people won't have to change it.

And the image url needs to be:

<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield2" class="bginput" type="text" value="$vboptions[bburl]/album.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]" size="50" READONLY>
</span></div></td>

If you want it to link back to the image page and not just the image.

Thank i was trying to find $vboptions[bburl] i knew there was a code for it but its been removed from most templates in vb now.

Has for the link its right the way it is, as you don't want to be linking to the image page but the image itself. If people want to link to the image page then they just copy there address bar ;)

Ohiosweetheart
29 Dec 2007, 05:17
Very kewl add-on, thank you.

vmacedonia
29 Dec 2007, 20:55
How to select all the text on mouse click for easy coping.

At the beginning of the template find:
$vbphrase[picture]</title>
</head>


after that code add this one:
<script type="text/javascript">
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>


And then replace the original code with this alternated:

<tr>
<td align="$stylevar[left]"><table width="80%" border="0" class="tborder" align="center" cellpadding="3" cellspacing="0">
<tr>
<td class="alt2" nowrap="nowrap"><div class="smallfont normal">
<div align="right"><strong>Image URL:</strong></div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield2" class="bginput" type="text" id="textfield2" onClick="SelectAll('textfield2');" value="$vboptions[bburl]/picture.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]" size="50" READONLY>
</span></div></td>
</tr>
<tr>
<td class="alt2" nowrap="nowrap"><div class="smallfont normal">
<div align="right"><strong>BB Code:</strong> </div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield3" class="bginput" type="text" id="textfield3" onClick="SelectAll('textfield3');" value="https://www.vbulletin.org/forum/" size="50" READONLY>
</span></div></td>
</tr>
<tr>
<td class="alt2" nowrap="nowrap"><div class="smallfont normal">
<div align="right"><strong>Embed Code:</strong> </div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield" class="bginput" type="text" id="textfield" onClick="SelectAll('textfield');" value="<img src='$vboptions[bburl]/picture.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]' style='border:1px solid #000000;' >" size="50" READONLY>
</span></div></td>
</tr>
</table>

</td>
</tr>



If you want all the text to be select on double mouse click just change the event "onClick=" to "ondblClick=".

Forum Lover
29 Dec 2007, 21:10
bombastic hack!! i only imagine if we can put watermark too in the image. how can we?

glorify
30 Dec 2007, 23:26
How to select all the text on mouse click for easy coping.

At the beginning of the template find:
$vbphrase[picture]</title>
</head>


after that code add this one:
<script type="text/javascript">
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>


And then replace the original code with this alternated:

<tr>
<td align="$stylevar[left]"><table width="80%" border="0" class="tborder" align="center" cellpadding="3" cellspacing="0">
<tr>
<td class="alt2" nowrap="nowrap"><div class="smallfont normal">
<div align="right"><strong>Image URL:</strong></div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield2" class="bginput" type="text" id="textfield2" onClick="SelectAll('textfield2');" value="$vboptions[bburl]/picture.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]" size="50" READONLY>
</span></div></td>
</tr>
<tr>
<td class="alt2" nowrap="nowrap"><div class="smallfont normal">
<div align="right"><strong>BB Code:</strong> </div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield3" class="bginput" type="text" id="textfield3" onClick="SelectAll('textfield3');" value="https://www.vbulletin.org/forum/" size="50" READONLY>
</span></div></td>
</tr>
<tr>
<td class="alt2" nowrap="nowrap"><div class="smallfont normal">
<div align="right"><strong>Embed Code:</strong> </div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield" class="bginput" type="text" id="textfield" onClick="SelectAll('textfield');" value="<img src='$vboptions[bburl]/picture.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]' style='border:1px solid #000000;' >" size="50" READONLY>
</span></div></td>
</tr>
</table>

</td>
</tr>



If you want all the text to be select on double mouse click just change the event "onClick=" to "ondblClick=".

Installed :)

slmoney
31 Dec 2007, 23:05
ok..this is odd... it seems that the [bburl] is adding a slash (/) automatically. I had to delete the / that is in the code for this to work.

TomJames
02 Jan 2008, 09:58
bombastic hack!! i only imagine if we can put watermark too in the image. how can we?

That would be awesome... :up:

MustangLisa
06 Jan 2008, 02:50
Thanks, I am going to install this now! I was surprised it wasn't part of the vB package, so thanks for making this!

Good job :) Thanks.
just waiting for "how to allow to post images in user profile messages" mod :)

Yes, me too!!!

MustangLisa
06 Jan 2008, 02:56
Worked like a charm, thanks!!

Jenkins
06 Jan 2008, 08:27
Works great!!! I was SO Disapointed when I realized that this wasn't a standard feature!

Thanks!!!

safakuygur
06 Jan 2008, 11:04
PERFECT!

Thanks.

sinistergaming
08 Jan 2008, 03:13
thanks

VeeDubZ
08 Jan 2008, 18:02
fantastic addition. thanks

Jenkins
16 Jan 2008, 07:20
I just noticed these have to be accessed through the database, which doesn't allow you to hotlink on other forums sites. :( Guess I'm gonna have to find a hack or product to do that.

dj_f16
17 Jan 2008, 16:26
good work :)
beatifull, thanx u man.....

BoredOutOfMyMin
20 Jan 2008, 23:55
Excellent!

I changed BBCode to the bottom like Photobucket.

Very good work- yes I agree this would be a welcomed add to VBulletin Photos. Allows sharing them very easy.

Thank you!

therogueforums
25 Jan 2008, 10:39
awesome hack! thank you!

Collussus
25 Jan 2008, 13:07
nice one, installed.

OrionsMom
29 Jan 2008, 17:54
WOOHOO this is EXACTLY what I wanted! Thank you so much! The only thing that could be a better addition for albums is the ability to just click ont he photos to add them to posts! This is definately a much needed addition!

therogueforums
29 Jan 2008, 18:55
Yeah, I must say, this is very practical, and IMO should've been a part of the original coding.

Ad1tya
30 Jan 2008, 15:14
Wow.. Thanks...

Now, is there a way we can have Thumbnail Code (which clicked takes us to the original image?).

Alfa1
30 Jan 2008, 22:00
Excellent idea. Note that since vb 3.7 B4 the code is different than explained above.

Jase2
01 Feb 2008, 20:26
Thanks a lot.

This is something vB should include and I will be requesting it. ;)

Regards Jason :)

Jase2
01 Feb 2008, 22:02
Please vote for it here - http://www.vbulletin.com/forum/showthread.php?p=1498764#post1498764

The more we get, the more chance it will be put in the vB core code.

Regards Jason :)

RvG2
02 Feb 2008, 19:15
How to select all the text on mouse click for easy coping.

At the beginning of the template find:
$vbphrase[picture]</title>
</head>


after that code add this one:
<script type="text/javascript">
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>


And then replace the original code with this alternated:

<tr>
<td align="$stylevar[left]"><table width="80%" border="0" class="tborder" align="center" cellpadding="3" cellspacing="0">
<tr>
<td class="alt2" nowrap="nowrap"><div class="smallfont normal">
<div align="right"><strong>Image URL:</strong></div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield2" class="bginput" type="text" id="textfield2" onClick="SelectAll('textfield2');" value="$vboptions[bburl]/picture.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]" size="50" READONLY>
</span></div></td>
</tr>
<tr>
<td class="alt2" nowrap="nowrap"><div class="smallfont normal">
<div align="right"><strong>BB Code:</strong> </div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield3" class="bginput" type="text" id="textfield3" onClick="SelectAll('textfield3');" value="$vboptions[bburl]/picture.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]" size="50" READONLY>
</span></div></td>
</tr>
<tr>
<td class="alt2" nowrap="nowrap"><div class="smallfont normal">
<div align="right"><strong>Embed Code:</strong> </div>
</div></td>
<td class="alt2"><div align="center"><span class="smallfont normal">
<input name="textfield" class="bginput" type="text" id="textfield" onClick="SelectAll('textfield');" value="<img src='$vboptions[bburl]/picture.php?$session[sessionurl]albumid=$albuminfo[albumid]&amp;pictureid=$pictureinfo[pictureid]' style='border:1px solid #000000;' >" size="50" READONLY>
</span></div></td>
</tr>
</table>

</td>
</tr>



If you want all the text to be select on double mouse click just change the event "onClick=" to "ondblClick=".

Installed! :up:

I love you people! :D

C.Birch
02 Feb 2008, 21:41
Updated the first post so its now all right for editing in beta 4 plus added vmacedonia's code in to it.

aj8690
02 Feb 2008, 21:57
Thanks for the update...but it has a weird purple background that doesn't match my style at all now. See: http://www.puretalkforum.com/album.php?albumid=4&pictureid=8

Is there a way to fix?

Thanks. :)

Shelby
12 Feb 2008, 23:14
It's close to what I think is needed, but not quite.

I'd love to see an icon in the WYSIWYG editor that allows you to insert an image from your Vbulletin Albums. A little popup window opens some small thumbnails to all of your images where you can select from the images in your gallery and automatically links it.

The popup window might look like this.

http://www.vbulletin.com/forum/attachment.php?attachmentid=24526&stc=1&d=1196650527

Jase2
15 Feb 2008, 20:36
Working on BETA 5 :)

Looks like this didn't make it for this years vB version ... So C.Birch, I hope you can keep it going. :)

Taking any future versions? Could you add the possibility for what usergroups this works for :p

Regards Jason :)

rolandogomez
16 Feb 2008, 03:05
WOOHOO this is EXACTLY what I wanted! Thank you so much! The only thing that could be a better addition for albums is the ability to just click ont he photos to add them to posts! This is definately a much needed addition!

I agree 100%, like we have for PhotoPost and PhotoPlog on the quick reply and reply boxes in the smilie links area with a link [images] Thanks, rg.

rolandogomez
16 Feb 2008, 03:52
Post deleted, wrong area. Thanks, rg.

pipedreams
01 Mar 2008, 14:51
Nice hack, but it seems part of the upcoming VB 3.7 beta 6 now?

binevi
01 Mar 2008, 17:48
can anyone make a button just next to links to copy them easily by clicking button

choccyclaire
01 Mar 2008, 18:39
Cool, thanks. :D

Jase2
02 Mar 2008, 21:01
Nice hack, but it seems part of the upcoming VB 3.7 beta 6 now?

I believe BETA 5 is meant to be the last BETA ... they are not adding any more features as far as I'm aware. Should be RC next.

Regards Jason :)

reddog64
05 Mar 2008, 20:24
watermark would be AWSOME!!!

Syria BoY
05 Mar 2008, 21:11
Good job

Jase2
07 Mar 2008, 20:52
Looks like it's in BETA 6 now :) But two options only:

Picture Url

BBcode

Regards Jason :)

C.Birch
07 Mar 2008, 23:02
I just want to say many thanks to everyone for there nice words on here and on vb.com and mainly Jase2 for making the topic on vb.com and pushing for this to be in vb out of the box.

Its now made it in to vb3.7 beta6 whats great to see so again many thanks to you all.

Jase2
08 Mar 2008, 12:54
My pleasure C.Birch. But here's a "thanks" to you for creating the mod! :)

Regards Jason :)

Bilderback
09 Mar 2008, 05:41
awesome addition to beta6. -congrats
May want to inform people that beta 6 runs the code off the following condition
<if condition="$show['picture_owner']">
so only the photo album owner can see the embed options.

But you can change that to whatever you wish:
example:
<if condition="$show['member']"> to allow all members to see

or remove the conditional for all to see

Jase2
14 Mar 2008, 21:26
Yes, but I think it's best to have it <if condition="$show['picture_owner']">. If you put it to <if condition="$show['member']"> then users can "hotlink" unless you prevent hotlinking via .htaccess.

Regards Jason :)

ArbStar
05 Apr 2008, 15:57
This Modification is already in the default template for vBulletin version 3.7.0 RC2

hrk
06 Apr 2008, 13:55
Nice Hack.
Agree must have for default VB.
Thanks

furst
07 Apr 2008, 18:04
I just noticed these have to be accessed through the database, which doesn't allow you to hotlink on other forums sites. :( Guess I'm gonna have to find a hack or product to do that.

Has anyone found a way around this?

In addition, I would like to make it so the images link back to my site, kinda how imageshack does it. If anyone knows how this can be does please speak up.