Slider with Advanced custom fields

Hi,

I’m working on my first project using Roots. So far I got it ruining , got Grunt watch going on and I’m working in the first custom page template for a full screen slider.

I want to use carousel, but I’ve found a few drawbacks so far, an I couldn’t fin any post that addresses what I’m encountering.

I’m using ACF for adding images and a caption, and loops in the page template to add the indicators and slides as describes in the ACF and BS examples (http://www.advancedcustomfields.com/resources/repeater/ and http://getbootstrap.com/javascript/#carousel) the page is adding, as expected stacked images. But the carousel is not being created.

Page template

<?php if(have_rows('slides')): ?>
<div id="home-slider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
  	
	<ol class="carousel-indicators">
	<?php while(have_rows('slides')): the_row();
	  	$i =0;
  	?>	
	    <li data-target="#home-slider-indicator" data-slide-to="<?php echo $i;?>" class="<?php if ($i ==0): echo('active'); endif; ?>"></li>
	 
	<?php endwhile; ?>
	</ol><!--end indicators-->
<!-- Slides -->
<div class="carousel-inner">
<?php while(have_rows('slides')): the_row();
	//vars
	$image = get_sub_field('image');
	$firstText =  get_sub_field('first_text');
	$secondText =  get_sub_field('second_text');
	$i =0;
?>	
  
    <div class="item <?php if ($i ==0): echo('active'); endif; ?>">
      <img src="<?php echo ($image); ?>" alt="<?php echo($firstText);?>">
      <div class="carousel-caption">
        <span class="first-text"><?php echo ($firstText); ?></span><br/>
        <span class="first-text"><?php echo ($secondText); ?></span>
      </div>
    </div>
    
<?php endwhile; ?>
</div>	<!-- End of Slides -->
<?php endif; ?>

JS

})(jQuery); // Fully reference jQuery after this point.
jQuery(document).ready(function ($) {
 console.log('test2');
 $(".carousel").carousel();
});

FYI : Grunt show no errors, concole shows no errors, ‘test2’ is being displayed in console.

  1. Even though I defined ‘WP_ENV’ to 'development in the wp-config file, Grunt was adding the hash to script.js, I hard-coded script.js to the conditional statement in lib/scripts.php while I figure out why is this happening.
  2. Because of #1 the JS added to _main.js was begin ignored. Solved temporarily.
  3. I don’t’ see how the BS JS is being added to the project, The only scripts calls in the html are to JQuery, modernizer and script.js. Is there any configuration I’m missing?

This doesn’t seem to be Roots related. However, consider that Grunt adds a hash to JS and CSS assets to circumvent browser caching so hard coding script.js is probably not a great idea.

But from taking a quick look it seems you might be missing a </div> tag before your final endif.

Also, it looks like you’re adding your jQuery at the end of _main.js which may be causing some trouble. The correct place to add it is here: https://github.com/roots/roots/blob/master/assets/js/_main.js#L25

Hi cfx,

