CouchCMS Forum Bug Reporting and Troubleshooting
Problems, need help? Have a tip or advice? Post it here.
26 posts Page 2 of 3
Post a reply
Previous 1, 2, 3 Next

Re: Photo Gallery in a Parallax (Onepage) Website

avatar
kajoe14
Registered User
According to the code:
Code: Select all
   <cms:editable
    name        = 'grid_thumb'
    assoc_field = 'gg_image'
    label       = 'Grid Thumbnail Image'
    desc        = 'Thumbnail Image'
    width       = '420'
    height      = '320'
    enforce_max = '1'
    type        = 'thumbnail'
/>


I hoped that they would all be of 420px x 320px. I did try to replace enforce_max = '1' with crop = '1', but it didn't help.

Re: Photo Gallery in a Parallax (Onepage) Website

avatar
kajoe14
Registered User
The filters on the other hand seem to be pointing to the respective folder, though for some reason, they are not able to filter the individual folder itself.
This is what i have copied from the console upon clicking on the filter 'Various'.
Code: Select all
<li class="filter actcat">
   <a href="#" data-filter=".foldervarious"></a>various
</li>


The thumbnails on the other hand don't seem to be targeted? - as you can see from the class folder- - Just a thought. :D
Code: Select all
<li class="box  mix mix_all folder- all" style="display: inline-block;  opacity: 1;">
    <a href="http://localhost/Kajoe14/kajoe/uploads/image/gallery/boy2.jpg" 
     data-rel="prettyPhoto[gallery]" class="respimg" alt="" style="opacity: 1; top: 0px;">
    <img src="http://localhost/Kajoe14/kajoe/uploads/image/gallery/boy-307x320.jpg"
     alt="" class="">
     <div class="folio-name clear" style="display: block; left: 0px; top: -100%; 
      overflow: hidden; transition: all 300ms ease;">   
         <div class="folio-overlay" style="display: block; left: 0px; top: -100%; 
             overflow: hidden; transition: all 300ms ease;">
             <span class="overlay red"></span>
            <h4></h4>   
           <h6></h6>   
        </div>
      </div>
    </a>
</li>

Re: Photo Gallery in a Parallax (Onepage) Website

User avatar
trendoman
Registered User
kajoe14 wrote: According to the code:
I hoped that they would all be of 420px x 320px. I did try to replace enforce_max = '1' with crop = '1', but it didn't help.


boy-307x320.jpg

This shows that on the moment of creating this thumbnail, the setting enforce_max='1' existed. Since you replaced it with crop='1' it is requred to update template by visiting as superadmin and regenerate thumbnails. Please let me know if it helps.
Join COUCH:TALK channel here https://t.me/couchcms_chat
Ryazania — a framework to boost productivity with Add-ons viewtopic.php?f=2&t=13475
Support my efforts to help the community https://boosty.to/trendo/donate

Re: Photo Gallery in a Parallax (Onepage) Website

User avatar
trendoman
Registered User
<li class="box mix mix_all folder-<cms:show k_page_folder_name /> all">

and result is:
<li class="box mix mix_all folder- all" style="display: inline-block; opacity: 1;">

Let's place again somewhere this dump and find the variable which holds correct folder names for each of your images.
Code: Select all
<cms:pages masterpage='gallery.php' limit='3' ><cms:dump /></cms:pages>


I presume, that k_page_folder_name will be empty or non-existent, but some other will contain proper value. Can you check it for us?
Join COUCH:TALK channel here https://t.me/couchcms_chat
Ryazania — a framework to boost productivity with Add-ons viewtopic.php?f=2&t=13475
Support my efforts to help the community https://boosty.to/trendo/donate

Re: Photo Gallery in a Parallax (Onepage) Website

avatar
kajoe14
Registered User
The <cms:dump> generated these among of course others:
Code: Select all
pages
k_page_folderid: 6
k_page_foldername: various
k_page_foldertitle: various
k_page_folderdesc:
k_page_folderimage:
k_page_folderlink: http://localhost/AarniMikkola/gallery.php?f=6
k_page_folderpagecount: 8
k_page_foldertotalpagecount: 8
k_page_folderparentid: -1
k_page_folderweight: 0


