Forums

Image Gallery Structure

Permalink
Hey there,
thanks again for all of your help yesterday! I nearly finished my first C5 custom site and now there is just one big question left: How will I get my image gallery working / be able to upload new images and edit their description.

This is how the gallery is running at the moment:
I'm using the jQuery plugin 'Flexslider' and embedded the .js-files in a header2.php included in the page I'm using it - working pretty good so far. The gallery itself is hardcoded in a gallery.php, code is looking like this: 

<div class="flexslider">
  <ul class="slides">
  <li data-thumb="<?php echo $this->getThemePath() ?>/imgs/img01b.jpg">
      <img src="<?php echo $this->getThemePath() ?>/imgs/img01.jpgs" width="539" height="359">
       <p class="flex-caption">Caption Text</p>
    </li>
  <li data-thumb="<?php echo $this->getThemePath() ?>/imgs/img02b.jpg">
      <img src="<?php echo $this->getThemePath() ?>/imgs/img02.jpgs" width="539" height="359">
       <p class="flex-caption">Caption Text</p>
    </li>
     <li data-thumb="<?php echo $this->getThemePath() ?>/imgs/img03b.jpg">
      <img src="<?php echo $this->getThemePath() ?>/imgs/img03.jpgs" width="539" height="359">
       <p class="flex-caption">Caption Text</p>
    </li>
      </ul>
Viewing 15 lines of 16 lines. View entire code block.



It would be great if I could delete this hard coded part and make it editable via C5 - any ideas/solutions?

As always: thank you very much for your support!
 
mlmedia replied on at Permalink Reply
On a different gallery also running with Flexbox I just used a plugin calling "list files from set" which worked out pretty good - uploaded my imgs, edited the view of the plugin to fit the need of Flexbox and everything was ok but in that case I didn't need that thumbnail thing and the description - don't know how to get this up and running...
mlmedia replied on at Permalink Reply 1 Attachment
To show what gallery I designed I attached a scheme.png of the structure. Most of all it's just a grid of thumbnails one can use as navigation. You click on a thumb and the bigger image loads above the grid with a short description text.
I created this with flexbox - now I want to make it editable via C5 for "non-coders".
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
Have you checked this one?
http://www.concrete5.org/marketplace/addons/galleria_image_gallery/...

It looks like same as you required as well as free of cost also.

Rony
mlmedia replied on at Permalink Reply
Yeah good hint!
More or less what I need except that Decription stuff - will have to rewrite some of the view.php but looks promising! Thank you!
JohntheFish replied on at Permalink Reply
JohntheFish
Jordanlev has a gallery editing boilerplate/starter on Github that many developers have used to do the add/edit interface for galley packages.

see
http://www.concrete5.org/developers/open-source/...
mlmedia replied on at Permalink Reply
Really nice!
Gonna give that a try, looks like a pretty individual helper - thank you!
mlmedia replied on at Permalink Reply
Allright, using that Galleria plugin now, works pretty good so far.
I had to change the view.php a bit to show the title of the image. Now it doesn't display the description.
Core of the view.php looks like this: 


<?php     
   foreach($images as $imgInfo) {
   $f = File::getByID($imgInfo['fID']);
      echo $imgInfo['width'];
      echo '<li><img src="';
      echo $f->getRelativePath();
      echo '" ';
      echo 'title="';
      echo $f->getTitle();
      echo '"/>';
      echo $f->getDescription();
      echo '</li>';
         ;}; ?>


The earlier version looks like this: 

<?php     
   foreach($images as $imgInfo) {
   $f = File::getByID($imgInfo['fID']);
      echo $imgInfo['width'];
      echo '<li><img src="';
      echo $f->getRelativePath();
      echo '" ';
      echo 'title="';
      echo $f->getDescription();
      echo '"/></li>';
         ;}; ?>


...whats interesting: when the description is shown inside the title of the img tag it is shown, but the title attribute of the image is not. Now I changed it so the title is visible but now the description is lost :D