Specific Javascript Request for the new SM
Mike J
Registered Users Posts: 1,029 Major grins
I've been told to start a new thread to document specific functionality needed in Javascript so here goes. I've noted this in several other threads but I use Javascript to implement custom search functions for my ski racing photography business. This functionality is a key differentiator for my business as it allows potential customers to quickly find their photos without having to wade through 3000 photos from a race.
- I keyword each photo that is uploaded to a race gallery with relevant information such as racer's last name, team, age group etc. I use the names as listed on the start list which frequently has misspelled names.
- In each gallery's description, I use HTML to create drop down lists. See here for an example: http://www.mikejulianaphotography.com/SkiRacing/2013-Season/May-Day
- The user selects items from the various drop down lists. The most common thing is to simply select a last name from the list. The key here is that the customer will be able to see any variants of the last name if it was misspelled in the start list. This allow them to locate the photo even with the misspelling. This would be difficult, if not impossible, for them to do through the standard search.
- The items in the menu that are selected get passed to a javascript function that basically takes the input from the form and creates a custom keyword URL. Here's the basic javascript minus a couple of small functions.
function doSkiRaceSearch(season, raceName)
{
var raceEvent = document.skiRaceSearch.revent.options[document.skiRaceSearch.revent.selectedIndex].value;
var raceClub = document.skiRaceSearch.rclub.options[document.skiRaceSearch.rclub.selectedIndex].value;
var raceClass = document.skiRaceSearch.rclass.options[document.skiRaceSearch.rclass.selectedIndex].value;
var raceBG = document.skiRaceSearch.BG.options[document.skiRaceSearch.BG.selectedIndex].value;
var name = document.skiRaceSearch.lname.options[document.skiRaceSearch.lname.selectedIndex].value;
name = processRacerName(name);
newUrl ="";
newUrl = addNewParam(newUrl, season);
newUrl = addNewParam(newUrl, raceEvent);
newUrl = addNewParam(newUrl, raceName);
newUrl = addNewParam(newUrl, raceClub);
newUrl = addNewParam(newUrl, raceClass);
newUrl = addNewParam(newUrl, raceBG);
newUrl = addNewParam(newUrl, name);
if (raceEvent == "Awards")
{
newUrl ="";
newUrl = addNewParam(newUrl, season);
newUrl = addNewParam(newUrl, raceEvent);
newUrl = addNewParam(newUrl, raceName);
}
if (newUrl != "")
{
window.location = "/keyword/" + newUrl;
}
}
Race season starts in December and runs through the end of April. I would REALLY like the ability to do this by then or have legacy mode last through the season.
In addition, I have also implemented season-wide searches at the sub-category level. Here's a season search example: http://www.mikejulianaphotography.com/SkiRacing/2013-Season
For a season search, the HTML is placed in the Custom Header section and CSS is used to only display it in the proper places. The same javascript functionality is needed here but I would need this at the new folder level??? Not sure about that though.
I would very much appreciate it if someone from SM would acknowledge this specific request or tell me what to do to make sure that SM is aware of this.
- I keyword each photo that is uploaded to a race gallery with relevant information such as racer's last name, team, age group etc. I use the names as listed on the start list which frequently has misspelled names.
- In each gallery's description, I use HTML to create drop down lists. See here for an example: http://www.mikejulianaphotography.com/SkiRacing/2013-Season/May-Day
- The user selects items from the various drop down lists. The most common thing is to simply select a last name from the list. The key here is that the customer will be able to see any variants of the last name if it was misspelled in the start list. This allow them to locate the photo even with the misspelling. This would be difficult, if not impossible, for them to do through the standard search.
- The items in the menu that are selected get passed to a javascript function that basically takes the input from the form and creates a custom keyword URL. Here's the basic javascript minus a couple of small functions.
function doSkiRaceSearch(season, raceName)
{
var raceEvent = document.skiRaceSearch.revent.options[document.skiRaceSearch.revent.selectedIndex].value;
var raceClub = document.skiRaceSearch.rclub.options[document.skiRaceSearch.rclub.selectedIndex].value;
var raceClass = document.skiRaceSearch.rclass.options[document.skiRaceSearch.rclass.selectedIndex].value;
var raceBG = document.skiRaceSearch.BG.options[document.skiRaceSearch.BG.selectedIndex].value;
var name = document.skiRaceSearch.lname.options[document.skiRaceSearch.lname.selectedIndex].value;
name = processRacerName(name);
newUrl ="";
newUrl = addNewParam(newUrl, season);
newUrl = addNewParam(newUrl, raceEvent);
newUrl = addNewParam(newUrl, raceName);
newUrl = addNewParam(newUrl, raceClub);
newUrl = addNewParam(newUrl, raceClass);
newUrl = addNewParam(newUrl, raceBG);
newUrl = addNewParam(newUrl, name);
if (raceEvent == "Awards")
{
newUrl ="";
newUrl = addNewParam(newUrl, season);
newUrl = addNewParam(newUrl, raceEvent);
newUrl = addNewParam(newUrl, raceName);
}
if (newUrl != "")
{
window.location = "/keyword/" + newUrl;
}
}
Race season starts in December and runs through the end of April. I would REALLY like the ability to do this by then or have legacy mode last through the season.
In addition, I have also implemented season-wide searches at the sub-category level. Here's a season search example: http://www.mikejulianaphotography.com/SkiRacing/2013-Season
For a season search, the HTML is placed in the Custom Header section and CSS is used to only display it in the proper places. The same javascript functionality is needed here but I would need this at the new folder level??? Not sure about that though.
I would very much appreciate it if someone from SM would acknowledge this specific request or tell me what to do to make sure that SM is aware of this.
0
Comments
Do you have a website on another service? If so, you could take your current HTML form (minus the JavaScript) and add it to your New SmugMug site as an HTML block. You can have that form submit its choices to a page on your private webhost. That page can construct the required keywords URL for you using JavaScript and redirect the user back to SmugMug automatically.
If you'd like an example of the code, I can put it together for you?
Please check out my gallery of customisations for the New SmugMug, more to come!
On New SmugMug, you can add an HTML block with this content:
<div class="EventSearch" align="left"> <table border="1" width="70%" rules="NONE" frame="BOX"> <tbody> <tr> <td> <p align="center"> <font size="4">Find Your May Day Photos</font> </p> </td> </tr> <tr> <td> <p>Tip: You don't need to enter information in every field. The quickest way to find your photos is just select your last name and click Search. If you don't find your photo by searching on your last name, choose NoName in the Name field and search again</p> </td> </tr> <tr> <td> <form name="skiRaceSearch" action="http://s3.sherlockphotography.org/smugmug/mike-juliana/redirect.html"> <table border="0" cellspacing="4" cellpadding="4"> <tbody> <tr> <td valign="middle">Club: <select size="1" name="rclub" tabindex="2"> <option value="">All</option> <option value="BAKER">BAKER</option> <option value="CMAC">CMAC</option> <option value="CSRT">CSRT</option> <option value="CWSC">CWSC</option> <option value="IND">IND</option> <option value="MAC">MAC</option> <option value="MAC">MAC</option> <option value="MARA">MARA</option> <option value="MBSEF">MBSEF</option> <option value="MHRT">MHRT</option> <option value="MRT">MRT</option> <option value="MSRA">MSRA</option> <option value="MSST">MSST</option> <option value="SHASTA">SHASTA</option> <option value="TAS">TAS</option> <option value="WARP">WARP</option> <option value="WPSC">WPSC</option> </select></td> <td valign="middle">Class: <select size="1" name="rclass"> <option value="">All</option> <option value="U10">U10</option> <option value="U12">U12</option> <option value="U14">U14</option> <option value="U16">U16</option> </select></td> <td valign="middle">Event: <select size="1" name="revent"> <option value="">All</option> <option value="GS">GS</option> <option value="SG">SG</option> <option value="Awards">Awards</option> </select></td> <td valign="middle">Ladies/Men: <select size="1" name="BG"> <option value="">Both</option> <option value="Ladies">Ladies</option> <option value="Men">Men</option> </select></td> <td valign="middle">Last Name: <select size="1" name="lname"> <option value="">All</option> <option value="Andersen">Andersen</option> <option value="Anderson">Anderson</option> <option value="Austbo">Austbo</option> <option value="Babb">Babb</option> <option value="Beasley">Beasley</option> <option value="Beattie">Beattie</option> <option value="Beck">Beck</option> <option value="Begley">Begley</option> <option value="Bernhardt">Bernhardt</option> <option value="Bertell">Bertell</option> <option value="Bogatin">Bogatin</option> <option value="Borisenko">Borisenko</option> <option value="Bottero">Bottero</option> <option value="Bouchard">Bouchard</option> <option value="Bracy">Bracy</option> <option value="Brooks">Brooks</option> <option value="Broussard">Broussard</option> <option value="Brown">Brown</option> <option value="Buchanan">Buchanan</option> <option value="Burgess">Burgess</option> <option value="Calder">Calder</option> <option value="Casady">Casady</option> <option value="Cauble">Cauble</option> <option value="Chase">Chase</option> <option value="Costello">Costello</option> <option value="Cravens">Cravens</option> <option value="Cretu">Cretu</option> <option value="Cuzick">Cuzick</option> <option value="Day">Day</option> <option value="Deboer">Deboer</option> <option value="Dennehy">Dennehy</option> <option value="Derwin">Derwin</option> <option value="Dock">Dock</option> <option value="Erickson">Erickson</option> <option value="Farah">Farah</option> <option value="Farwig">Farwig</option> <option value="Finlay">Finlay</option> <option value="Ford">Ford</option> <option value="Frank">Frank</option> <option value="Frey">Frey</option> <option value="Georgiev">Georgiev</option> <option value="Gibbons">Gibbons</option> <option value="Glaser">Glaser</option> <option value="Glickman">Glickman</option> <option value="Graumann">Graumann</option> <option value="Griffiths">Griffiths</option> <option value="Griswold">Griswold</option> <option value="Haas">Haas</option> <option value="Haslett">Haslett</option> <option value="Hendrickson">Hendrickson</option> <option value="Hill">Hill</option> <option value="Hiscock">Hiscock</option> <option value="Hoffman">Hoffman</option> <option value="Hokanson">Hokanson</option> <option value="Holderman">Holderman</option> <option value="Holdermann">Holdermann</option> <option value="Holm">Holm</option> <option value="Hopkins">Hopkins</option> <option value="Howell">Howell</option> <option value="Hubbard">Hubbard</option> <option value="Ireton">Ireton</option> <option value="Janssen">Janssen</option> <option value="Johnson">Johnson</option> <option value="Jones">Jones</option> <option value="Juliana">Juliana</option> <option value="Kaimaktchiev">Kaimaktchiev</option> <option value="Kaiser">Kaiser</option> <option value="Kellar">Kellar</option> <option value="Kinnaman">Kinnaman</option> <option value="Klebleev">Klebleev</option> <option value="Kleinsmith">Kleinsmith</option> <option value="Klonsky">Klonsky</option> <option value="Knight">Knight</option> <option value="Koper">Koper</option> <option value="Kray">Kray</option> <option value="Lafky">Lafky</option> <option value="Lafreniere">Lafreniere</option> <option value="Laloli">Laloli</option> <option value="Lawrence">Lawrence</option> <option value="Layman">Layman</option> <option value="Lefevre">Lefevre</option> <option value="Levy">Levy</option> <option value="Lindsay">Lindsay</option> <option value="Lower">Lower</option> <option value="Manke">Manke</option> <option value="Mannelin">Mannelin</option> <option value="Marshall">Marshall</option> <option value="Maslen">Maslen</option> <option value="Mcburney">Mcburney</option> <option value="Mccall">Mccall</option> <option value="Mccarthy">Mccarthy</option> <option value="Melby">Melby</option> <option value="Merrill">Merrill</option> <option value="Miller">Miller</option> <option value="Mills">Mills</option> <option value="Montgomery">Montgomery</option> <option value="Moore">Moore</option> <option value="Morris">Morris</option> <option value="Morse">Morse</option> <option value="Munyon">Munyon</option> <option value="Musgrave">Musgrave</option> <option value="Nelson">Nelson</option> <option value="Nye">Nye</option> <option value="Nyman">Nyman</option> <option value="O'Brien">O'Brien</option> <option value="Ohara">Ohara</option> <option value="O'Kane">O'Kane</option> <option value="Olsen">Olsen</option> <option value="Olson">Olson</option> <option value="O'Shaughnessy">O'Shaughnessy</option> <option value="Paek">Paek</option> <option value="Parsons">Parsons</option> <option value="Paskill">Paskill</option> <option value="Paul">Paul</option> <option value="Pepin">Pepin</option> <option value="Pool">Pool</option> <option value="Prall">Prall</option> <option value="Pulliam">Pulliam</option> <option value="Purtzer">Purtzer</option> <option value="Rathbun">Rathbun</option> <option value="Rector">Rector</option> <option value="Redlich-Colgan">Redlich-Colgan</option> <option value="Reinhart">Reinhart</option> <option value="Rietmann">Rietmann</option> <option value="Ringer">Ringer</option> <option value="Rogers">Rogers</option> <option value="Rosell">Rosell</option> <option value="Ross">Ross</option> <option value="Sahm">Sahm</option> <option value="Schaffer">Schaffer</option> <option value="Schmidt">Schmidt</option> <option value="Schoening">Schoening</option> <option value="Schreder">Schreder</option> <option value="Schwisow">Schwisow</option> <option value="Scroggins">Scroggins</option> <option value="Seidman">Seidman</option> <option value="Sharpe">Sharpe</option> <option value="Shaughnessy">Shaughnessy</option> <option value="Sheasby">Sheasby</option> <option value="Sherbrooke">Sherbrooke</option> <option value="Simchuk">Simchuk</option> <option value="Simmons">Simmons</option> <option value="Simpson">Simpson</option> <option value="Skovborg">Skovborg</option> <option value="Smith">Smith</option> <option value="Soot">Soot</option> <option value="Sousa">Sousa</option> <option value="Spadaro">Spadaro</option> <option value="Streedain">Streedain</option> <option value="Sutter">Sutter</option> <option value="Tal">Tal</option> <option value="Tien">Tien</option> <option value="Tollefson">Tollefson</option> <option value="Tom">Tom</option> <option value="Toribio">Toribio</option> <option value="Treuting">Treuting</option> <option value="Tucker">Tucker</option> <option value="Ullrich">Ullrich</option> <option value="Vlases">Vlases</option> <option value="Walther-Gingold">Walther-Gingold</option> <option value="Watson">Watson</option> <option value="Whritenour">Whritenour</option> <option value="Wicklund">Wicklund</option> <option value="Wieche">Wieche</option> <option value="Willett">Willett</option> <option value="Wimberly">Wimberly</option> <option value="Woodring">Woodring</option> <option value="Wurden">Wurden</option> <option value="Yenne">Yenne</option> <option value="Zuber">Zuber</option> </select></td> <td valign="middle"> <input type="hidden" name="mode" value="skirace"> <input type="hidden" name="season" value="2013"> <input type="hidden" name="raceName" value="May Day"> <input type="submit" name="search" value="Search"> </td> </tr> </tbody> </table> </form> </td> </tr> </tbody> </table> </div>I posted the form here so you can see it working:
http://n-sherlock.smugmug.com/Development/Mike-Juliana-photography-redir/n-3rLpG
That form currently submits itself to "http://s3.sherlockphotography.org/smugmug/mike-juliana/redirect.html", but you can edit the URL in the sourcecode to point to your own server. Visit redirect.html and View Source or save it to your computer to check out how it works:
http://s3.sherlockphotography.org/smugmug/mike-juliana/redirect.html
Please check out my gallery of customisations for the New SmugMug, more to come!
Great Web page for helping us! You are the really hero. Good job. Thanks for sharing.
Comments and constructive criticism always welcome.
www.mikejulianaphotography.com
Facebook
Please check out my gallery of customisations for the New SmugMug, more to come!
I really try...
The thread started here...
http://www.dgrin.com/showthread.php?t=238039
and we were advised to visit this thread.
So far i have succesfully done keyword search in my galleries (for test purposes), easy and straightforward.
Simple keywording (lets say BIB number), implement and press search in each gallery and boom, there you go.
Not very comfy in the long term however. People remember their names... not their BIBs after a few months.
Plus it would be nice if one person with just his name got all the results he has from all his previous years.
However i cannot understand exactly these advanced options, for example search by name etc.
I have in an excel file, apart from the BIB (we said we already did that, and was easy), all other info (date/gender/event etc).
So i have a link between BIB, and other data fields,
If i understand correct, the script above generates a link that submits search options to another page outside smugmug.
This other page matches each field with the appropriate keyword, and comes back with the correct result, based again on the keyword(??) of smugmug, since that is really what smugmug can only do. Not very accurate if you ask me, because same bib could be used twice...?
So in other words, i have to save my excel data in an HTML version at that certain page.
Then Searching for GEORGE for example, returns all results that GEORGE is in, based on the keyword again that already is there as a data.
My question is the following.
Lets suppose that the database is really big. Like 3-4-5 thousand names.
And each time, more and more names add up.
I have each time to come back and put a new line in the HTML code? And crosscheck that this name doesnt already exist?
Is there any simpler option, like (i dont know if such thing even exists) KEYWORD1, KEYWORD2, etc. and say search but only in KEYWORD1 fields, KEYWORD2 fields etc?
I even thought, if different KEYWORD fields dont exist, of bypassing this by putting metadata in other fields, like CITY / STATE / TITLE etc...
Again sorry if nothing makes sense or if i am completely in the wrong direction.
I don't believe that SmugMug offers advanced search the way you describe it, I think you can only search for simple keywords.
The most elegant way of doing it would be to write a program that automatically generates the HTML with every name in it as a drop-down, from your Excel spreadsheet. Another possibility is just to provide a regular SmugMug keyword search box and ask people to type their names in, rather than picking them from a list.
Please check out my gallery of customisations for the New SmugMug, more to come!
How do we confine search to a single gallery/folder, and not the whole site?
The only way is the above one?
Any simpler way?
PS. The title is vague, i think it should be renamed to help more people interested...
Edit. One walkaround i can thing (if doable, remember i am no programmer) is have a script add to each search word, another search word that will be predefined.
For example.
In folder SWIMMING 2013 (where all photos contain apart from the BIB a second keyword SWIM) an action automatically instead of searching number 4232, does 4232+SWIM.
Please check out my gallery of customisations for the New SmugMug, more to come!
Getting all of the keywords into the correct format (Broussard) for the HTML form is not that bad if you automate it with something like mail merge. Since my keywords are in excel, this is pretty easy for me to do. I just merge all of the keywords into a new document and then copy/paste into the HTML form in the gallery.
By the way, I use photo mechanic to keyword my photos. This makes it easy to select all of the photos with a given bib #, type in the bib #, and have all of the needed keywords inserted for me.
Comments and constructive criticism always welcome.
www.mikejulianaphotography.com
Facebook
Can you help me with an example code of auto-adding keywords/text/numbers/symbols to customers search field?
For example if a customer searchs for GEORGE, it will automatically make it GEORGE+2013
Thank you in advance
Indeed Photo Mechanic is good, i tried that, (the alt + arrow) to easily go to next pic.
However i did the following.
2 different PCs (not just dual monitor it doesnt work)
Excell in one, slideshow on the other,
Each time i pressed in one PC (slideshow) next, i pressed in other PC (excell) enter
4523 ENTER + NEXT
very fast.
The advantage is that you have your data in an excel, and you can manipulate them. For example you can use a vlookup function to match BIBs + NAMES
Then I use a plugin (paid) LR Transporter, to import data from the excel back to LR.
aaa bit complicated, but you get also the name to search options, which is great especially in the long term. (imagine that in 2 years nobody will remember his BIB, but his name search will yield results since forever).
I'm working on building a tutorial for that now
By the way guys, I noticed that the Search content block actually has an option for "scope" which allows you to restrict the search to a given gallery, or even a given folder of galleries. This will probably solve many of the use-cases described above.
Please check out my gallery of customisations for the New SmugMug, more to come!
Edit: found it. you have to add a search content block.
http://news.smugmug.com/2013/10/24/release-notes-scope-your-search-adsense-content-block-organizer-filenames
My Website index | My Blog
Not sure how this post made its way into this thread... anyway, you cannot auto-reload a SmugMug page. The best solution would be to link people to a page hosted elsewhere that has that feature instead.
Please check out my gallery of customisations for the New SmugMug, more to come!
Please check out my gallery of customisations for the New SmugMug, more to come!
Go for it. No problem.
Comments and constructive criticism always welcome.
www.mikejulianaphotography.com
Facebook
Thanks Mike, here's the tutorial:
http://dgrin.com/showthread.php?t=242394
Please check out my gallery of customisations for the New SmugMug, more to come!