Add Bootstrap Image Gallery to a Rails Application - html

I found the gem bootstrap-addons-rails and wanted to use it for Image Galleries in my Rails Application.
I have built a model Gallery and connected it through a has-many-relationship to a model Image. To storage the images I used Paperclip. Now I wanted to build the view (show-action in the galleries-controller) and tried to follow the documentation for the Bootstrap Image Gallery, which says:
<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery">
Banana
Apple
Orange
</div>
I began with the following for my view:
<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery">
<% #gallery.images.each do |image| %>
<%= image_tag(image.url.url(:original)) %>
<% end %>
</div>
But I have no idea how I can transfer the HTML-Snippet to a nice working Rails-Code. Especially the href="apple.jpg" is my problem. I don`t know how I can put there something like:
image_tag(image.url.url(:original))
I would be thankful for any answer.

If you want to link to the image, use this code:
<%= link_to image.url.url(:original), "Image", :data => {:gallery => 'gallery'}, :title => "Apple" %>
If you want the actual image to have the data-type attribute, use this code:
<%= image_tag(image.url.url(:original), :data => {:gallery => "gallery"}, :title => "Apple") %>
Hope it helps!

Related

Whole page reloads when navigating using Turbo in Rails application

I recently began working on a documentation site using Ruby on Rails and Turbo (repository is here, and the website is here), and I'm having a slight issue with navigation.
When I press the links in the left sidebar, the content on the right side of the screen is correctly replaced. Here's some relevant code -
articles.html.erb
<div class='docs-split'>
<div class='sidebar'>
<div>
...
<div class='links padding-top'>
<%= link_to render(:partial => 'shared/primary_navigation_link', locals: { title: "Getting Started", path: "getting-started" }), 'getting-started' %>
<%= link_to render(:partial => 'shared/primary_navigation_link', locals: { title: "Types of Charts", path: "types-of-charts" }), 'types-of-charts' %>
</div>
</div>
</div>
<div class='content'>
<%= turbo_frame_tag "article", src: article_path(params[:title] ? params[:title] : "getting-started") do %>
<% end %>
</div>
</div>
articles_controller.rb
require 'github/markup'
class ArticlesController < ApplicationController
def index
end
def open_article
title = Rails.root.to_s + "/app/markdown/" + params[:title] + ".md"
#content = ActionController::Base.render inline: GitHub::Markup.render(title, File.read(title))
end
end
open_article.html.erb
<%= turbo_frame_tag "article" do %>
<%= #content %>
<% end %>
routes.rb
Rails.application.routes.draw do
root :to => redirect('/articles/getting-started')
get 'articles/:title', to: 'articles#index'
# Embedded article GET route
get ':title', to: 'articles#open_article', as: 'article'
end
What I expect to occur is that only the content inside the Turbo tag will change while the rest of the HTMl remains the same and the navigation link styles will transition as specified by my CSS. However, what seems to occur instead is that all of the HTML is reloaded, which means the CSS transitions that are supposed to happen when navigation links are clicked don't happen and the Turbo tag content appears to blink twice.
I'm new to Rails and Hotwire/Turbo, so any help would be appreciated. Thank you!

Unable to use css classes in Ruby on Rails project

I'm using a codepen frontend template in my Ruby on Rails project so now i'm unable to connect my css file with my login.html.erb, like in this code, for submit button i want to use the "submit" class which i have styled in my css file. Also the final rendered page i not stylised which brought me to the conclusion that css file is not getting connected. Please be precise on your answer as I'm a complete beginner as this is my first RoR project.
Codepen Template
and My Rails Project and My login.html.erb file.
<h2>Welcome back,</h2>
<%= form_tag("/create_session", method: :get) do %>
Username :<%= text_field_tag(:username) %><br>
Password :<%= password_field_tag(:password) %><br>
<%= submit_tag(:Login), class => "submit" %>
<% end %>
I'm getting the following error:-
app/views/sessions/login.html.erb:22: syntax error, unexpected ',', expecting ')'
If you want to declare a css class for the submit_tag you can do it using :class => "class_name", or better if it would be like class: "class_name".
So you could try with:
<%= submit_tag(:Login), :class => "submit" %>
<%= submit_tag 'Login', class: "submit" %> <!-- recommended way -->

Rails 4: Complicated helper tag for video

I am using a video slider in my website and the plugin requires the format to be the following:
<li class="slide" data-mightyslider="
cover:'path_to_cover',
title: 'title_name'">
</li>
I want to replace "path_to_cover" with <%= image_tag "image_name" %> but I cannot seem to get it to work with content_tag. How might I accomplish this?
The image_tag helper isn't what you want in this instance.
Try this:
<%= content_tag :li, class: "slide", data: { mightyslider: raw("cover: '#{image_path('something.jpg')}', title: 'title_name'") } do %>
list item content
<% end %>

Rails html put value from hash

Kind of easy question that for a reason i couldnt handle.
on my server side i am saving a hash:
#profile = {"goals" => goals, "won" => result["success"][0]["won"]}
if i am printing to server log console
puts #profile["goals"]
its perfectly printing it.
how can i print the value of goals on the view itself? the following didnt work for me
<%= #profile.goals %>
<%= #profile[goals] %>
<%= #profile{goals} %>
thanks
Use the below :
<%= #profile['goals'] %>
As #profile hash has a key as 'goals'.

Spree User information

I'm using Spree as an eCommerce solution for a website that I am building and need to customize the layout, the deface option is great but I already have a layout for the rest of my application that I want to use so there is no change between the main part of my site and the store.
Having looked through the spree source code I have been able to transfer most of the infrastructure over to my own new template but I have hit one stumbling block. In the default template above the search box there are login/account and logout links which based on some digging through the code is rendered in the 'header' partial which itself renders the nav bar which renders the search bar partial, and the main nav bar which shows the links to home and the shopping cart, but nowhere mentions the user in/out stuff. Commenting out the rendering of the header partial removes all of this stuff but also the user information, which as far as I can tell isn't mentioned anywhere...
Does anyone know where in the default spree layout it implements this code for showing a login/logout account link, I could do this relatively simply with basic links to it but would rather understand how Spree implements this itself and I'm trying to keep my layout compatible with any updates to the core code.
Any help would be greatly appreciated, thanks!
Edited: For clarity
On version 3.0.1 of Spree and maybe on other older versions the user functionality is not handled by the core itself. Users are handled by the Spree Auth (Devise) Spree extension. This extension is included by default on new Spree apps. The extension uses a deface override to add this functionality. Interestingly enough the partial used by this override is not on the extension itself but rather on the Spree frontend files. I assume to make this component reusable should you wish to implement your custom user module. This is the code of the partial:
<% if spree_current_user %>
<li><%= link_to Spree.t(:my_account), spree.account_path %></li>
<li><%= link_to Spree.t(:logout), spree.logout_path %></li>
<% else %>
<li id="link-to-login"><%= link_to Spree.t(:login), spree.login_path %></li>
<% end %>
Found code in the RDR theme that explains this, still not sure why it doesn't show up in the default spree code, maybe a data hook?
The way RDR does it:
<% if current_user %>
<%= link_to t('logout'), destroy_user_session_path, :class => "cart" %>
<%= link_to t('my_account'), account_path, :class => "cart" %>
<% else %>
<%= link_to t('log_in'), login_path, :class => "cart" %>
<% end %>
override menu with
<% if current_user %>
<%= link_to t(:logout), spree.destroy_user_session_path %>
<%= link_to t(:my_account), spree.account_path %>
<% else %>
<%= link_to t(:login), spree.login_path %>
<% end %>
As of Spree 2.3.2 same thing can be done with:
<h2>Your Account</h2>
<ul>
<% if spree_current_user %>
<li><%= link_to t('My Account'), account_path, :class => "cart" %></li>
<% else %>
<li><%= link_to t('Log In'), login_path, :class => "cart" %></li>
<li><%= link_to t('Sign Up'), registration_path, :class => "cart" %></li>
<% end %>
</ul>