RefineryCMS trying to tweak layout per page - ruby-on-rails

I'm new to RefineryCMS and still pretty new to rails as well. What i'm trying to do, is use the same header and footer in my layout file and then in the dynamic section that gets pulled from the CMS database, use different markup per page.
Example template:
<header>
...
</header>
# want to insert "home" page or "about" page here depending on url.
<footer>
...
</footer>
Example of what i want home page to have inserted into template:
<div>
<%= raw #page.content_for(:body) %>
</div>
Example of what i want about page to have inserted into template:
<div>
<div>
<div>
<%= raw #page.content_for(:body) %>
</div>
</div>
</div>
How can i change the markup per page without having to add the markup in the wysiwyg editor in the CMS?

Which version are you using?
If you're using 2.0.x, then there are two options inside config/initializers/refinery/pages.rb — the first one should be config.view_template_whitelist, and the second one should be config.use_view_templates.
For config.view_template_whitelist, you can specify an array of symbols that match to views inside your app/views/refinery/pages/ folder (i.e. if you have about_us.html.erb, you would whitelist [:about_us], just as you might if you were going to say render :about_us inside your controller.
config.use_view_templates simply needs to be set to true to enable the dropdown in the backend that will let you choose a template from your whitelist.
If you're curious, there also exists config.layout_template_whitelist and config.use_layout_template options too that do the same, but with layouts.

If you wish to change the header rather than the whole layout then you can override the _header partial:
cp /var/lib/gems/1.8/gems/refinerycms-core-2.0.6/app/views/refinery/_header.html.erb app/views/refinery/_header.html.erb
..and then edit app/views/refinery/_header.html.erb and restart the application ( if required).
This allowed me to place a header image above the nav menu without creating a custom layout.

Related

Orchard CMS: How to display a content-item field inside a separate widget?

I'm new to Orchard CMS, and have mostly been dealing with creating a custom theme so far. I've run across an issue and I'm not sure I even know the right concepts yet for what I want to do... but here goes:
I would like to do the following:
Add a custom field to the "Page" content type, called "Parent Title."
On all pages, display the content of the Parent Title field inside the "Before Main" widget zone.
So an author who creates a new page in the CMS will fill out the fields, for example:
Page Title: "Company ABC is Hiring"
Parent Title: "Careers at Company ABC"
etc.
And the rendered markup from Orchard will look something like this (slightly simplified for brevity):
<div id="layout-before-main">
<div class="zone zone-before-main">
Careers at Company ABC
</div>
</div>
...
<div id="content">
<div class="zone zone-content">
<article class="page content-item">
<header><h1>Company ABC is Hiring</h1></header>
<p>Some page content.</p>
</article>
</div>
</div>
I know how to create the custom field; what I don't know is how (or whether) it's possible to put a reference to that field's value inside another zone.
Any advice is appreciated - I am eager to learn!
Is there any reason why you would want to place it in a separate widget? You can just use placement.info for this functionality.
Say you have a TextField attached to the Page content type that is named "ParentTitle". Your placement.info would then look like the following:
<Placement>
<Match ContentType="Page">
<Place Fields_Common_Text-ParentTitle="/BeforeMain:5" />
</Match>
</Placement>
Notice the preceding slash at the BeforeMain. The preceding slash means that it targets a global zone (a layout zone).
If you want to get a grasp on placement.info and which fields/names you should target, enable the module "Shape Tracing". This enables you to look at the fields on the frontend and see which id's to target.
You can read the following articles to understand what is going on:
http://docs.orchardproject.net/Documentation/Customizing-Orchard-using-Designer-Helper-Tools
http://docs.orchardproject.net/Documentation/Understanding-placement-info

Use template to create multi-page ruby on rails web application

Is there any way to create a webpage template that I will be applying to all my webpages?
I am new to ruby on rails, I have gained enough knowledge to understand how flow works in it but can't find out the way to use the same page-template for all pages on the site.
I am using RubyMine but can work on command prompt if required.
Any help would be greatly appreciated.
app/views/layout/application.html.erb this is a common layout in which you will found <%= yield %> which render all the pages in <body> tag. Now as per your requirement you want some common template to show on all pages.
So better to make one partial file..For example, Header and Footer remains same in whole site. For doing this, make one partial file called _header.html.erb for header part and _footer.html.erb for footer part. Put these files under app/views/layout/_your_partialfile.html.erb
Then render them like:
<%= render partial: "/layouts/header" %>
<%= yield %>
<%= render partial: "/layouts/footer" %>
For more info refer : http://guides.rubyonrails.org/layouts_and_rendering.html
I hope this makes you clear to understand now. :)
In general, rails projects have a file in app/layouts/application.html.haml that's applied to every single page you load. You can put navbars there, login links, etc.

How can I change the .erb rendered in a <div> with a button click in RoR?