The k_page_foldername points to various. Not sure what to make of it.

Re: Photo Gallery in a Parallax (Onepage) Website

avatar
KK
Moderator
@kajoe14, let us remove Couch from the equation for the moment.
Could you please attach a *working* static HTML/JS/CSS design here? Please do not use any Couch tag in it at all.

Thanks.

Re: Photo Gallery in a Parallax (Onepage) Website

avatar
kajoe14
Registered User
<!DOCTYPE html>
<!--[if IE 7 ]><html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie9" xmlns="http://www.w3.org/1999/xhtml" lang="en_US"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US">
<!--<![endif]-->
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/magnific-popup.css" media="all">
<link rel="stylesheet" href="css/superslides.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Open+Sans:400,300' rel='stylesheet' type='text/css'>
<script src="js/modernizr.custom.97074.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="css/ie8.css" /><![endif]-->
<link rel="shortcut icon" href="images/aarni.ico">
</head>
<body onLoad="initialize()">
<div id="main">
<div class="wrapper">
<div id="intro">
<div id="topSlide">
<div id="slides">
<ul class="slides-container">
<li>
<!--<div class="rester"></div>-->
<div class="container">
<h1 class="white">I'm <span>Aarni</span></h1>
<div class="patern clear"><span></span></div>
</div>
<div class="slides-big-img"><img src="images/bg/darkbrown-hairstyle.jpg" alt="dark hair stylin"></div>
</li>
<li>
<!--<div class="rester"></div>-->
<div class="container">
<h1 class="white"><span>Professional</span> Make-Up Artist</h1>
<h3>based in Helsinki</h3>
<div class="patern clear"><span class="right"></span></div>
</div>
<div class="slides-big-img"><img src="images/bg/eyelash-makeup.jpg" alt="easy eyelash makeup tips"></div>
</li>
<li>
<!--<div class="rester"></div>-->
<div class="container ">
<h3>makeup isn't just material,</h3>
<h1 class="white">It's my <span>Passion</span> </h1>
<div class="patern clear"><span></span></div>
</div>
<div class="slides-big-img"><img src="images/bg/silverly-eyeshadow.jpg" alt="easy eyeshadow tips"></div>
</li>
</ul>
<div class="slides-navigation">
<a href="#" class="prev"><i class="fa fa-long-arrow-left fa-2x"></i></a>
<a href="#" class="next"><i class="fa fa-long-arrow-right fa-2x"></i></a>
</div>
</div>
<a href="#about" class="start"><img src="images/start.png" alt="click to start" name="tooltip" title="START"></a>
</div>
</div>
<div class="sections">
<div class="navigation">
<div class="nav-button transition">
<span></span>
<span></span>
<span></span>
</div>
<div class="inner">
<img src="images/aarni-logo.png" class="logo" alt="aarni mikkola logo">
<div class="link-holder" id="nav">
<ul>
<li class="current"><a href="#about" class="scroll-link">About Me</a></li>
<li><a href="#testimonials" class="scroll-link">Testimonials</a></li>
<li><a href="#resume" class="scroll-link">Resume</a></li>
<li><a href="#portfolio" class="scroll-link">Portfolio</a></li>
<li><a href="#contacts" class="scroll-link">Get in Touch</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- about Me -->
<div id="about" class="sections ws">
<div class="content">
<div class="container">
<h3 class="sections-head">Who I Am</h3>
<h2>About Me</h2>
<div id="owl-demo" class="owl-carousel">
<div class="item fist-slide">
<div class="small-separator"></div>
<p> --- </p>
<img src="images/aarni.jpg" class="present-block animaper" alt="aarni artist" >
<div class="customNavigation">
<a class="btn next-slide transition lanch-sklills" name="tooltip" title="Read More">next</a>
</div>
</div>
<div class="item">
<div class="grid-4">
<h3 class="big-about-text">My Ideologies</h3>
<div class="about-separator"></div>
<p> --- </p>
</div>
<div class="grid-2">
<h3 class="big-about-text">My skillset</h3>
<!-- content -->
</div>
<div class="customNavigation clear">
<a class="btn close transition" name="tooltip" title="Close">next</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- testimontals -->
<div id="testimonials" class="sections">
<div class="content">
<div class="quote-icon"><i class="fa fa-quote-right fa-2x"></i></div>
<div class="rester"></div>
<div class="rester black"></div>
<div class="container">
<div class="clear"></div>
<!-- content -->
</div>
</div>
</div>
<!-- resume -->
<div id="resume" class="sections">
<div class="content">
<div class="rester"></div>
<div class="rester red"></div>
<div class="container">
<h3 class="sections-head white">My Expertise</h3>
<div class="small-separator ws"></div>
<h2 class="white">Curriculum Vitae</h2>
<div class="small-separator ws"></div>
<p class="white"> -- --</p>
<div class="row" id="service_boxes">
<div class="service_box animaper">
<a name="0" class="animbox">Achievements</a>
</div>
<div class="service_box actser animaper">
<a name="1" class="animbox">Education</a>
</div>
<div class="service_box animaper">
<a name="2" class="animbox">Experience</a>
</div>
</div>
</div>
<div class="serviseslider-holder no-nav">
<div class="container">
<div class="serviseslider">
<ul class="slides">
<li>
<p> --- /p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- portfolio -->
<div id="portfolio" class="sections ws">
<div class="content">
<div class="quote-icon"><i class="fa fa-suitcase fa-2x"></i></div>
<div class="container grid1">
<h3 class="sections-head">Portfolio</h3>
<h2>My work</h2>
<div class="small-separator"></div>
</div>
<div id="options" class="clear">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="filter actcat" data-filter="all">All</li>
<li class="filter" data-filter="beauty">beauty makeup </li>
<li class="filter" data-filter="theatre">theatre</li>
<li class="filter" data-filter="various">various</li>
</ul>
</div>
<div class="aih">
<ul id="folio_container" class="grid-full animaper">
<li class="box mix beauty mix_all">
<a href="images/portfolio/smokey-eye-makeup.jpg" data-rel="prettyPhoto[gallery] class="respimg" alt="apply smokey eye makeup">
<img src="images/portfolio/smokey-eye-makeup-aarni2.jpg" alt="smokey eye shadows">
<div class="folio-name clear">
<div class="folio-overlay">
<span class="overlay red"></span>
<h4>Make-Up Artist: Aarni </h4>
<h6>Beauty Make-Up</h6>
</div>
</div>
</a>
</li>
<li class="box mix beauty mix_all">
<a href="images/portfolio/blackskin-makeup.jpg" data-rel="prettyPhoto[gallery] class="respimg" alt="darkskin models">
<img src="images/portfolio/blackskin-makeup-aarni2.jpg" alt="make up darskin models">
<div class="folio-name clear">
<div class="folio-overlay">
<span class="overlay red"></span>
<h4>Make-Up Artist: Aarni</h4>
<h6>Beauty Make-Up</h6>
</div>
</div>
</a>
</li>
<li class="box mix various mix_all">
<a href="images/portfolio/ollie-ongelma.jpg" data-rel="prettyPhoto[gallery] class="respimg" alt="ollie ongelma">
<img src="images/portfolio/ollie-ongelma-aarni.jpg" alt="make up ollie ongelma">
<div class="folio-name clear">
<div class="folio-overlay">
<span class="overlay red"></span>
<h4>Make-Up Artist: Aarni Mikkola</h4>
<h6>Video</h6>
</div>
</div>
</a>
</li>
<li class="box mix beauty mix_all">
<a href="images/portfolio/veera-pohjola.jpg" data-rel="prettyPhoto[gallery] class="respimg" alt="veera pohjala">
<img src="images/portfolio/veera-pohjola-aarni.jpg" alt="veera pohjola">
<div class="folio-name clear">
<div class="folio-overlay">
<span class="overlay red"></span>
<h4>Make-Up Artist: Aarni Mikkola</h4>
<h6>Beauty Make-Up</h6>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- contacts -->
<div id="contacts" class="sections">
<div class="content">
<div class="rester"></div>
<div class="rester red"></div>
<div class="quote-icon to-top" name="tooltip" title="Go Up"><i class="fa fa-angle-up fa-3x"></i></div>
<div class="container">
<div class="contactForm clear">
<fieldset id="contact_form">
<div class="grid-half">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="grid-half">
<label for="email" class="em">Email</label>
<input type="text" name="email" id="email" class="right" />
</div>
<label for="message" class="m-top">Message</label>
<textarea name="message" id="message" ></textarea>
<div class="clear"></div>
<label>
<button class="submit_btn transition" id="submit_btn">SEND</button>
</label>
<div id="result"></div>
</fieldset>
</div>
<div class="contact-details">

