{"id":82,"date":"2020-01-28T09:43:22","date_gmt":"2020-01-28T09:43:22","guid":{"rendered":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/hover-extension\/filter-sorting\/"},"modified":"2020-03-29T14:53:24","modified_gmt":"2020-03-29T14:53:24","slug":"filter-sorting","status":"publish","type":"docs","link":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/hover-extension\/filter-sorting\/","title":{"rendered":"Filter & Sorting"},"content":{"rendered":"

Filter & Sorting<\/h1>\n
\n

\u00a0Filter & Sorting is a simple filtering and sorting extension for WordPress in the Image Hover Ultimate. It is an advancement of the WordPress gallery. You can display the posts or your photo gallery by sorting a filterable way. This image hover extension allows users to filter posts by category, tags, post types, etc. Now, let’s see how to use this extension and embed Filter & Sorting items within your pages\/posts:<\/strong><\/em><\/p>\n

 <\/p>\n

Creating a New Filter & Sorting<\/h2>\n

First, navigate Image Hover> Image Hover> Extension>Filter & Sorting <\/strong>from your dashboard.<\/p>\n

 <\/p>\n

Then, create a new Filter & Sorting Style by clicking on the Create Style button like below<\/p>\n

\"\"<\/a><\/p>\n

<\/h2>\n

Adding & Customizing the Data<\/h2>\n

Now, after you create a new Filter & Sorting, it’s time to go further and add\/style data to your extensions. Let’s start this section:<\/p>\n

Add New Data to the Filter & Sorting Items:<\/h3>\n

At the top left corner, click on the + symbol (Add New Data) to adding new data to the items from image hover elements. The following info you’ll need to input in order to get perfect data to show:<\/p>\n

\u21d2Title:<\/strong> Set Title For repeating your Category Data.<\/p>\n

\u21d2Image Hover Shortcode:<\/strong> Add an Image Hover Shortcode here. After saving, kindly reload to loading CSS or JS data properly.<\/p>\n

\n
<\/div>\n
After adding a valid element’s shortcode to the extensions, the preview shall look like this,<\/div>\n
\"\"<\/a><\/div>\n<\/div>\n

Note:<\/strong> Here, I’ve added my own preferred shortcode for a single category. So the end result is like this. Yours may look different than me as your shortcode will be different.<\/p>\n

<\/h3>\n

General Settings<\/h3>\n

\u039eCategory Menu-<\/span> Here in this section, you can define the parent category for the filtering and add categories to the gallery.<\/p>\n

\"\"<\/a><\/p>\n

\u21d2Parent Category:<\/strong> Here at the very first in the settings panel, you can select your parent category for the filter and sorting items. For instance, if you select Image as the parent, then the image category will remain active by default.<\/p>\n

\u21d2Add New Category:<\/strong> Add a new category or edit\/delete an existing category according to your needs.<\/p>\n

 <\/p>\n

\u039eItems Data Settings-<\/span> In this section, you can customize the data in the filter and sorting items.<\/p>\n

\"\"<\/a><\/p>\n

\u21d2Column Size: <\/strong>Set how many columns you want to show in a single row. Set the options for different dimensions to get the maximum responsiveness.<\/p>\n

\u21d2Item Padding:<\/strong> Set the padding value for the top, right, bottom and left around the item’s data for different dimensions. You can link the values together or customize them individually.<\/p>\n

\u21d2Margin:\u00a0<\/strong>Set the margin value for the top, right, bottom and left around the item’s data for different dimensions. You can link the values together or customize them individually.<\/p>\n

 <\/p>\n

\u039eMenu Style-<\/span> And this option is for customizing the menu of the filter and sorting items.<\/p>\n

\"\"<\/a><\/p>\n

\u21d2Menu Align:<\/strong> Customize the alignment of the filter and sorting menu, either left, center or right.<\/p>\n

\u21d2Typography:<\/strong> Set the typography options for the filter menu button texts. Here you can customize the font-family, font size, decoration, and styles.<\/p>\n

\u21d2Width Mode: <\/strong>Set the width mode of the filter and sorting menu. If you select static, then manually customize the width of the menu. Or if you select dynamic, then the width will be set dynamically by default.<\/p>\n

\u21d2Color:<\/strong> Add a custom color to the filter menu in the gallery for normal, hover, and active views.<\/p>\n

\u21d2Background Color:<\/strong> Add a custom background color to the menu for both normal and hover. Know more about Background Color<\/a>.<\/p>\n

\u21d2Border Type:<\/strong> Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the filter and sorting menu for different dimensions. You can link the values together or customize them individually.<\/p>\n

\u21d2Border Color:<\/strong>\u00a0Add a custom color to the border for both normal and hover view.<\/p>\n

\u21d2Box Shadow:\u00a0<\/strong>Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset. Know more about Box-Shadow<\/a>.<\/p>\n

\u21d2Border Radius:<\/strong> Set the border-radius around the menu for different dimensions.<\/p>\n

\u21d2Padding:<\/strong> Set the padding value for the top, right, bottom and left around the menu for different dimensions. You can link the values together or customize them individually.<\/p>\n

\u21d2Margin:\u00a0<\/strong>Set the margin value for the top, right, bottom and left around the menu for different dimensions. You can link the values together or customize them individually.<\/p>\n

<\/h2>\n

Custom CSS<\/h3>\n

Here you’ll find a box where you can add your custom CSS code. Advanced developers can use this option for their convenience. After entering the codes, developers can see the live preview by reloading the page.<\/p>\n

Once you finish coding hit the “Save” button to make your changes.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

Now, just Copy the Shortcode and Paste anywhere in the post or page or plugins where you want to show the Filter & Sorting.<\/strong><\/em><\/p>\n

\n

\n","protected":false},"featured_media":0,"parent":53,"menu_order":2,"template":"","doc_tag":[],"class_list":["post-82","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/types\/docs"}],"version-history":[{"count":5,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/82\/revisions"}],"predecessor-version":[{"id":2846,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/82\/revisions\/2846"}],"up":[{"embeddable":true,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/53"}],"wp:attachment":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/doc_tag?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}