I am a newbie to RoR, and I was using Chartkick with HighCharts to display some graphs from my sqlite database. The graphs are daily and weekly, so I have two .erb-s with the query for each of them, and I want the index.html.erb dynamically change between them in my with a click of a button.
This is the code from the daily_graph.erb:
<div><%= line_graph Product.where(date_time: "2014-03-03 00:00:00".."2014-03-03 23:45:00").group(:date_time).sum(:value) %></div>
This is the code from the weekly_graph.erb:
<div><%= line_graph Product.where(date_time: "2014-03-03 00:00:00".."2014-03-09 23:45:00").group(:date_time).sum(:value) %></div>
How can I manipulate with these views in my index.erb, so when I click the WEEK button, daily_graph will disappear, showing weekly_graph, and the contrary.
Two things:
1) Keep the views dumb. Do the SQL query inside the controller, and set it as a variable that the view accesses. So, it would be:
# Inside your controller
def index
#daily_products = Product.where(date_time: "2014-03-03 00:00:00".."2014-03-03 23:45:00").group(:date_time).sum(:value)
#weekly_products = Product.where(date_time: "2014-03-03 00:00:00".."2014-03-09 23:45:00").group(:date_time).sum(:value)
end
Then your view would just be:
<div class="graph"><%= line_graph #weekly_products %></div>
<div class="graph hidden"><%= line_graph #daily_products %></div>
2) the .erb file is used for server-side templating, so switching back and forth would need to happen on the client side. You can have both graphs on the page and use an event handler to disable / show the respective graphs when the button is pushed.
On the index page, lets say you have <button id="flipGraphs">Change</button>
Using jQuery, you can do:
$(function(){ // If you are not familiar with jQuery, this will run when the page is loaded and ready
$('#flipGraphs').click(function(){
$('.graph').toggle(); // toggles all of the divs as hidden / shown
});
});
Also, add this to your application.css file:
.hidden{
display: none;
}
You want to turn those ERB views into partials... then you can make a new controller action that renders the particular partial your interested in, and you can fetch that controller action with jQuery ajax calls... see: Rails: Rendering Partials through Ajax for more examples
Also conventionally you would not execute model finder methods in the view ... set controller instance variables and reference them instead... this will lead directly to an overall more DRY result.

Use Bootstrap Navbar choice in controller?

All, I'm trying to use the Bootstrap Navbar user choice to control the filtering of posts shown to the user.
The model includes an 'expired' field which is a date-time type.
Three choices are: All (no filtering), Open (show only open issues) and Closed (show closed).
Is there a way to do this without defining three different index.html.erb variants (DRY problem). The filter should show only closed issues if #post.expired < Time.now .. etc.
Stated alternately - can controller 'know' what the user chose, although Navbar, as i am using it, is simply a fancy navigation toolbar?
Thanks for any advice.
Typically this is done by including a parameter in the request, and looking for that parameter in the controller. The bootstrap navbar uses regular anchor links so you should be able to add parameters easily to them (modified example from the doc):
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="/some_url">List</a>
<ul class="nav">
<li>All</li>
<li>Open</li>
<li>Closed</li>
</ul>
</div>
</div>
You can read the filter parameter in the controller by accessing the value of params[:filter].

How can I load a div in rails in response to clicks on another div?

I'm very new to Rails (and web) programming, so I'm not even sure what technology I should be looking for for this.
I've downloaded and run through the first five chapters of the Rails tutorial, but now have a very simple request.
On the left hand side of a web page, I will have a table. If the user clicks on an element in that table, I want to have the right hand side of the page show something new.
I already have a page to display the table, viz:
<div class="center hero-unit">
<div class="container">
<h2>2012 Yearly Report</h2>
<div class="row-fluid">
<div class="span12">
<div class="span4">
<table border="1">
</table>
</div>
<div class="span6">
<!-- load stuff here based on what someone clicks on in the table -->
</div>
</div>
</div>
</div>
</div>
And I'm using bootstrap layouts to display everything. I just don't understand how to change the contents of the 'span6' div based on user behavior in 'span4'.
This is a difficult question to answer. It really depends on what kind of data you're trying to display and what sort of interactivity you're looking for.
You don't really provide much information about what you're trying to accomplish, but if I had to guess, you're trying to load data from your database and insert it into an element without leaving the current page. This is what AJAX is for (your tutorial goes into it a bit in chapter 11) and involves a good deal of javascript, which is generally beyond the scope of a server side language like Ruby. Luckily, rails includes helpers for making it easy to include AJAX features into your web application without having to write a lot of javascript (although you'll have to write some).
As an example, suppose your table has a list of articles, and you want to display the contents of an article in a div when its link is clicked on.
First the link:
<%= link_to article.name, article_url(article), :remote => true %>
The remote option tells Rails that it's an AJAX link.
Next, you need to render a javascript template for your article's show action. You'll name it show.js.erb.
Supposing the div you want the data to be loaded into looks like this,
<div id='article-content'></div>
you'll want your show.js.erb to contain the following:
$('#article-content').html("<%=javascript_escape #article.content %>");
This javascript (with embedded ruby) code will be evaluated when one of your remote links is clicked and will replace the content of your div with the article's content.
There is plenty of resources online to give you more information. It looks like railscasts just released an episode on this topic just a week ago. It requires a subscription to view, but is well worth it (especially if you're just starting out).

Resources