I am trying to implement bootstrap to my ruby application but failing to understand why the image is not displaying.
I am trying to implement this bootstrap. https://blackrockdigital.github.io/startbootstrap-clean-blog/.
The image is stored in Assets/Images
index.html.erb:
<!-- Page Header -->
<header class="masthead" <img class="img-responsive img-full" src="../assets/home-bg.jpg" alt="">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>Start Bootstrap</h1>
<span class="subheading">Technology made simple in a blink of an eye!</span>
</div>
</div>
</div>
</div>
Current layout of page
If it is in the app/assets/images/ folder then just use the image tag.
<%= image_tag 'home-bg.jpg' %>
If you do not want to do that for some reason, then just inspect that page to see where it is looking for the image and adjust the path accordingly.
Related
My images wont stay on the same row once i put the <p> in, they both sit in there own row, not sure what im doing wrong here
<div class="container">
<div class="row">
<div class="image-fluid text-center">
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
I think whatever CSS you used in class="row" is not acting the way you expect, because that div has a single child.
I don't know what's in your css file, but the following HTML works as I expect you want:
<div class="container">
<div class="image-fluid text-center" style="display:flex">
<div>
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
</div>
<div>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
Each image/text pair gets its own div, and what used to be your row div now has multiple children.
I am a newbie and I am trying to make a very simple website by Rails and I am trying to upload video by making a submit button. At first, I am trying to copy Wistia embed link and paste it into file show.html.erb, and I can show that video. But my problem is, I want to make a submit button and I can submit a new video, no need to copy paste any link from Wistia into file show.html.erb.
Here is my code at show.html.erb if you need
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-image">
<script src="//fast.wistia.com/embed/medias/j38ihh83m5.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_j38ihh83m5" style="height:349px;width:"100%"> </div>
</div>
<div class="card-content white-text">
<div class="row">
<div class="col m4 center">
<%= image_tag ("courses/1.png"), class: "img-responsive"%>
</div>
<div class="col m8">
<span class="card-title"><%= #course.title %></span>
<p><%= #course.description %></p>
</div>
</div>
</div>
</div>
</div>
Thank you very much.
you should create a form (the submit button is included) and learn about Active Storage
I've been looking through some posts on the internet about Materialize in Rails, however this area seems to be very fuzzy. I am currently using the materialize-sass gem.
I didn't find very many helpful posts, I decided to resort here.
Here's my code for a page I have pages/discover.html.erb
<%= stylesheet_link_tag "https://fonts.googleapis.com/icon?family=Material+Icons" %>
<div class="row">
<div class="col s12 m5">
<div class="card">
<div class="card-image b">
<img src="http://i.huffpost.com/gen/1456585/images/o-CRAIG-COBB-facebook.jpg">
<span class="card-title">Cregg Cobb Is Back At It Again, But Only This Time He Has Guns</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<div class="chip">
<img src="http://i.huffpost.com/gen/1456585/images/o-CRAIG-COBB-facebook.jpg" id="cobb">
Like
</div>
</div>
</div>
</div>
</div>
I want to make the <img> darker by using filter: brightness(50%);
How do I go about doing this? Where do I begin?
Bonus: If you know where I can add the jQuery stuff that Materializecss.com mentions when discussing components and transitions, it would be greatly appreciated!
Since it's just a single override, you could add a new .css file to assets (or wherever you're storing static stuff), with a !important class:
img.darker {
filter: brightness(50%) !important;
}
Then import it at the top of your template:
<%= stylesheet_link_tag "/path/to/css.file" %>
And add the class to your image tag:
<img src="/my/img.png" class="darker">
Alternatively you could just style the image tags individually:
<img src="/my/img.png" style="filter:brightness(50%)">
I am using bootstrap modal on my rails project. On this page I have to iterate through my slides and for each slide I want to create a modal. I came up with this solution:
<% #slides.each do |slide| %>
<div class="row slidecard text-center">
<div class="col-xs-12 ">
<h2><%= slide.name.upcase %></h2>
<p><em><%= slide.description %></em></p>
<a href="#" data-target=<%=slide.id%> data-toggle="modal">
<%= image_tag slide.picture.url(:medium) %>
</a>
<div class="modal fade" id= <%=slide.id%>>
<div class="modal-dialog mymodal">
<div class="modal-content text-center">
<div class="modal-body">
<%= image_tag slide.picture.url(:original) %>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div
</div>
I give to the link containing the image the data-target attr and gives it the value that has the slide.id so I can give a specific id and data target that links image and modal. But the problem is that for the modal to work I need to add "#"in front of slide.id to have something that looks like data-target="#39"
I tried a couple of things such has :
data-target= "#"<%=slide.id%>
and other stuff but nothing gives me the result I want and make the modal work !
licence
try to this
I would like to know if it's a bug or some mistake of mine.
In my Rails project, twitter's bootstrap isn't aligning the container at the center.
My code:
<div class="container">
<div class="span12" style="background-color:blue; color:white;">
<%= yield %> <!-- This get the sample text "Some test." -->
</div>
</div>
Here's an image of the bug.
http://img543.imageshack.us/img543/3405/screenshot20120702at035.png
Thanks a lot everybody! :-)
<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
</div>
DEMO