For the last several months, I’ve been trying to tweak our LibGuides home page – I wanted a collapsible menu that would allow users to view all the guides under a specific subject category. Better yet, if I could get the subjects into two columns, all the better. It took me a very long time – and a lot of struggling with Javascript & JQuery. (The nice thing is I know a lot more about both now.) Finally, I got things to work the way I’d envisioned – with the help of some very kind people on the Code4Lib mailing list & IRC channel.
This is what it looks like:
If you like it and would like to customize your system in a similar fashion, what you will need to do is this:
- First, make sure you have subject categories set up, and guides associated with each of those categories.
- Then you need to decide where you want the content box – with the expandable list – to go. You have a few options. No matter what option you use, I recommend that you first set up a box on a private or unpublished page to see what it looks like. You will create a new “Rich Text/Dynamic Content/Scripts” box. Make sure you click on the “plain text editor” and then paste this code:
- Before you save the code in this box, you need to change one little thing in the code. You need to locate your LibGuides institution ID. This is fairly easy to do – when you log into LibGuides, you should see that the URL of the login screen looks something like this:
https://libguides.com/login.php?iid=54&target=aecontent.php?pid=13029~sid=8728
The part that is important is iid=54. Now, in the big chunk of code you just copied, you need to go down to the bottom and locate this line:
< script id=”myScript” src=”http://api.libguides.com/api_subjects.php?iid=54&more=false&format=js&guides=true&break=li” type=”text/javascript” >< /script>
Change the iid=54 to the IID for your library – then you can save the code.
- Now you have two options – you can add other boxes and make a custom LibGuides home page (talk to Springshare if you want to do this). Your other option is to “import” this box to your existing LibGuides home page. To do that, click on the System Settings tab on the LibGuides administrative menu page. Then click Customize Homepage. Scroll down to the bottom of the page.Now you’ll need to open another window or tab and go back to the page that has the box you just created with the expandable menu. Make sure you are able to edit that page, and hover over the “edit” link in the upper right hand of that box. You should see a small box come up – the text will read something to the effect of Box 1869175. Write down the box number, and then go back to the Customize Homepage page.At the bottom of that page is a section that reads Ordering of Content Boxes on the Homepage – enter the box number in the box next to Center Column Boxes. You could put the code in a left or right box, but it probably wouldn’t look very pretty.
Anyway, that’s it, in a nutshell. I hope you find this useful! Thank you so much to Michael Klein & Dan Brubaker Horst for their help in writing this code!!
If you have any suggestions on how to make this easier, or clean up the code, please feel free to share. Also, for what it’s worth, Springshare tells me that they hope to build something like this into LibGuides eventually!