PDA

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

C.Birch
12-23-2007, 10:00 PM
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://vborg.vbsupport.ru/" 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
12-24-2007, 11:57 AM
PERFECT!

Thanks.
ssvp
12-24-2007, 01:06 PM
Dude that is sooo Kick #@#!!!! Thanks much.
C.Birch
12-24-2007, 01:40 PM
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
12-24-2007, 01:50 PM
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
12-24-2007, 02:18 PM
Nice thx ;)
Traxdata
12-24-2007, 03:02 PM
Good job :) Thanks.
just waiting for "how to allow to post images in user profile messages" mod :)
SwollenCranium
12-24-2007, 06:23 PM
Doesn't seem to work.

And yeah, I edited the forum address.
C.Birch
12-24-2007, 07:06 PM
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
12-24-2007, 07:18 PM
Thanks works now .. looks identical ( except for url info) to the one I did myself, Not sure what happened.
Gray Matter
12-24-2007, 08:18 PM
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
12-24-2007, 08:44 PM
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
12-24-2007, 10:01 PM
WOW WOW WOW WOW

Did I say WOW?

Thank you soooo much!!!!!
.Tim
12-27-2007, 12:58 AM
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
12-27-2007, 07:19 AM
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
12-29-2007, 03:17 AM
Very kewl add-on, thank you.
vmacedonia
12-29-2007, 06:55 PM
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://vborg.vbsupport.ru/" 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
12-29-2007, 07:10 PM
bombastic hack!! i only imagine if we can put watermark too in the image. how can we?
glorify
12-30-2007, 09:26 PM
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://vborg.vbsupport.ru/" 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
12-31-2007, 09:05 PM
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
01-02-2008, 07:58 AM
bombastic hack!! i only imagine if we can put watermark too in the image. how can we?

That would be awesome... :up:
MustangLisa
01-06-2008, 12:50 AM
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
01-06-2008, 12:56 AM
Worked like a charm, thanks!!
Jenkins
01-06-2008, 06:27 AM
Works great!!! I was SO Disapointed when I realized that this wasn't a standard feature!

Thanks!!!
safakuygur
01-06-2008, 09:04 AM
PERFECT!

Thanks.
sinistergaming
01-08-2008, 01:13 AM
thanks
VeeDubZ
01-08-2008, 04:02 PM
fantastic addition. thanks
Jenkins
01-16-2008, 05:20 AM
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
01-17-2008, 02:26 PM
good work :)
beatifull, thanx u man.....
BoredOutOfMyMin
01-20-2008, 09:55 PM
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
01-25-2008, 08:39 AM
awesome hack! thank you!
Collussus
01-25-2008, 11:07 AM
nice one, installed.
OrionsMom
01-29-2008, 03:54 PM
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
01-29-2008, 04:55 PM
Yeah, I must say, this is very practical, and IMO should've been a part of the original coding.
Ad1tya
01-30-2008, 01:14 PM
Wow.. Thanks...

Now, is there a way we can have Thumbnail Code (which clicked takes us to the original image?).
Alfa1
01-30-2008, 08:00 PM
Excellent idea. Note that since vb 3.7 B4 the code is different than explained above.
Jase2
02-01-2008, 06:26 PM
Thanks a lot.

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

Regards Jason :)
Jase2
02-01-2008, 08:02 PM
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-02-2008, 05:15 PM
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-02-2008, 07:41 PM
Updated the first post so its now all right for editing in beta 4 plus added vmacedonia's code in to it.
aj8690
02-02-2008, 07:57 PM
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
02-12-2008, 09:14 PM
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
02-15-2008, 06:36 PM
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
02-16-2008, 01:05 AM
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
02-16-2008, 01:52 AM
Post deleted, wrong area. Thanks, rg.
pipedreams
03-01-2008, 12:51 PM
Nice hack, but it seems part of the upcoming VB 3.7 beta 6 now?
binevi
03-01-2008, 03:48 PM
can anyone make a button just next to links to copy them easily by clicking button
choccyclaire
03-01-2008, 04:39 PM
Cool, thanks. :D
Jase2
03-02-2008, 07:01 PM
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
03-05-2008, 06:24 PM
watermark would be AWSOME!!!
Syria BoY
03-05-2008, 07:11 PM
Good job
Jase2
03-07-2008, 06:52 PM
Looks like it's in BETA 6 now :) But two options only:

Picture Url

BBcode

Regards Jason :)
C.Birch
03-07-2008, 09:02 PM
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
03-08-2008, 10:54 AM
My pleasure C.Birch. But here's a "thanks" to you for creating the mod! :)

Regards Jason :)
Bilderback
03-09-2008, 03:41 AM
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
03-14-2008, 07:26 PM
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
04-05-2008, 01:57 PM
This Modification is already in the default template for vBulletin version 3.7.0 RC2
hrk
04-06-2008, 11:55 AM
Nice Hack.
Agree must have for default VB.
Thanks
furst
04-07-2008, 04:04 PM
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.