How to Add Image Filtering Widget in Weebly Site?

Free image filtering widget for Weebly site allows you to display portfolio items in a three columns layout with filtering option based on the predefined category. It helps users to filter the relevant category, click on any filtered results and go to that particular page for more details. You can use this widget not only for portfolios but also for menu items, products and in many other useful scenarios. The widget will look like below and you can download the files here.

How to Create Image Filtering Widget?

The widget contains isotope filtering script along with Bootstrap framework to place the panels in 3 columns layout. Download and extract the source ZIP file to your local computer, the file contains the following items:

• Image Filter.html – this files contains HTML code
• Assets – contains all CSS, Scripts and images for the widget

Open the “Imge Filtering.html” file in the browser to see how the widget works. Basically you need an image, title and description for each panel along with a category for filtering. Follow the below steps to add the image filtering widget to your Weebly site.

Step 1 – Uploading Images to Weebly Site

Prepare your images similar to the image sizes (644 x 420px) in the “assets/img” folder and upload all the images required for the widget under “Theme > Edit HTML / CSS > Assets”. We recommend to create a new folder named “ImageFiltering” and upload all the images under that folder. The file path of the Weebly image will be like “http://youesite.com/files/theme/ImageFiltering/image1.jpg”.

Step 2 – Uploading CSS

There are two CSS files in the assets folder – Bootstrap.css and the custom ImageFiltering.css. Upload both the CSS files under “ImageFiltering” folder on your Weebly site.

Step 3 – Uploading Script Files

The whole widget is controlled by six various scripts also available under assets folder. Upload all the six scripts files under “ImageFiltering” folder on your Weebly site.

Step 4 – Adding HTML

Now that you have added the required images, CSS and scripts, go to the page on which you want to add the widget, drag the embed code element and the HTML code of the widget.

• You can get the HTML code by opening the “Image Filter.html” file with any text editor like Notepad or TextEdit.
• Delete the stylesheet (first few lines) and the scripts links (last few lines) and copy the remaining HTML to an another text file.
• Replace the image URLs with your own obtained from step 1 and replace the title/description with your own content.

Define all your categories and enable the filtering buttons for those categories. In this example we have used 4 categories along with “All” option which can be seen in the HTML as below.

<!-- Filter Buttons -->
<div class="portfolio-filter-container margin-top-20">
<ul class="portfolio-filter">
<li class="portfolio-filter-label label label-primary">
filter by:
</li>
<li>
<a href="#" class="portfolio-selected btn btn-default" data-filter="*">All</a>
</li>
<li>
<a href="#" class="btn btn-default" data-filter=".HTML">HTML</a>
</li>
<li>
<a href="#" class="btn btn-default" data-filter=".CSS">CSS</a>
</li>
<li>
<a href="#" class="btn btn-default" data-filter=".JavaScript">JavaScript</a>
</li>
<li>
<a href="#" class="btn btn-default" data-filter=".PHP">PHP</a>
</li>
</ul>
</div>
<!-- End Filter Buttons -->

These filter buttons can be seen on top the widget as shown below:

Each portfolio item is identified with one of the above 4 category so that the filtering can work properly. For example below is the portfolio item identified as CSS category which will be shown when the “CSS” filter button is clicked.

<!-- Portfolio Item -->
<div class="col-md-4 portfolio-item margin-bottom-40 CSS">
<div>
<a href="#">
<h3 class="margin-top-20">This is a CSS filter</h3>
<figure>
<img src="assets/img/image1.jpg" alt="image1">
<figcaption>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</figcaption>
</figure>
</a>
</div>
</div>
<!-- End Portfolio Item -->

Ensure to identify all your items with one of the defined categories from the filtering section.

Step 5 – Linking Scripts and CSS

The final step is to link the scripts and CSS files uploaded in step 2 & 3 to your Weebly page. Add the below code under “Footer Code” section for linking the scripts:

<!-- Scripts -->
<script type="text/javascript" src="/files/theme/ImageFiltering/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/files/theme/ImageFiltering/scripts.js"></script>
<!-- Isotope - Portfolio Sorting -->
<script type="text/javascript" src="/files/theme/ImageFiltering/jquery.isotope.js" type="text/javascript"></script>
<!-- Animate on Scroll-->
<script type="text/javascript" src="/files/theme/ImageFiltering/jquery.visible.js" charset="utf-8"></script>
<!-- Modernizr -->
<script src="/files/theme/ImageFiltering/modernizr.custom.js" type="text/javascript"></script>
<!-- End Scripts -->

Add the below code under “Header Code” section to link the CSS files:

<link rel="stylesheet" href="/files/theme/ImageFiltering/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="/files/theme/ImageFiltering/imagefiltering.css" rel="stylesheet">

Publish your site to see the image filtering widget in action.