Thank you for your reply, hardcoding script.js is to temporally solve the issue with the hash being added when it shouldn’t, because I’ve set WP_ ENV in wp-config.php

   if (WP_ENV === 'development') {
$assets = array(
  'css'       => '/assets/css/main.css',
  'js'        => '/assets/js/scripts.js',
  'modernizr' => '/assets/vendor/modernizr/modernizr.js',
  'jquery'    => '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js'
);

I addressed both the missing and moved the carousel call to the common JS. Still no luck :frowning:

I feel like there is something I’m missing either in the grunt config or the files path, but I can’t find what.

Did you add a </div> to the carousel markup?

What happens if you change your jQuery line to $(".carousel").remove();?

It sounds like you may have run into some setup issues or an issue caused you to try multiple fixes and it’s difficult to figure out which direction you’ve gone in. If you defined WP_ENV correctly then there is no reason you should be seeing JS or CSS assets with hashes, that is a big indicator of a problem.

Can you set up your site on a staging server and paste a link?

If you put data-ride=“carousel”, that will start the carousel without you needing to use any Javascript/jQuery to call the carousel.

1 Like

Hi guys,

I did add the to the carousel markup, sorry for the typo.
I’m still working on getting the staging server setup.
I I use $(".carousel").remove(); it does disappear from the page, so I guess the issue is that bootstrap is not begin added, yet I don’y see any JS errors in run-time.

Also, I don’t see any css call to Boostrap’s css or js in the source code… I’m really confused ha!

data-ride=“carousel” is already in place.

Thank you for the replies.

-----Update

I re-did grunt and bower install globally and in the theme root folder.
ran nmp install in the theme root. Still no luck

I undid the changes to scripts.php
Tried to run bower install by itself in the theme root, it doesn’t return any confirmation… nada.

I’m really lost, haha. Now I’m sure bower is not fetching the boostrap part, but vendor/modernizer is there, assets/css/main.css is there, jquery is there too.

I’m not sure how can BS be mising

Just take a deep breath, relax, and start back at the instructions. If you experience errors during the setup process then search. If you can’t find anything on your specific errors then post them here.

Thank you cfx!

I did, in a fresh copy on roots:

updated npm install grunt-cli globally
npm install usign – cmd, got errors switched to git bash and it worked
grunt build

still no bootstrap in the source code.

npm install usign – cmd

Please elaborate on what you mean by that and the errors you see. Also consider updating npm itself and its packages.

Are there any files inside your assets/vendor/ dir? Make sure you have permissions setup properly.

I’m in Windows 7

  1. I re-installed git bash according to instructions found here: https://www.npmjs.org/package/bower

  2. deleted node_modules folder, deleted assets/vendor folder

  3. Went back to cmd / c: re-install bower globally

  4. went to git bash to run npm install got the following
    0 info it worked if it ends with ok
    1 verbose cli [ ‘c:\Program Files\nodejs\node.exe’,
    1 verbose cli ‘c:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js’,
    1 verbose cli ‘install’ ]
    2 info using npm@1.4.9
    3 info using node@v0.10.28
    4 error install Couldn’t read dependencies
    5 error Failed to parse json
    5 error Unexpected token /
    6 error File: c:\Users\davila1\Documents\diana\web\provacareR\wp-content\themes\roots- master\package.json
    7 error Failed to parse package.json data.
    7 error package.json must be actual JSON, not just JavaScript.
    7 error
    7 error This is not a bug in npm.
    7 error Tell the package author to fix their package.json file. JSON.parse
    8 error System Windows_NT 6.1.7601
    9 error command “c:\Program Files\nodejs\node.exe” “c:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” "install"
    10 error cwd c:\Users\davila1\Documents\diana\web\provacareR\wp-content\themes\roots-master
    11 error node -v v0.10.28
    12 error npm -v 1.4.9
    13 error file c:\Users\davila1\Documents\diana\web\provacareR\wp-content\themes\roots-master\package.json
    14 error code EJSONPARSE
    15 verbose exit [ 1, true ]

  5. Changed “postinstall”: “bower install” --same error log

Sorry, this last one was my bad, I had a typo in thepackage.json file.
So, npm ran, but still no bootstrap in the source code

You will not see Bootstrap filenames anywhere because Bootstrap LESS will be compiled into main.css and JS into scripts.js.

Does your site appear styled?

You could manually search through main.css or main.min.css for evidence of Bootstrap, something like col-xs- should find results if Bootstrap is present.

Hi,

The site is styled, bootstrap styling is there, but bootstrap JS is not in source code and carousel is still not initiating.

Thank you so much for all the replies.

So you searched through scripts.min.js and scripts.js and could not find any mention of “carousel”?

I did, I can see the reference to my own carousel(using id) along with the carousel definition in scripts.js but no in script.min,js nor in the hash version in the brower.

Did you run grunt build?

Also, why have you now switched to using #carousel when you initially used .carousel?

sorry cfx, I did grunt watch, I forgot grunt build.

anyway I did it and now I’m seeing my call to carousel in both the .min version and the hash version.

I switch to used id to make it easier to identify my code from the definition

I did:

$('#home-slider').carousel({
    interval: 3000
  });

The carousel is still not working.
Console.log inside the common J, right before and after the carousel call, is working fine

I’m testing in Chrome and FF

thanks

Did you see @kalenjohnson’s post up above?

yeah. It was already in place

<?php if(have_rows('slides')): ?>
<div id="home-slider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
  	
	<ol class="carousel-indicators">
	<?php while(have_rows('slides')): the_row();
	  	$i =0;
  	?>	
	    <li data-target="#home-slider-indicator" data-slide-to="<?php echo $i;?>" class="<?php if ($i ==0): echo('active'); endif; ?>"></li>
	 
	<?php endwhile; ?>
	</ol><!--end indicators-->
<!-- Slides -->
	<div class="carousel-inner">
	<?php while(have_rows('slides')): the_row();
  		//vars
  		$image = get_sub_field('image');
  		$firstText =  get_sub_field('first_text');
  		$secondText =  get_sub_field('second_text');
  		$i =0;
  	?>	
	  
	    <div class="item <?php if ($i ==0): echo('active'); endif; ?>">
	      <img src="<?php echo ($image); ?>" alt="<?php echo($firstText);?>">
	      <div class="carousel-caption">
	        <span class="first-text"><?php echo ($firstText); ?></span><br/>
	        <span class="second-text"><?php echo ($secondText); ?></span>
	      </div>
	    </div>
         <?php endwhile; ?>
	</div>	<!-- End of Slides -->
        	</div>
<?php endif; ?>
<!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

I didn’t have any controls in the markup, because I don’t need them. I put them in just in case. but still no luck