Google+
Linkedin

Création de filtres pour le portfolio

Avoir un site internet implique de le mettre à jour, en terme de contenu mais aussi parfois en terme de fonctionnalités. C’est ce que j’ai fais en ajoutant un filtre d’affichage à la partie portfolio de mon site internet.

Pour information mon site web ne tourne sous aucun CMS sauf pour la partie blog. Il est donc fait par mes propres soins, à base de codes HTML, CSS, PHP ou encore de Javascript.

UIkit framework front-end

Comme tout le monde maintenant (enfin je crois), j’utilise des frameworks. Comprenez un ensemble de fichiers offrant des fonctionnalités déjà codées. Ce qui fait gagner énormément de temps dans la conception web.
Pour la précédente version de mon site j’avais utilisé en partie Bootstrap développé par Twitter. Mais cette fois, je voulais changer, appréhender un autre framework, et au passage qu’il soit plus léger.
Mon choix c’est donc porté sur UIkit qui est développé par YooTheme, une société qui développe des thèmes pour les CMS Wordpress et Joomla. Deux CMS que j’utilise pour concevoir des sites internet, ça tombe bien !
UIkit pour User Interface Kit, vous aurez donc compris que l’on parle d’interface utilisateur. Ce Framework gère ainsi les boutons, les accordéons, la pagination, les fenêtres modales, bref tout ce qui concerne l’interface. Au développeur de l’intégrer ensuite au site web et de l’adapter graphiquement.

Filtres d’affichage pour portfolio

Redirection https forcée en localhost

L’affichage en slide des vignettes de mon portfolio se fait grâce au composant Slideset d’UIkit. Je parle bien sûr de l’effet défilement, l’aspect graphique, l’effet de survol principalement, résulte d’un codage HTML et d’une sur-couche CSS que j’ai codé.

Le menu des filtres

La première chose est de créer le menu pour les filtres.


<ul>
    <li data-uk-filter=""><a>Tout</a></li>
    <li data-uk-filter="filtre1"><a>Filtre 1</a></li>
    <li data-uk-filter="filtre2"><a>Filtre 2</a></li>
</ul>

Il s’agit simplement d’une liste, chaque item de liste correspondant à un filtre. Il faut aboslument que chaque item possède l’attribut data-uk-filter avec l’intitulé du filtre en guise de valeur. Sauf celui qui affiche tout.
Ce dernier (ou le premier dans la liste) doit bien avoir l’attribut mais avec une valeur vide.

Filtrer les images

Ensuite chaque vignette doit posséder ce même attribut et l’intitulé de filtre correspondant, par exemple data-uk-filter="sites web".


<ul class="uk-grid uk-slideset">
    <li data-uk-filter="filtre1"><img src=""></li>
    <li data-uk-filter="filtre2"><img src=""></li>
    <li data-uk-filter="filtre1"><img src=""></li>
</ul>

Et maintenant lorsque l’on clique sur l’un des filtres, n’apparaissent alors que les images liées au filtre. Bien entendu il ne faut pas oublier de mettre l’url des vignettes à l’attribut src de la balise img, et de bien installer UIkit avec ses fichiers javascript!

comments powered by Disqus