Skip to content

Instantly share code, notes, and snippets.

@dpawluk
Created February 28, 2014 21:59
Show Gist options
  • Save dpawluk/9280873 to your computer and use it in GitHub Desktop.
Save dpawluk/9280873 to your computer and use it in GitHub Desktop.
Simple script that can be added to a Help Center using the Humble Squid Theme. Will give category boxes a background images specified in the array of links to substitute.
//Begin Humble Squid Category Image Boxes JS Snippet
cat_list = $("ul.category-list li"); // jQuery object containing the category list elements
link_list = $("ul.category-list li a"); // jQuery object containing the category list link elements
// hardcoded array of image assets for use with categories
image_links = [
"//p1.zdassets.com/hc/theme_assets/link/to/images/for/categories.jpg",//replace with actual image links from your Help Center's assets
"//p1.zdassets.com/hc/theme_assets/link/to/images/for/categories.jpg",
"//p1.zdassets.com/hc/theme_assets/link/to/images/for/categories.jpg",
"//p1.zdassets.com/hc/theme_assets/link/to/images/for/categories.jpg",
"//p1.zdassets.com/hc/theme_assets/link/to/images/for/categories.jpg",
"//p1.zdassets.com/hc/theme_assets/link/to/images/for/categories.jpg",
];
total_cats = $("ul.category-list li").length; //number of categories we need to iterate over
for (var x = 0; x < total_cats; x++) { //loop to add images to category list elements then strip links of borders and text
var a_cat = cat_list[x];
$(a_cat).css("background-image", "url(\"" + image_links[x] + "\")"); //addes background images
var a_cat_link = link_list[x];
$(a_cat_link).text(""); //strips link text
$(a_cat_link).css({
'border': '0px',
'width': '100%',
'height': '100%',
'margin': '0px'
});
}
//End Humble Squid Category Image Boxes JS Snippet
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment