Okay so I am working on making a site for my previous boss who runs an animal control business. My index.html.erb consists of code like this:
<div id="bats"><img alt="Big brown bat" src="/images/bigbrown.png" style="position: relative; border: 0.25em outset;" />
<p class="text_center"><%= link_to #animals[0].name, animal_path(#animals[0]) %></p></div>
<div id="squirrel"><img alt="Grey Squirrel" src="/images/grey_squirrel.png" style="position: relative; border: 0.25em outset;" />
<p class="text_center"><%= link_to #animals[1].name, animal_path(#animals[1]) %></p></div>
<div id="flying"><img alt="Flying Squirrel" src="/images/flying-squirrel.png" style="position: relative; border: 0.25em outset;"/>
<p class="text_center"><%= link_to #animals[2].name, animal_path(#animals[2]) %></p></div>
<div id ="groundhog"><img alt="Groundhog" src="/images/groundhog.png" style="position: relative; border: 0.25em outset;" />
<p class="text_center"><%= link_to #animals[3].name, animal_path(#animals[3]) %></p></div>
The pages are mostly static with a lot of text, so I guess my two questions are, should I even have the animals in a database (which just consists of their name)?
And if I do keep them in a database, how should I format my show.html.erb which is going to go into greater detail about the animal selected from my index.html.erb page? Use if, else if, etc... or make a page specific to each animal and just redirect there when the animal is selected?
Thanks in advance!
If I were to redo your example page, I'd add a short_description, long_description, and image_url for each animal in the database and do something like this:
<% #animals.each do |animal| %>
<div id="animal_<%= animal.id %>"><img alt="<%= animal.short_description %>" src="<%= animal.image_url %>" style="position: relative; border: 0.25em outset;" />
<p class="text_center"><%= link_to animal.name, animal_path(animal) %></p></div>
<% end %>
to generate it.
The long_description would be to give more detail. If there is enough information to fill a page about each animal, I would use a separate show page.
Related
I am working on an app where I display current trending videos on YouTube (thumbnail, video title and channel title) via YoutubeDataApi. I would like to access to the correct URL whenever I click on the thumbnail or the title of a trending video.
This is the code I'm using in my controller:
# frozen_string_literal: true
class WelcomeController < ApplicationController
def index
youtube_data_api = YoutubeDataApi.new.client
#result, #errors = youtube_data_api.list_videos 'snippet, id', chart: 'mostPopular', region_code: 'FR', max_results: '50'
end
end
And this is the code I use in my view:
<div style="margin:0 auto; padding:20px 0;">
<% #result.items.each do |video| %>
<a href="https://www.youtube.com/watch?v=#{video_id}" target="_blank" style="color:black"><img src="<%= video.snippet.thumbnails.default.url %>" height="90" width="120">
<div id="channel_title">
<u><b><%= video.snippet.channel_title %></u></b>
</div>
<div id="video_title" style="margin-bottom: 50px;">
<i><%= video.snippet.title %></i>
</div>
</a>
<% end %>
Gem used in this app: gem 'google-api-client', '>0.7'
Could anyone please help me? Thanks in advance
Which gem are you using so we can see what you have to work with a little better.
Just take this with a grain of salt but your image has a src "<%= video.snippet.thumbnails.default.url %>"
Does that url point to the video url? If it does just change your href value to that video.snippet.thumbnails.default.url.
Currently with that href all of your videos will open a new tab to "https://www.youtube.com/feed/trending"
Is there a url on video.snippet (video.snippet.url) ?
Oh also you will need to wrap an around both the title and the thumbnail so that when you click on them it will link. With your loop you are getting the data for each individual video so if you can get the right url you just need to put links around everything and you should be good.
EDIT:
I think I have the answer for you. You are already sending off to retrieve the id's of the videos to the api so all you have to do to get them is do, `video.id
v=#{video.id} instead of video_id unless you make another variable called that and set it equal to video.id.
in your view loop:
<div style="margin:0 auto; padding:20px 0;">
<% #result.items.each do |video| %>
<a href="https://www.youtube.com/watch?v=<%= #{video.id} %>" target="_blank" style="color:black"><img src="<%= video.snippet.thumbnails.default.url %>" height="90" width="120">
<div id="channel_title">
<u><b><%= video.snippet.channel_title %></u></b>
</div>
<div id="video_title" style="margin-bottom: 50px;">
<i><%= video.snippet.title %></i>
</div>
</a>
<% end %>
So just simply the variable injected in your a href changes from video_id to video.id. However what youtube gives you is simply the video id not the full link, as you already noticed. With that slight ruby variable change you should be good to go! :)
Oh forgot to mention the ruby won't show up unless you throw in an erb like tag like shown above.
A possibly nicer way of doing the same thing would be to do:
<%= link_to "https://www.youtube.com/watch?v=#{video.id}", style="color: black;", target="_blank", style="color: black;" do %>
.... (stuff you are wrapping)
<% end %>
So altogether:
<div style="margin:0 auto; padding:20px 0;">
<% #result.items.each do |video| %>
<%= link_to "https://www.youtube.com/watch?v=#{video_id}", style="color: black;", target="_blank", style="color: black;" do %>
<img src="<%= video.snippet.thumbnails.default.url %>" height="90" width="120">
<div id="channel_title">
<u><b><%= video.snippet.channel_title %></u></b>
</div>
<div id="video_title" style="margin-bottom: 50px;">
<i><%= video.snippet.title %></i>
</div>
<% end %>
<% end %>
https://api.rubyonrails.org/v5.2.1/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to
Cheers
On Rails 4. I am building a site where you can search graphics/products according to their assigned color scheme. Relevant models:
class Product < ActiveRecord::Base
belongs_to :color_scheme
end
class ColorScheme < ActiveRecord::Base
has_many :products
end
Each color scheme has five color hexadecimal values as columns. Using Bootstrap, here's what the code looks like as a dropdown, without being a collection_select:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-expanded="true" style="width:100%; margin-bottom:20px;">
<%= t('template.scheme')%> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<% #color_schemes.where(enabled: true).each do |scheme| %>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">
<div style="width:30px; height: 20px; display: inline-block;
background-color:#<%=scheme.color1%>;"></div>
<div style="width:30px; height: 20px; display: inline-block;
background-color:#<%=scheme.color2%>;"></div>
<div style="width:30px; height: 20px; display: inline-block;
background-color:#<%=scheme.color3%>;"></div>
<div style="width:30px; height: 20px; display: inline-block;
background-color:#<%=scheme.color4%>;"></div>
<div style="width:30px; height: 20px; display: inline-block;
background-color:#<%=scheme.color5%>;"></div>
</li>
<% end %>
</ul>
</div>
And this is the visual result:
Since I'm using Ransack and this is a dropdown for search, I converted this into a collection_select but can't figure out how to get that same visual effect.
<%= f.collection_select :color_scheme_id_eq, ColorScheme.order('created_at DESC').all, :id,
:name, {include_blank: t('template.scheme')}, {class: 'form-control select-scheme',
style: 'width:100%; margin-bottom:20px;'} %>
So instead of just displaying the color scheme's text name, I'd like to show the colors like above. I understand this is probably outside the scope of what a collection select should be, but I feel the colors make more sense, visually, than the name. Is this possible, either through collection_select or some other tag that would work with Ransack? Thanks! Edit: I should also add that I'll probably still have the color scheme's name to the right of the colors, for people who are color-blind, etc.
I have another suggestion:
create a div which has color scheme above select field
then use to javascript click event on each color scheme to set value in select field
Here is my code sample to solve this issue:
.col-sm-3
#color-label-project{style: 'text-align: center;'}
- t('labels.project.label_color_hashes').map do |k, v|
%span{style: "width:30px; height: 20px; display: inline-block; background-color: #{v};", id: "#{k}", 'data-value': "#{k}"}
= f.input :label_color, collection: Project::LABEL_COLOR_NAME, prompt: true, disabled: false, label: false
:javascript
$("#color-label-project span").bind('click', function(){
$('select[name="project[label_color]"]').val($(this).data("value"));
})
here is my way:
I am trying to display my posts organized by date created. Jquery Masonry works fine for the first container, but for the second container it fails to properly load. When I view the code in a web browser it shows this for the second container:
<div id="pins" class="transitions-enabled">
<div class="box panel panel-default">
</div>
</div>
when it should show this (content display for the first container):
<div id="pins" class="transitions-enabled masonry" style="position: relative; height: 247px; width: 448px;">
<div class="box panel panel-default masonry-brick" style="position: absolute; top: 0px; left: 0px;">
</div>
</div>
app/assets/javascripts/pin.js.coffee:
$ ->
$('#pins').imagesLoaded ->
$('#pins').masonry
itemSelector: '.box'
isFitWidth: true
views/pins/index.html.erb:
<%= render 'pages/home' %>
<div id="pins-container" class="container">
<% #pins_by_day.each do |day, pins| %>
<h5 align="center"> <%= day.strftime('%B %d, %Y') %> </h5>
<div class="well well-sm">
<div id="pins" class="transitions-enabled">
<% for pin in pins %>
<div class="box panel panel-default">
<%= link_to pin %>
<div class="panel-body">
<p>
<%= pin.description %>
</p>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
I would appreciate it if someone could explain how to properly load jquery masonry for multiple containers on my page. The first section is loading properly, but the second container is just a single column.
HTML doesn't like it when you have more than one id per page. And jQuery will only find the first one. So if you're ever iterating over a partial or a template, make sure that you either don't use ids, or have the id be dynamic.
So instead of id="pins" try:
<div class="masonry-pins transitions-enabled">
And
$ ->
$('.masonry-pins').imagesLoaded ->
$('.masonry-pins').masonry
itemSelector: '.box'
isFitWidth: true
Also, I imagine inside imagesLoaded callback, you have access to the element at this? Instead of calling $('.masonry-pins').masonry you might just want to call $(this).masonry
So this seems like a dumb problem to have. I may be going about it wrong so if anyone could suggest another way of doing this i would love to try it out.
I have a FIXED Navigation bar built with Zurb Foundation 4
<div class="fixed">
<nav class= "top-bar">
<ul class="title-area">
<li>
<h2><%= link_to image_tag("officialLogo-100x197.png", :size => "100x197", :class => "logo" ) + "AppDomum", root_path, :class => "textlogo" %></h2>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
#links .....
</ul>
The image that is displayed for the title is larger than the navigation bar. I actually like it hanging down from the nav bar and i have a media query setup to remove it on smaller screens so it is not hanging over content.
Problem: The <div class= "fixed"> wraps the navigation bar and the image all the way across the page. Because the image hangs below the nav bar anything behind it is not clickable. the entire top part of the page is unclickable. For a form i am unable to select a text box to edit. Because the navbar is fixed it affects the entire page depending on how far you have scrolled. Is there a way to have them fixed but without having the fixed tag grab all the empty space? Is there another way to do this?
Try adding position: relative; to your image.
I did Solve this after much research.
here is the code to solve the issue or at least what i hacked together to get what i want.
This is the navigation bar.
<div class="fixed">
<nav class= "top-bar">
<ul class="title-area">
<li>
<h2><%= link_to "AppDomum", root_path, :class => "textlogo" %></h2>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
#links .....
</ul>
</section
</nav>
</div>
<div class= "fixed-icon">
<%=link_to image_tag("officialLogo-100x197.png", :size => "100x197", :class => "logo" ), root_path %>
</div>
I separated the icon and the Text but kept both of them as links to the home page. Giving the illusion that they are both part of the title. There is a media query that hides the image and removes the margin on the title.
And Here is the CSS. I basically searched around the html and css files of the site until i found the "fixed" class and stole the css modification and then changed the width to be small so it does not mask everything else.
#media only screen and (min-width: 768px) {
.title-area {
margin-left: 6em;
}
}
.fixed-icon {
#extend .hide-for-small;
width: 10%;
left: 0;
position: fixed;
top: 0;
z-index: 99;
}
.title-area {
padding: 5px 5px;
font-weight: bold;
letter-spacing: -1px;
}
Is there any way to give each record in a table its own css class? Im displaying records as partials but would like to be able to give each partial its own individual css attributes. Maybe a way of assigning css rules by a div's name and id of the record combined?
EDIT
Sorry for the poorly written question I'll try and explain in more detail.
I have a table of venue records being displayed on the index page in partials and want each one to have an icon placed on a map off to the left side of the screen (map_container). The map is just a hand drawn image as the background of a fixed width and height div.
Venue index.html.erb:
<div class="map_container">
</div>
<div class="filter_options_container">
<form class="filter_form", method="get">
<fieldset class="filter_form_fieldset">
<legend class="filter_form_fieldset_legend">Choose an area:</legend>
<% Area.all.each do |a| %>
<span class="filter_form_checkbox_label">
<%= check_box_tag("areas[]", a.id, false, :class => "styled")%>
<%= a.name %><br>
</span>
<% end %>
<input type="submit" value="Filter" />
</fieldset>
</form>
</div>
<div class="venue_partials_container">
<%= render :partial => 'venue', :collection => #venues %>
<div class="clearall"></div>
<%= will_paginate #venues %>
<div class="venue_partial_button">
<%= link_to 'add a new venue', new_venue_path %>
</div>
</div>
<div class="clearall"></div>
I was thinking a way of doing this could be to make another table of icon records where one venue belongs to one icon and one icon belong to one venue. Then yielding the map div area to partials of the icon records. The differant css classes could then be something like:
.icon(with_venue_id_1) {
position: absolute;
top: 10px;
left: 10px;
}
.icon(with_venue_id_2) {
position: absolute;
top: 15px;
left: 20px;
}
etc etc....
Which I know is so horrifically bad it may bring a bit of sick in your mouth but my zero experience of programming ever has led me to this. I imagine theres so many better ways of doing it but this could work as a learning aid for me at least.
I would eventually like these icons and their positioning to be added from the running app itself but for now I'm happy just to get something working.
Thanks for any help, its much appreciated.
Something like this?
<% #record.each do |r| %>
<tr class="<%= r.id %>">
<!-- Or some other value from the record? -->
...
Not sure I understood the question completley.