0

I'm trying to use backstretch (single or slideshow) for a rails 4 app. I have installed the latest version of backstretch-rails 2.0.4. After some initial difficulty I was able to get the images to display on my localhost.

I have now been trying to deploy to heroku and the images were not displaying. The images were in public/assets/images but I have also included them and pointed to them in app/assets... (with no change). I have precompiled the assets, trying both RAILS_ENV=production bundle exec rake assets:precompile and heroku run rake assets:precompile. The assets seem to be writing to heroku. Still no images.

I also saw that it could be an issue with js not working (JavaScript not loading on Heroku but works locally) so I've installed jquery-migrate. I also changed config.serve_static_assets to true in config/environments/production.rb. Since changed back as did not seem to resolve.

I probably tried a few more things too which others on SOF suggested as fixed to similar questions I've read.

Images still not appearing on heroku. Any ideas? Thanks in advance for any advice!

This is my Gemfile:

source 'https://rubygems.org'
ruby '2.0.0'

gem 'sass-rails', '4.0.0'
gem 'rails', '4.0.0'
gem 'bcrypt-ruby', '3.0.1'
gem 'will_paginate', '3.0.4'
gem 'bootstrap-will_paginate', '0.0.9'
gem 'rmagick', '2.13.2', :require => 'RMagick'
gem 'carrierwave', '0.9'
gem 'backstretch-rails', '~>2.0.4'
gem 'jquery-migrate-rails','1.2.1'
gem 'railties','~>4.0.0'

group :development, :test do
  gem 'sqlite3', '1.3.8'
  gem 'rspec-rails', '2.13.1'
  gem 'guard-rspec', '2.5.0'
  gem 'spork-rails', '4.0.0'
  gem 'guard-spork', '1.5.0'
  gem 'childprocess', '0.3.6'
end

group :test do
  gem 'selenium-webdriver', '2.35.1'
  gem 'capybara', '2.1.0'
  gem 'factory_girl_rails', '4.2.1'
end


gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.0'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'

group :doc do
  gem 'sdoc', '0.3.20', require: false
end

group :production do
  gem 'pg', '0.15.1'
  gem 'rails_12factor', '0.0.2'
end

gem "better_errors", "0.3.2"
gem "binding_of_caller"

This is in my application.js:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap/bootstrap
//= require jquery.backstretch
//= require_tree .

This is in my view:

$.backstretch([
      "/assets/images/1.png"
      ,  "/assets/images/2.png"
      ,  "/assets/images/3.png"
    ], {duration: 3000, fade: 750});
</script>
Community
  • 1
  • 1
user2985200
  • 82
  • 8
  • Also, I have a default avatar image that is also in my asset pipeline. That IS showing up in the heroku version. – user2985200 Nov 30 '13 at 01:12

1 Answers1

1

I'm guessing that you might be having issues with the asset-pipeline adding a hash to your images in production, you might want to use asset_path, check out the Rails Guide for Asset Pipeline - Section 2.3 for more details but an example would be

Try in your view

$.backstretch([
      "<%= asset_path '1.png' %>"
      ,  "<%= asset_path '2.png' %>"
      ,  "<%= asset_path '3.png' %>"
    ], {duration: 3000, fade: 750});
</script>

Update (for the issue in the comments): Try wrapping it in a $(document).ready(); so it runs after the entire DOM is ready and the jquery.backstretch library loads.

$(document).ready(function() {
    $.backstretch([
          "<%= asset_path '1.png' %>"
          ,  "<%= asset_path '2.png' %>"
          ,  "<%= asset_path '3.png' %>"
        ], {duration: 3000, fade: 750});
});
</script>

Hope this helps

strivedi183
  • 4,749
  • 2
  • 31
  • 38
  • Thanks very much for the suggestion. Unfortunately this doesn't seem to have done the trick. This code still works on my local host, but not on heroku. In my logs there is no error and it does look like the pages is trying to get the images (or thinks it is) but none are visible. In the logs heroku[router]: at=info method=GET path=/assets/application-b4c04a448754j5cd93de587ee137ab01.css and .js files shows up several times.. – user2985200 Nov 30 '13 at 00:07
  • Are you getting any errors when you load the page in Heroku on your [Chrome Developer Tool's console](https://developers.google.com/chrome-developer-tools/docs/console)? – strivedi183 Dec 01 '13 at 01:29
  • Yes actually thanks. I'm getting Uncaught Error: Popover requires tooltip.js. Just did a quick google search and don't see an immediate fix. Any suggestions? I'm using Bootstrap 3. – user2985200 Dec 01 '13 at 01:55
  • And I'm getting this error which is probably it: Uncaught Uncaught TypeError: Object function (t,e){return new ce.fn.init(t,e,Q)} has no method 'backstretch' – user2985200 Dec 01 '13 at 02:01
  • I'm not sure but it looks like your code is running before the `jquery.backstretch` library is loading, I've made an updating to my answer, hopefully it helps! – strivedi183 Dec 01 '13 at 04:27
  • Excellent! Good luck with your application! – strivedi183 Dec 05 '13 at 06:41