We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
  • Pages:
  • 1
[ C ] Looking to add military rank insignias
Topic Started: Jan 12 2015, 10:59 AM (637 Views)
Genosplace
Member Avatar
Member
[ *  * ]
I'm using a very nice code that adds a country flag under a persons avatar and am wondering if something else can be done like it. I want to add an option where people who have served can choose their military insignia and text and add it under their avatar. Would like a change size option that I can set in the code but I'm thinking around 100 x 100 or maybe a little more. Avatars are set at 180 x 180 and would like to play with size to see what looks right.

Example -

Avatar
Title

Posts: 36
Group: Member
Member #10
Joined: January 1, 2015

Military Member - (Marines, Air Force, etc, here)
insignia here(centered under text)


Country flag



Is this something that can be done?

Thanks for any help with this. :)
Edited by Genosplace, Jan 12 2015, 11:00 AM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
It's quite simple to modify my code for separate images. If you'll give me a list of all the military names and image URL's I can easily make this happen.

Please don't hotlink the image URL's, upload them to an image host or your own ZetaBoards forum. You probably want to make sure they're not copyrighted too.
Offline Profile Goto Top
 
Genosplace
Member Avatar
Member
[ *  * ]
Thanks Cory.

What is the best way to upload them to the board and where should I put them on there.
Offline Profile Goto Top
 
Helena
Member Avatar
M is for Mod

Upload them to posts in one of your staff forums. That way, if you wish to update an image, you can edit & replace the attachment without having to change any codes. You can also upload to your file manager.

Here are a couple of tutorials that may help you:

http://docs.zetaboards.com/board/images

http://docs.zetaboards.com/admin/fileuploads
Offline Profile Goto Top
 
Genosplace
Member Avatar
Member
[ *  * ]
Thanks Helena, I just made a forum in my Admin section to put them in.

I have another question though, it seems like you can only upload 1 image per post. Is that correct?
Offline Profile Goto Top
 
Helena
Member Avatar
M is for Mod

You can add up to 10 attachments per post.

When you use your browse function, select (highlight-usually by Control+Left Click) up to 10 image files. They will all upload at once.

If you need to get files from different folders, then just edit the post after the first uploads are made and you'll get a new browse field.
Offline Profile Goto Top
 
Genosplace
Member Avatar
Member
[ *  * ]
Thanks Helena I appreciate the board lessons. ^_^

I think I have it somewhat together now. Would be nice to have all the text centered on top of the emblem. I put the text on 2 lines because I thought it may be crowded on 1 line. If you think it would all fit on one line and not look funny that could work too. Thanks Cory.


Military Member
US Air Force

http://z2.ifrm.com/10745/197/0/p1076913/US_Air_Force_180.png


Military Member
US Army

http://z2.ifrm.com/10745/197/0/p1076914/US_Army_180.png


Military member
US Coast Guard

http://z2.ifrm.com/10745/197/0/p1076915/US_Coast_Guard_180.png


Military Member
US Marine Corps

http://z2.ifrm.com/10745/197/0/p1076916/US_Marine_Corps_180.png


Military Member
US Navy

http://z2.ifrm.com/10745/197/0/p1076917/US_Navy_180.png
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Admin CP Posted Image Users & Groups Posted Image Profile Fields

Create a Multiple choice field with these settings:

Title: Military Member
On Registration: Your Choice
Show field in topics: Yes
Admin Only Edit: No
Allow selection of more than 1 choice?: No
Choices:
Code:
 
None
US Air Force
US Army
US Coast Guard
US Marine Corps
US Navy
How to install the code:

Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Code:
 
<script type="text/javascript">
// <![CDATA[
$(function() {
var militaryN = ['None', 'US Air Force', 'US Army', 'US Coast Guard', 'US Marine Corps', 'US Navy'];
var militaryI = ['http://z3.ifrm.com/63/1/0/p482463/none.png', 'http://z2.ifrm.com/10745/197/0/p1076913/US_Air_Force_180.png', 'http://z2.ifrm.com/10745/197/0/p1076914/US_Army_180.png', 'http://z2.ifrm.com/10745/197/0/p1076915/US_Coast_Guard_180.png', 'http://z2.ifrm.com/10745/197/0/p1076916/US_Marine_Corps_180.png', 'http://z2.ifrm.com/10745/197/0/p1076917/US_Navy_180.png'];

$('dl.user_profile dt:contains(Military Member)').next('dd').each(function() {
for (var x = 0; x < militaryN.length; x++) {
if (militaryN[x] === $(this).text()) {
$(this).html('<a href="' + main_url + 'home/?c=6"><img src="' + militaryI[x] + '" alt="' + militaryN[x] + '" title="' + militaryN[x] + '" /></a>');
}
}
});

$('#edit_profile td:contains(Military)').next('td').append('<a href="javascript: void(0);" id="military-open">Choose Military Membership</a><div id="military" style="display: none"></div>');

$('#edit_profile td:contains(Military)').next('td').find('option').each(function() {
$(this).parent('select').hide();

for (var x = 0; x < militaryN.length; x++) {
if (militaryN[x] === $(this).text()) {
$('#military').append('<img src="' + militaryI[x] + '" alt="' + militaryN[x] + '" title="' + militaryN[x] + '" style="cursor: pointer; opacity: 0.5; display: inline-block; padding: 5px 10px" />');
}
}

$('#military-open').click(function() {
var pos = $('#military').position();
$(window).scrollTop(pos.top);
$(this).hide();
$('#military').fadeIn('slow');
});

$('#military img').click(function() {
$('#military img').css('opacity', '0.5');
$(this).css('opacity', '1.0');
var index = $(this).index();

if (index === 0) {
index = $(this).index() - 1;
}

$(this).parent('#military').parent('td').find('select').val(index);
});
});

var military = parseInt($('#edit_profile td:contains(Military)').next('td').find('select').val(), 10);
var nMilitary = military;
$('#edit_profile td:contains(Military)').next('td').find('#military img:eq(' + nMilitary + ')').css('opacity', '1.0');
});
// ]]>
</script>
Offline Profile Goto Top
 
Genosplace
Member Avatar
Member
[ *  * ]
I followed your instructions Cory and it is beautiful in the profile when you go to change it but it's not showing the actual pic on the board.

I have text inside the box where the country flag is (under the flag) that says -

Military Insignia
US Marine Corps


Did I leave something out?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
The profile field name should be Military Member, otherwise if you want it to be Military Insignia a few changes in the script will have to be made.
Offline Profile Goto Top
 
Genosplace
Member Avatar
Member
[ *  * ]
I saw the Military Member and changed Member to Insignia somewhere on the board, not in the code. Did I break it? :facepalm:

My main concern is that the insignia pic does not show up in a post.



I just got a light bulb over my head, I did break it. I changed the title in the Custom Profile Field thinking it was ok and broke it, sorry Cody. :doh:
Edited by Genosplace, Jan 16 2015, 02:49 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
In the code, see what changing this:
Code:
 
$('dl.user_profile dt:contains(Military Member)').next('dd').each(function() {
To this does:
Code:
 
$('dl.user_profile dt:contains(Military Insignia)').next('dd').each(function() {
Offline Profile Goto Top
 
Genosplace
Member Avatar
Member
[ *  * ]
You were posting while I was editing my post above you Cory, I did break it.

Now that it shows the emblem, pic, insignia...

I don't know if the pic is too big but it's not centered, it goes out of the box to the right a little and is cut off. The "Military Member" is justified left also.
Edited by Genosplace, Jan 16 2015, 02:55 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
<img src="' + militaryI[x] + '" alt="' + militaryN[x] + '" title="' + militaryN[x] + '" />
Change that to this:
Code:
 
<img src="' + militaryI[x] + '" alt="' + militaryN[x] + '" title="' + militaryN[x] + '" style="width: 100px; height: 100px" />
It will make them 100x100 pixels in the mini profile. You can change the pixel amount to whatever you desire.
Offline Profile Goto Top
 
Genosplace
Member Avatar
Member
[ *  * ]
Thanks Cory! The size thing did the trick. :up:

Can the Military Member text be centered instead of being justified left in the box?
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1