Forums

Filter Gallery

Permalink
I am web designer with strong knowledge in HTML and CSS and a little on PHP. As of now, I just created my own Theme for C5. Now I wanted to create own filter gallery with category coding except same methods as to thishttp://tympanus.net/Tutorials/CSS3FilterFunctionality/... except replacing html into concrete's php and without needing to use plug-in. I want to be able to learn and understand how to code it myself. Where do I start? How do I create category of images and what code do I need to implement?

You help is appreciated.
 
JohntheFish replied on at Permalink Reply
JohntheFish
To get you started, have a look at
https://github.com/jordanlev/c5_designer_gallery...
sergio11ofpp replied on at Permalink Reply
sergio11ofpp
Create FileSet in Filemanager.
Loader::model("file_set");
 Loader::model('file_list');
 $fs = FileSet::getByName('file_set_name');
 $fileList = new FileList();
 $fileList->filterBySet($fs);
 $fileList->filterByType(FileType::T_IMAGE);   
 $files = $fileList->get();
  foreach($files as $image){
     $source = $image->getRelativePath();
     echo '<img src="'.$source.'" />';
}


Now You will output all the images in that fileset.
To filter them I will suggest a little bit of JS(Jquery)

So when you echo the images add a specific class to them for exapmle Title of the image
foreach($files as $image){
     $name= $image->getFileName();
     $source = $image->getRelativePath();
     echo '<img class="'.$name.'" src="'.$source.'" />';
}


Or any other Option That.

echo $image->getFileName();
    echo $image->getTitle(); 
    echo $image->getAttribute("width");
    echo $image->getDownloadURL();
    echo $image->getRelativePath();
    echo $image->getDescription();
    echo $image->getAttribute('attribute_name')


After write a JS script

$('a').click(function(event){
  event.preventDeafault();
  var show_this = $(this).attr('class'); //so it will take the class that you want show
other.hide();
show_this.show();
});


Hope this Helped! WTD
APrather replied on at Permalink Reply
Johnthefish: Thanks for the linl, look like this is going to be a long route for me.. but I'll have a look at it anyway.

Sergio11ofpp: Little confusion here... Honestly JS coding isn't my best friend. But I understanding I'd need to create new JS and place it in somewhere of my template folder correct? And yet, what code do I need to implement for categories i.e. GREEN, RED, BLUE for based on fileset? page.php to get it work between JS? Can you give me hints.

[i] page.php example [/i]
<html>
   <head>
        <link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath () ?> /default.css" media="screen"/> 
<!--<title>Decayed</title> old -->
<?php Loader::element('header_required'); ?>
    <head>
<body>
        ?? (WHAT WHERE DO I IMPLEMENT CATEGORY LINES IN C5) 
<body> 
</html>


Tanks in advance