[%- PROCESS "opac/parts/header.tt2";
PROCESS "opac/parts/org_selector.tt2";
PROCESS "opac/parts/state_selector.tt2";
- ctx.page_title = l("Request Library Card");
+ ctx.page_title = l("Get a Library Card");
# for privacy, reload the page after (default) 5 minutes
refresh_time = ctx.register.settings.refresh_timeout || 300;
ctx_org = ctx.physical_loc || ctx.search_ou || ctx.aou_tree.id;
# TODO put these on the EG server?
-card_url = 'https://www.kcls.org/images/library/cards/Card_';
-wallet_cards = ['12man', 'blank', 'books', 'mirror'];
-keychain_cards = ['keychain'];
+card_url = 'https://kcls.bibliocms.com/wp-content/uploads/sites/20/2016/02/';
+wallet_cards = ['Card_Pride', 'Card_12', 'Card_blank', 'Card_mirror'];
+keychain_cards = ['Keychain_red'];
MACRO input_field(fclass, fname, label, type, css_class, value) BLOCK;
field_path = fclass _ "." _ fname;
font-family: 'Open Sans', sans-serif;
letter-spacing: .5pt;
font-size: 15px;
- width: 700px; /* to match bibliocms */
+ width: 900px; /* to match bibliocms */
}
#main-content-register label {
font-weight: bold;
margin-top: 12px;
list-style-type: none;
}
+#main-content-left {
+ width: 75%;
+ float: left;
+}
+#main-content-right {
+ width: 24%;
+ float: right;
+ font-size: 85%;
+}
+/*
+#main-content-right h3 {
+ font-size : 100%;
+}
+*/
+
.grid { width: 95%; }
.grid-cell {
float: left;
width: 90%;
}
#main-content-register .card-img {
- width: 120px;
- height:76px;
+ width: 195px;
+ height:123px;
}
.mailing-address-hidden {
display:none;
}
.success-minus-1 { font-size: 95%; }
.success-minus-2 { font-size: 90%; }
+
+#download-forms-list a, download-forms-list a:visited {
+ color: #41bee8;
+ text-decoration: none;
+ font-weight: 600;
+}
</style>
</head>
<div id="content-wrapper">
<div id="main-content-register">
- <h1>[% l('Request a Library Card')%]</h1>
-
- [% IF ctx.register.success %]
- <h2>[% l('Registration successful!') %]<h3>
- <p class='success-minus-1'>
- To fully activate your card you will need to visit a KCLS library
- with proof of address and photo ID that shows your date of
- birth.
+ <div id='main-content-left'>
+ <h1>[% l('Request a Library Card')%]</h1>
+
+ [% IF ctx.register.success %]
+ <h2>[% l('Registration successful!') %]<h3>
+ <p class='success-minus-1'>
+ To fully activate your card you will need to visit a KCLS library
+ with proof of address and photo ID that shows your date of
+ birth.
+ <br/>
+ Parents/guardians can assist with proof of address for full
+ activation for applicants under 18. Find a list of the documents
+ you may use to provide proof of address on our
+ <a href='https://w3.kcls.org/PDF/KCLS%20600%20ENG.pdf'>
+ downloadable application.
+ </a>
+ </p>
<br/>
- Parents/guardians can assist with proof of address for full
- activation for applicants under 18. Find a list of the documents
- you may use to provide proof of address on our
- <a href='https://w3.kcls.org/PDF/KCLS%20600%20ENG.pdf'>
- downloadable application.
- </a>
- </p>
- <br/>
- <a href='/eg/opac/register'><button
- id='submit-another'>Submit Another Application</button></a>
- <br/>
- <br/>
- <div class='success-minus-2'>
- You will be automatically redirected to
- <a href="https://www.kcls.org">www.kcls.org</a>...
- </div>
- <hr/>
- <input type='hidden' id='register-success' value='yep'/>
- [% ELSE %]
-
- <form method='POST' onsubmit="return onsub()">
- <ul>
- <li>
- <label>Choose a card size....</label>
- <span class="patron-reg-required">*</span>
- <div>
- <ul>
- <li>
- <input type="radio" name='card-type' id="card-type-wallet"
- onclick="show_card_types('wallet')">
- <label for="">Wallet</label>
- </li>
- <li>
- <input type="radio" id="card-type-keychain" name='card-type'
- onclick="show_card_types('keychain')">
- <label for="card-type-keychain">Keychain</label>
- </li>
- </ul>
- </div>
- </li>
- <li id='wallet-cards' style='display:none'>
- <label>Wallet Options</label>
- <div class="grid">
- [% FOR ctype IN wallet_cards %]
- <div class="grid-cell">
- <div><img class="card-img" src="[% card_url _ ctype _ '.jpg' %]"/></div>
- <div class="card-style-option">
- <input [% IF loop.first %]id='first-wallet-card'[% END %]
- type="radio" name="stgsc.10" value="[% ctype %]"/>
- </div>
- </div>
- [% END %]
- </div>
- <div class="grid-clear"></div>
- </li>
- <li id='keychain-cards' style='display:none'>
- <label>Keychain Options</label>
- <div class="grid">
- [% FOR ctype IN keychain_cards %]
- <div class="grid-cell">
- <div><img class="card-img" src="[% card_url _ ctype _ '.jpg' %]"/></div>
- <div class="card-style-option">
- <input [% IF loop.first %]id='first-keychain-card'[% END %]
- type="radio" name="stgsc.10" value="[% ctype %]"/>
- </div>
- </div>
- [% END %]
- </div>
- <div class="grid-clear"></div>
- </li>
-
- <li>
- <label>Choose delivery method of your new library card:</label>
- <div>
- <ul>
- <li>
- <input type='radio' name='stgu.delivery_method'
- value='Mail' checked='checked'/>
- <label>Mail to me.</label>
- </li>
- <li>
- <input type='radio' name='stgu.delivery_method'
- value='Pick up'/>
- <label>I will pick up at my home library</label>
- </li>
- </ul>
- </div>
- </li>
-
- <li><h2>Your Information</h2></li>
+ <a href='/eg/opac/register'><button
+ id='submit-another'>Submit Another Application</button></a>
+ <br/>
+ <br/>
+ <div class='success-minus-2'>
+ You will be automatically redirected to
+ <a href="https://www.kcls.org">www.kcls.org</a>...
+ </div>
<hr/>
+ <input type='hidden' id='register-success' value='yep'/>
+ [% ELSE %]
- <li>
- <div class="grid">
- <div class="grid-cell">
- <div>
- <label for="sgtu.first_given_name">First Name</label>
- <span class="patron-reg-required">*</span>
- </div>
- <div>[% input_field('stgu', 'first_given_name', 'First Name') %]</div>
+ <form method='POST' onsubmit="return onsub()">
+ <ul>
+ <li>
+ <label>Choose a card size....</label>
+ <span class="patron-reg-required">*</span>
+ <div>
+ <ul>
+ <li>
+ <input type="radio" name='card-type' id="card-type-wallet"
+ onclick="show_card_types('wallet')">
+ <label for="">Wallet</label>
+ </li>
+ <li>
+ <input type="radio" id="card-type-keychain" name='card-type'
+ onclick="show_card_types('keychain')">
+ <label for="card-type-keychain">Keychain</label>
+ </li>
+ </ul>
</div>
- <div class="grid-cell">
- <div><label for="sgtu.second_given_name">Middle Name</label></div>
- <div>[% input_field('stgu', 'second_given_name', 'Middle Name') %]</div>
+ </li>
+ <li id='wallet-cards' style='display:none'>
+ <label>Wallet Options</label>
+ <div class="grid">
+ [% FOR ctype IN wallet_cards %]
+ <div class="grid-cell">
+ <div><img class="card-img" src="[% card_url _ ctype _ '.jpg' %]"/></div>
+ <div class="card-style-option">
+ <input [% IF loop.first %]id='first-wallet-card'[% END %]
+ type="radio" name="stgsc.10" value="[% ctype %]"/>
+ </div>
+ </div>
+ [% END %]
</div>
- <div class="grid-cell">
- <div>
- <label for="sgtu.family_name">Last Name</label>
- <span class="patron-reg-required">*</span>
+ <div class="grid-clear"></div>
+ </li>
+ <li id='keychain-cards' style='display:none'>
+ <label>Keychain Options</label>
+ <div class="grid">
+ [% FOR ctype IN keychain_cards %]
+ <div class="grid-cell">
+ <div><img class="card-img" src="[% card_url _ ctype _ '.jpg' %]"/></div>
+ <div class="card-style-option">
+ <input [% IF loop.first %]id='first-keychain-card'[% END %]
+ type="radio" name="stgsc.10" value="[% ctype %]"/>
+ </div>
</div>
- <div>[% input_field('stgu', 'family_name', 'Last Name') %]</div>
+ [% END %]
</div>
- </div>
- <div class="grid-clear"></div>
- </li>
-
- <li>
- <label for="stgu.day_phone">Phone Number</label>
- <div class="grid">
- <div class="grid-cell">
- <div>[% input_field('stgu', 'day_phone', 'Phone Number') %]</div>
+ <div class="grid-clear"></div>
+ </li>
+
+ <li>
+ <label>Choose delivery method of your new library card:</label>
+ <div>
+ <ul>
+ <li>
+ <input type='radio' name='stgu.delivery_method'
+ value='Mail' checked='checked'/>
+ <label>Mail to me
+ <span style='font-size:85%'>(Delivered within 1-2 weeks)</span>
+ </label>
+ </li>
+ <li>
+ <input type='radio' name='stgu.delivery_method'
+ value='Pick up'/>
+ <label>I will pick up at my home library</label>
+ </li>
+ </ul>
</div>
- <div class="grid-cell">(xxx-xxx-xxxx)</div>
- </div>
- <div class="grid-clear"></div>
- </li>
-
- <li>
- <label for="stgu.dob">
- Birth Date<span class="patron-reg-required">*</span>
- </label>
- <input type="hidden" name="stgu.dob" id="stgu.dob"/>
- <div class="grid">
- <div class="grid-cell">
- <div><input onchange="compile_dob()" type="text"
- maxlength="2" size="2" id="dob.month"></div>
- <div><label for="dob.month">MM</label></div>
+ </li>
+
+ <li><h2>Your Information</h2></li>
+ <hr/>
+
+ <li><h3>Name</h3></li>
+ <li>
+ <div class="grid">
+ <div class="grid-cell">
+ <div>
+ <label for="sgtu.first_given_name">First</label>
+ <span class="patron-reg-required">*</span>
+ </div>
+ <div>[% input_field('stgu', 'first_given_name', 'First') %]</div>
+ </div>
+ <div class="grid-cell">
+ <div><label for="sgtu.second_given_name">Middle</label></div>
+ <div>[% input_field('stgu', 'second_given_name', 'Middle') %]</div>
+ </div>
+ <div class="grid-cell">
+ <div>
+ <label for="sgtu.family_name">Last</label>
+ <span class="patron-reg-required">*</span>
+ </div>
+ <div>[% input_field('stgu', 'family_name', 'Last') %]</div>
+ </div>
</div>
- <div class="grid-cell">
- <div><input onchange="compile_dob()" type="text"
- maxlength="2" size="2" id="dob.day"></div>
- <div><label for="dob.day">DD</label></div>
+ <div class="grid-clear"></div>
+ </li>
+
+ <li>
+ <label for="stgu.day_phone">Phone Number</label>
+ <div class="grid">
+ <div class="grid-cell">
+ <div>[% input_field('stgu', 'day_phone', 'Phone Number') %]</div>
+ </div>
+ <div class="grid-cell">(xxx-xxx-xxxx)</div>
</div>
- <div class="grid-cell">
- <div><input onchange="compile_dob()" type="text"
- maxlength="4" size="4" id="dob.year"></div>
- <div><label for="dob.year">YYYY</label></div>
+ <div class="grid-clear"></div>
+ </li>
+
+ <li>
+ <label for="stgu.dob">
+ Birth Date<span class="patron-reg-required">*</span>
+ </label>
+ <input type="hidden" name="stgu.dob" id="stgu.dob"/>
+ <div class="grid">
+ <div class="grid-cell">
+ <div><input onchange="compile_dob()" type="text"
+ maxlength="2" size="2" id="dob.month"></div>
+ <div><label for="dob.month">MM</label></div>
+ </div>
+ <div class="grid-cell">
+ <div><input onchange="compile_dob()" type="text"
+ maxlength="2" size="2" id="dob.day"></div>
+ <div><label for="dob.day">DD</label></div>
+ </div>
+ <div class="grid-cell">
+ <div><input onchange="compile_dob()" type="text"
+ maxlength="4" size="4" id="dob.year"></div>
+ <div><label for="dob.year">YYYY</label></div>
+ </div>
+ <div class="grid-cell">
+ <div><span id='dob.display'></span></div>
+ </div>
</div>
- <div class="grid-cell">
- <div><span id='dob.display'></span></div>
+ <div class="grid-clear"></div>
+ </li>
+
+ <li>
+ <label for="stgu.email">
+ Your email address for faster library notices
+ </label>
+ <div>[% input_field('stgu', 'email', 'Email', 'email') %]</div>
+ </li>
+
+ <li>
+ <label>Optional: What is your gender identity?</label>
+ <div>[% input_field('stgsc', '1', 'Gender') %]</div>
+ </li>
+
+ <li>
+ <label class="gfield_label" for="">
+ If you are under age 18, list all parents<br/>and guardians living at your address:
+ </label>
+ <div>[% input_field('stgu', 'ident_value2', 'Parent / Guardian', 'text', 'wide-input') %]</div>
+ </li>
+
+ <li>
+ <label for="stgu.home_ou">
+ What do you want your home library to be?
+ </label>
+ <div>
+ [% INCLUDE build_org_selector
+ name='stgu.home_ou'
+ id='stgu.home_ou'
+ value=value || ''
+ can_have_users_only=1
+ no_indent=1
+ no_root=1
+ none_label=l('Please choose a library...')
+ onchange="validate('stgu.home_ou')"
+ valid_org_list=ctx.register.valid_orgs
+ %]
+ <span class="patron-reg-required">*</span>
+ [% IF ctx.register.invalid.bad_home_ou %]
+ <span class='patron-reg-required'>
+ [% l('Please select a valid library') %]
+ </span>
+ [% END %]
</div>
- </div>
- <div class="grid-clear"></div>
- </li>
-
- <li>
- <label for="stgu.email">
- Your email address for faster library notices
- </label>
- <div>[% input_field('stgu', 'email', 'Email', 'email') %]</div>
- </li>
-
- <li>
- <label>Optional: What is your gender identity?</label>
- <div>[% input_field('stgsc', '1', 'Gender') %]</div>
- </li>
-
- <li>
- <label class="gfield_label" for="">
- If you are under age 18, list all parents<br/>and guardians living at your address:
- </label>
- <div>[% input_field('stgu', 'ident_value2', 'Parent / Guardian', 'text', 'wide-input') %]</div>
- </li>
-
- <li>
- <label for="stgu.home_ou">
- What do you want your home library to be?
- </label>
- <div>
- [% INCLUDE build_org_selector
- name='stgu.home_ou'
- id='stgu.home_ou'
- value=value || ''
- can_have_users_only=1
- no_indent=1
- no_root=1
- none_label=l('Please choose a library...')
- onchange="validate('stgu.home_ou')"
- valid_org_list=ctx.register.valid_orgs
- %]
- <span class="patron-reg-required">*</span>
- [% IF ctx.register.invalid.bad_home_ou %]
- <span class='patron-reg-required'>
- [% l('Please select a valid library') %]
- </span>
- [% END %]
- </div>
- </li>
-
- <li><h2>Contact Preferences</h2></li>
- <hr/>
-
- <li>
- <label>May we contact you?</label>
- <div>
- <ul>
- <li>
- [% input_field('stgsc', '3', 'Events Mailing', 'checkbox') %]
- <label for="stgsc.3">Tell me about KCLS news and events</label>
- </li>
- <li>
- [% input_field('stgsc', '4', 'Foundation Mailing', 'checkbox') %]
- <label for="stgsc.4">
- Send me information about The King County Library System Foundation
- </label>
- </li>
- </ul>
- </div>
- </li>
-
- <li>
- <h3>
- Residential Address<span class="patron-reg-required">*</span>
- </h3>
- </li>
-
- <li>
- <div>[% input_field(
- 'stgba', 'street1', 'Street Address', 'text', 'wide-input') %]</div>
- <label for="stgba.street1">
- Street Address
- <span class="patron-reg-required">*</span>
- </label>
- </li>
- <li>
- <div class="grid">
- <div class="grid-cell" style="width:40%">
- <div>[% input_field(
- 'stgba', 'street2', 'Address Line 2', 'text', 'wide-input') %]</div>
- <div><label for="stgba.street2">Address Line 2</label></div>
+ </li>
+
+ <li><h2>Contact Preferences</h2></li>
+ <hr/>
+
+ <li>
+ <label>May we contact you?</label>
+ <div>
+ <ul>
+ <li>
+ [% input_field('stgsc', '3', 'Events Mailing', 'checkbox') %]
+ <label for="stgsc.3">Tell me about KCLS news and events</label>
+ </li>
+ <li>
+ [% input_field('stgsc', '4', 'Foundation Mailing', 'checkbox') %]
+ <label for="stgsc.4">
+ Send me information about The King County Library System Foundation
+ </label>
+ </li>
+ </ul>
</div>
- <div class="grid-cell" style="width:40%">
- <div>[% input_field('stgba', 'city', 'City') %]</div>
- <div>
- <label for="stgba.city">
- City<span class="patron-reg-required">*</span>
- </label>
+ </li>
+
+ <li>
+ <h3>
+ Residential Address<span class="patron-reg-required">*</span>
+ </h3>
+ </li>
+
+ <li>
+ <div>[% input_field(
+ 'stgba', 'street1', 'Street Address', 'text', 'wide-input') %]</div>
+ <label for="stgba.street1">
+ Street Address
+ <span class="patron-reg-required">*</span>
+ </label>
+ </li>
+ <li>
+ <div class="grid">
+ <div class="grid-cell" style="width:40%">
+ <div>[% input_field(
+ 'stgba', 'street2', 'Address Line 2', 'text', 'wide-input') %]</div>
+ <div><label for="stgba.street2">Address Line 2</label></div>
</div>
- </div>
- </div>
- <div class="grid-clear"></div>
- </li>
- <li>
- <div class="grid">
- <div class="grid-cell" style="width:40%">
- <div>[% PROCESS state_selector name='stgba.state' id='stgba.state' %]</div>
- <div>
- <label for="stgba.state">
- State<span class="patron-reg-required">*</span>
- </label>
+ <div class="grid-cell" style="width:40%">
+ <div>[% input_field('stgba', 'city', 'City') %]</div>
+ <div>
+ <label for="stgba.city">
+ City<span class="patron-reg-required">*</span>
+ </label>
+ </div>
</div>
</div>
- <div class="grid-cell" style="width:40%">
- <div>[% input_field('stgba', 'post_code', 'Zip / Post Code') %]</div>
- <div>
- <label for="stgba.post_code">
- Zip / Post Code<span class="patron-reg-required">*</span>
- </label>
+ <div class="grid-clear"></div>
+ </li>
+ <li>
+ <div class="grid">
+ <div class="grid-cell" style="width:40%">
+ <div>[% PROCESS state_selector name='stgba.state' id='stgba.state' %]</div>
+ <div>
+ <label for="stgba.state">
+ State<span class="patron-reg-required">*</span>
+ </label>
+ </div>
+ </div>
+ <div class="grid-cell" style="width:40%">
+ <div>[% input_field('stgba', 'post_code', 'Zip / Post Code') %]</div>
+ <div>
+ <label for="stgba.post_code">
+ Zip / Post Code<span class="patron-reg-required">*</span>
+ </label>
+ </div>
</div>
</div>
- </div>
- <div class="grid-clear"></div>
- <input type='hidden' name='stgba.country' value='USA'/>
- </li>
-
- <li>
- <label>Mailing Address</label>
- <div>
- <input type="checkbox" onclick="show_hide_mailing(this.checked)"
- name="mailing_matches_billing"
- id="mail_addr_matches_billing" checked="checked">
- <label for="mail_addr_matches_billing">Same as Residential Address</label>
- </div>
- </li>
-
- <li id='mailing-address-1' style='display:none'>
- <div>[% input_field(
- 'stgma', 'street1', 'Street Address', 'text', 'wide-input') %]</div>
- <label for="stgma.street1">
- Street Address
- <span class="patron-reg-required">*</span>
- </label>
- </li>
- <li id='mailing-address-2' style='display:none'>
- <div class="grid">
- <div class="grid-cell" style="width:40%">
- <div>[% input_field(
- 'stgma', 'street2', 'Address Line 2', 'text', 'wide-input') %]</div>
- <div><label for="stgma.street2">Address Line 2</label></div>
+ <div class="grid-clear"></div>
+ <input type='hidden' name='stgba.country' value='USA'/>
+ </li>
+
+ <li>
+ <label>Mailing Address</label>
+ <div>
+ <input type="checkbox" onclick="show_hide_mailing(this.checked)"
+ name="mailing_matches_billing"
+ id="mail_addr_matches_billing" checked="checked">
+ <label for="mail_addr_matches_billing">Same as Residential Address</label>
</div>
- <div class="grid-cell" style="width:40%">
- <div>[% input_field('stgma', 'city', 'City') %]</div>
- <div>
- <label for="stgma.city">
- City<span class="patron-reg-required">*</span>
- </label>
+ </li>
+
+ <li id='mailing-address-1' style='display:none'>
+ <div>[% input_field(
+ 'stgma', 'street1', 'Street Address', 'text', 'wide-input') %]</div>
+ <label for="stgma.street1">
+ Street Address
+ <span class="patron-reg-required">*</span>
+ </label>
+ </li>
+ <li id='mailing-address-2' style='display:none'>
+ <div class="grid">
+ <div class="grid-cell" style="width:40%">
+ <div>[% input_field(
+ 'stgma', 'street2', 'Address Line 2', 'text', 'wide-input') %]</div>
+ <div><label for="stgma.street2">Address Line 2</label></div>
</div>
- </div>
- </div>
- <div class="grid-clear"></div>
- </li>
- <li id='mailing-address-3' style='display:none'>
- <div class="grid">
- <div class="grid-cell" style="width:40%">
- <div>[% PROCESS state_selector name='stgma.state' id='stgma.state' %]</div>
- <div>
- <label for="stgma.state">
- State<span class="patron-reg-required">*</span>
- </label>
+ <div class="grid-cell" style="width:40%">
+ <div>[% input_field('stgma', 'city', 'City') %]</div>
+ <div>
+ <label for="stgma.city">
+ City<span class="patron-reg-required">*</span>
+ </label>
+ </div>
</div>
</div>
- <div class="grid-cell" style="width:40%">
- <div>[% input_field('stgma', 'post_code', 'Zip / Post Code') %]</div>
- <div>
- <label for="stgma.post_code">
- Zip / Post Code<span class="patron-reg-required">*</span>
- </label>
+ <div class="grid-clear"></div>
+ </li>
+ <li id='mailing-address-3' style='display:none'>
+ <div class="grid">
+ <div class="grid-cell" style="width:40%">
+ <div>[% PROCESS state_selector name='stgma.state' id='stgma.state' %]</div>
+ <div>
+ <label for="stgma.state">
+ State<span class="patron-reg-required">*</span>
+ </label>
+ </div>
+ </div>
+ <div class="grid-cell" style="width:40%">
+ <div>[% input_field('stgma', 'post_code', 'Zip / Post Code') %]</div>
+ <div>
+ <label for="stgma.post_code">
+ Zip / Post Code<span class="patron-reg-required">*</span>
+ </label>
+ </div>
</div>
</div>
- </div>
- <div class="grid-clear"></div>
- <input type='hidden' name='stgma.country' value='USA'/>
- </li>
-
- <li>
- <div class="grid">
- <div class="grid-cell">
- <input type="submit" value="[% l('Submit Registration') %]"/>
- </div>
- <div class="grid-cell">
- <button onclick="location.href='https://www.kcls.org/'; return false">
- Cancel and Return to KCLS
- </button>
+ <div class="grid-clear"></div>
+ <input type='hidden' name='stgma.country' value='USA'/>
+ </li>
+
+ <li>
+ <div class="grid">
+ <div class="grid-cell">
+ <input type="submit" value="[% l('Submit Registration') %]"/>
+ </div>
+ <div class="grid-cell">
+ <button onclick="location.href='https://www.kcls.org/'; return false">
+ Cancel and Return to KCLS
+ </button>
+ </div>
</div>
- </div>
- <div class="grid-clear"></div>
- </li>
- </ul>
- </form>
- [% END # IF ctx.success %]
+ <div class="grid-clear"></div>
+ </li>
+ </ul>
+ </form>
+ [% END # IF ctx.success %]
+ </div><!-- main-content-left -->
+ <div id='main-content-right'>
+ <h3>Download an Application</h3>
+ [% app_url = 'https://www.kcls.org/usingthelibrary/card/applications';
+ text_img_url = 'https://www.kcls.org/includes/usingthelibrary/images';
+ langs = [
+ { label => 'English',
+ pdf => 'ENG%20KCLS%20600%20Library%20Card%20Application.pdf'},
+ { label => 'Arabic',
+ pdf => 'ARABIC%20KCLS%20600%20Library%20Card%20Application.pdf',
+ img => 'arabic_diacritics.gif'
+ img_width => 79,
+ img_height => 20},
+ { label => 'Chinese',
+ pdf => 'CHINESE%20KCLS%20600%20Library%20Card%20Application.pdf',
+ img => 'cantonese.gif',
+ img2 => 'mandarin.gif',
+ img_width => 66,
+ img_height => 22,
+ img2_width => 47,
+ img2_height => 24},
+ { label => 'French',
+ pdf => 'FRENCH%20KCLS%20600%20Library%20Card%20Application.pdf',
+ img => 'french.gif',
+ img_width => 61,
+ img_height => 19},
+ { label => 'Korean',
+ pdf => 'KOREAN%20KCLS%20600%20Library%20Card%20Application.pdf'},
+ { label => 'Russian',
+ pdf => 'RUSSIAN%20KCLS%20600%20Library%20Card%20Application.pdf',
+ img => 'russian.gif',
+ img_width => 61,
+ img_height => 19},
+ { label => 'Somali',
+ pdf => 'SOMALI%20KCLS%20600%20Library%20Card%20Application.pdf',
+ img => 'somali.gif',
+ img_width => 81,
+ img_height => 17},
+ { label => 'Spanish',
+ pdf => 'SPANISH%20KCLS%20600%20Library%20Card%20Application.pdf',
+ img => 'spanish.gif',
+ img_width => 61,
+ img_height => 19},
+ { label => 'Vietnamese',
+ pdf => 'VIETNAMESE%20KCLS%20600%20Library%20Card%20Application.pdf',
+ img => 'vietnamese.gif',
+ img_width => 81,
+ img_height => 20},
+ { label => 'English (Large Print)',
+ pdf => '062211%20KCLS%20600%20LP.pdf'}
+ ];
+ %]
+ <ul id='download-forms-list'>
+ [% FOREACH lang IN langs %]
+ <li>
+ <a href='[% app_url %]/[% lang.pdf %]'>[% lang.label %]</a>
+ </li>
+ [% IF lang.img %]
+ <li>
+ <a href='[% app_url %]/[% lang.pdf %]'>
+ <img src='[% text_img_url %]/[% lang.img %]'
+ width="[% lang.img_width %]"
+ height="[% lang.img_height %]"
+ />
+ </a>
+ [% IF lang.img2 %]
+ <a href='[% app_url %]/[% lang.pdf %]'>
+ <img src='[% text_img_url %]/[% lang.img2 %]'
+ width="[% lang.img2_width %]"
+ height="[% lang.img2_height %]"
+ />
+ </a>
+ [% END %]
+ </li>
+ [% END %]
+ [% END %]
+ <li>
+ You'll need <a href='http://get.adobe.com/reader/'>Adobe Reader</a>.
+ </li>
+ <li>
+ <a href='http://kcls.bibliocms.com/faq/library-cards/'>Related FAQs</a>
+ </li>
+ <li>
+ <hr/>
+ Read our <a href='https://www.kcls.org/usingthelibrary/policies/privacy.cfm'>Privacy Policy</a>.
+ </li>
+ </ul>
+ </div>
+ <div class="grid-clear"></div>
</div>
</div>