Display Images on Essential Grid Filters

1. Make sure the filters you’d like to use are also selected as the grid’s main source.

2. Add the “filter” element to your Grid, and then select your filters.

3. Make note of the “slug” name for each of your filters

4. Add the following CSS inside the Item Skin Editor and replace the “data-selectedfilter” with your filter “slug” name and the “background: url” link with your preferred image links.

Quick Note:

To display the images on the right of the grid filter instead of left, replace the words “before” in the CSS below with the word “after”

/* Change the "data-selectedfilter" name with the "slug" name */
/* Example: [data-selectedfilter="filter-my-filter-slug"] */
 
/* Change the “background: url("");” link with the your preferred image link */
/* Example: background: url("http://www.themepunch.com/my-image.png"); */
 
.esg-filterbutton[data-filter="filter-entertainment"]:before {
  background: url("http://www.themepunch.com/entertainment.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
  content: "";
  float: left;
  width: 50px;
  height: 50px;
  margin: 5px 10px 5px 0px;
  border-radius:50% !important;
}
 
.esg-filterbutton[data-filter="filter-scenery"]:before {
  background: url("http://www.themepunch.com/scenery.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
  content: "";
  float: left;
  width: 50px;
  height: 50px;
  margin: 5px 10px 5px 0px;
  border-radius:50% !important;
}
 
.esg-filterbutton[data-filter="filter-modern"]:before {
  background: url("http://www.themepunch.com/modern.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
  content: "";
  float: left;
  width: 50px;
  height: 50px;
  margin: 5px 10px 5px 0px;
  border-radius:50% !important;
}
.esg-filterbutton {
    float:left;    
}
 
.esg-filterbutton span {
    margin-top: 15pxdata-selectedfilter” name with the “slug” name */
/* Example: [data-selectedfilter=”filter-my-filter-slug”] */
 
/* Change the “background: url(“”);” link with the your preferred image link */
/* Example: background: url(“http://www.themepunch.com/my-image.png”); */
 
.esg-filterbutton[data-filter=”filter-entertainment”]:before {
  background: url(“http://www.themepunch.com/entertainment.png”);
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
  content: “”;
  float: left;
  width: 50px;
  height: 50px;
  margin: 5px 10px 5px 0px;
  border-radius:50%!important;
}
 
.esg-filterbutton[data-filter=”filter-scenery”]:before {
  background: url(“http://www.themepunch.com/scenery.png”);
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
  content: “”;
  float: left;
  width: 50px;
  height: 50px;
  margin: 5px 10px 5px 0px;
  border-radius:50%!important;
}
 
.esg-filterbutton[data-filter=”filter-modern”]:before {
  background: url("http://www.themepunch.com/modern.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
  content: "" !important;
    float: left;
}