</div>
</div>
<div class="social-list">
<ul>
<li><a href="#" target="_blank" class="transition"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank" class="transition"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#" target="_blank" class="transition"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<div class="footer clear">
<p>&copy; 2016. All rights Reserved.</p>
<div class="small-separator ws"></div>
</div>
</div>
</div>
</div>
</div>
<!-- scripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jpreloader.min.js"></script>
<script type="text/javascript" src="js/smoothscroll.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/superslides.js"></script>
<script type="text/javascript" src="js/mixitup.js"></script>
<script type="text/javascript" defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/hoverdir.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/appear.js"></script>
<script type="text/javascript" src="js/jquery.nav.js"></script>
<script type="text/javascript" src="js/fitvids.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/jquery.hammer.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/jquery.sticky.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/shortcodes.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
</body>
</html>

Re: Photo Gallery in a Parallax (Onepage) Website

User avatar
trendoman
Registered User
kajoe14 wrote: The <cms:dump> generated these among of course others:
Code: Select all
pages
k_page_folderid: 6
k_page_foldername: various
k_page_foldertitle: various
k_page_folderdesc:
k_page_folderimage:
k_page_folderlink: http://localhost/AarniMikkola/gallery.php?f=6
k_page_folderpagecount: 8
k_page_foldertotalpagecount: 8
k_page_folderparentid: -1
k_page_folderweight: 0


