search

rails / rails

Ruby on Rails
https://rubyonrails.org
MIT License
55.85k stars 21.62k forks source link

Active storage not show in css inline for background-image #33351

Closed wicky-andrian closed 6 years ago

wicky-andrian commented 6 years ago

Steps to reproduce

I have model 'Setting' with active storage :background_website, and string :title_website. its works when I used in settings/edit.html.erb 

                    <div class="card" style="width: 18rem;">
                        <%= image_tag s.background_website, class: "card-img-top" %>
                    </div>
                 <% end %>

Expected behavior

I need to show background_image in layouts/application.html.erb with css inline like this

<style media="screen">
  body { background-image: url(<%= image_path @settings.map(&:background_website).join %>) !important;
         font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         background-size: cover;
         -o-background-size: cover;
          }
</style>
<div class="body"></div>

Actual behavior

in layouts/application.html.erb only show <title><%= @settings.map(&:title_website).join %></title> but for active storage :background_website not show

<style media="screen">
  body { background-image: url(<%= image_path @settings.map(&:background_website).join %>) !important;
         font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         background-size: cover;
         -o-background-size: cover;
          }
</style>
<div class="body"></div>

System configuration

Rails version: Rails 5.2.0 Ruby version: ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-linux]

rafaelfranca commented 6 years ago

Can you please provide a sample application that reproduces the error?

wicky-andrian commented 6 years ago

@rafaelfranca, I have sample application here

rafaelfranca commented 6 years ago

What is the HTML that is being generated? I don't see why that is not working.

wicky-andrian commented 6 years ago

in sample/app/views/layouts/application.html.erb if I change <%= image_path @settings.map(&:background_website).join %> with sample/app/assets/images/bg.jpeg <%= image_path 'bg.jpeg' %> its works like this screenshot from 2018-07-13 05 21 10 but if I use <%= image_path @settings.map(&:background_website).join %> did'nt show my image from active storage setting/ :background_website, my layouts/aplication stil like this

screenshot from 2018-07-13 05 20 34

, I also try with gem paperclip with same sample app and works to.

rafaelfranca commented 6 years ago

Can you also paste the generated HTML of that page?

wicky-andrian commented 6 years ago

@rafaelfranca I have been paste in sample app right ? I mean this sample sample layouts/application.erb not show image from active storage I have generated in model setting in form :background_website , its from app/views/admin/settings/edit.html.erb , in app/views/admin/settings/edit.html.erb its works but for showing in app/views/layouts/application.html.erb did'nt showing, sorry for my bad english, what do you mean generated HTML of that page ? I made some demo video sample video

rafaelfranca commented 6 years ago

The HTML that the browser receives and generated by the application, not the ERB source file. You can open the page in the browser, click with the right button on the screen and click on View Page Source. There you will see the HTML generated by the application and that was sent to the browser. That is what I want to see.

wicky-andrian commented 6 years ago

oh ok this HTML generated

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="hdb7ZUbFIXOpbvGf2kp3k7Yd8p92Kg4RKClBuMYsee6aaCdjvCd7FzaefrhhSFO0ZNW8OdWVVu9zJUttiLV5Ag==" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" media="all" href="/assets/datatables.min.self-247ebbeee8b53c76770bf2e20c2918e0c6b830f7bf46193325a7507b26ab502a.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/custom.self-a384e6d2dcba06454253680503c379dc59b658390dfb5e02650c6e5ef383cb32.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/dataTables.bootstrap4.min.self-17e0da2800a542eb7cee178c202ea84e101132e5a77bcf96cf12034fb8d7b8f0.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/backend/bootstrap.min.self-a25e528dfbb86d0b84cebc5e9b0944c5be542d72fadbc3fde89316966cd8b2d1.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/font-awesome/css/font-awesome.min.self-306130e6ba08a261d693df60443a670ca53a7a541654c4138090053ccf0a94a2.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/sb-admin.self-52f6706eefd818340085babc5e7651fca82f35138eb74892b39be993d71cbdad.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-9b5c1c413e1c5621f1018a051d40504e79496a2cb27a26356d62eb5b76e63f57.css?body=1" data-turbolinks-track="reload" />
    <script src="/assets/rails-ujs.self-551fbd47b981dacbb84a270f9123074caf39eb72aaf6f478ab597c6f81435e4b.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/activestorage.self-6e8d967adecc8b2a7259df0f51ef5b6f171c33267c7d149a474beccd90c68697.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/datatables.min.self-b891e891829f058be3822af07970fd7b10348c00591a0e479a52714f1133206b.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/dataTables.bootstrap4.min.self-81a49c816b4aac8360d6422ba3d3ca96fc259f5407ac8536167ed9bb7018c87a.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/front/bootstrap.min.self-3f55ae7cb1e0ade8ec6caee602a1f92c77404301eca33b891f02f5418470abd1.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/sb-admin.min.self-2c2a986e56747ea062c4096c3898f1e9edb9a69ae5cd3cff9468f2352bdb66fc.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap.bundle.min.self-1ee97f31e4f97c8a61a125110093a07954a88ae7b69074636707b5c961dcd0db.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/sb-admin-datatables.min.self-c1f00e5b8080f45299fbd8781c7025b295148fa4cf029a0be6f90fac9128de41.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/sb-admin-charts.min.self-f51f5dfadc33cb6516e494368461147c05b3632df8cc928875bfa0bf4845962f.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/application.self-4bbbad0e4c479f25137b7b5f70d6e8348d3c52d254a89fafebc1539eca58f68b.js?body=1" data-turbolinks-track="reload"></script>

  </head>

<body class="text-center">
  <style media="screen">
    body { background-image: url(/images/#&lt;ActiveStorage::Attached::One:0x0055a709ba0dc8&gt;) !important;
           font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
           -webkit-background-size: cover;
           -moz-background-size: cover;
           background-size: cover;
           -o-background-size: cover;
            }
  </style>
  <div class="body"></div>
  <div class="judul_website">test</div>

  <form class="form-signin" action="/session" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="l51zzQKL26Z3pGXM/B3ZpI54x8cXvkaNDBTiNIjT973pvhUeD4K3OUVDhhL88vh205rxeXpMpQuY2lE20Sn8Lg==" />
      <form class="form-signin">
        <h1 class="h3 mb-3 font-weight-normal">Login</h1>
        <input type="text" name="email" id="email" placeholder="Email" class="form-control" /><br>
        <input type="password" name="password" id="password" placeholder="Password" class="form-control" />
        <input type="submit" name="commit" value="login" class="btn btn-primary btn-lg btn-block" data-disable-with="login" />
        <p class="mt-5 mb-3 text-muted">test footer</p>
      </form>
</form>  </body>
</html>
georgeclaghorn commented 6 years ago

The following builds an array of ActiveStorage::Attached::One objects, calls to_s on each one, and joins the resulting strings together:

@settings.map(&:background_website).join

ActiveStorage::Attached::One#to_s doesn’t return anything useful:

> setting = Setting.last
> setting.background_website.to_s
# => "#<ActiveStorage::Attached::One:0x00...>"

You probably want to pick a single attachment and call image_path on it:

background-image: url(<%= image_path @settings.collect(&:background_website).detect(&:attached?) %>) !important;
wicky-andrian commented 6 years ago

thank you @rafaelfranca & @georgeclaghorn, it works.