The k_page_foldername points to various. Not sure what to make of it.



This is perfect! Now you can see that you used
<li class="box mix mix_all folder-<cms:show k_page_folder_name /> all">
while the correct variable is k_page_foldername.
Make the changes and try if it works.
Join COUCH:TALK channel here https://t.me/couchcms_chat
Ryazania — a framework to boost productivity with Add-ons viewtopic.php?f=2&t=13475
Support my efforts to help the community https://boosty.to/trendo/donate

Re: Photo Gallery in a Parallax (Onepage) Website

avatar
kajoe14
Registered User
I changed the variable:
Code: Select all
<li class="box mix mix_all folder-<cms:show k_page_folder_name /> all">

to the variable:
Code: Select all
<li class="box mix mix_all folder-<cms:show k_page_foldername /> all">


sad enough, it didn't result in the filters working. Its actually sad coz I was certain it would. :)

Re: Photo Gallery in a Parallax (Onepage) Website

User avatar
trendoman
Registered User
I assume, now the view-source shows fetched folder names and not empty class.
Isn't it the time to align the whole thing to the working static sample?
Join COUCH:TALK channel here https://t.me/couchcms_chat
Ryazania — a framework to boost productivity with Add-ons viewtopic.php?f=2&t=13475
Support my efforts to help the community https://boosty.to/trendo/donate
Post a reply
Previous 1, 2, 3 Next
26 posts Page 2 of 3
Return to Bug Reporting and Troubleshooting