I'm trying to use Jekyll as a very modular CMS. I've got my index.html file, in which I include 'blocks' of code, like so:
{% include blocks/info.html ref="info" %}
This block defines the HTML structure, and the ref="info" references the data file that defines the content.
This is the block HTML structure:
{% for item in data[include.ref] %}
<li id="jumpTo-{{ item.id }}" class="active">
<h3 class="m-accordion-contentTitle">{{ item.heading }}</h3>
{{ item.text | markdownify }}
</li>
{% endfor %}
And then I have my data file info.yml:
- heading: Setting
id: setting
img-pull: right
text: |
Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
{% include blocks/image.html %}
Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Here my text is markdown, that the markdownify plugin takes care of converting into markdown. So my links turn into links, ems turn into ems. Everything is good. Except that my include doesn't work here. It works in a regular markdown.md file - the markdown will get converted properly but the include will also get rendered as HTML. But here the include is just rendered as plain text.
How can I get this include to render as HTML?
Related
Is it possible to create such a design with Bootstrap: the image taking the top left and surrounded by text on wide devices and the image on top of the text on narrow devices? I am not sure how this positioning would be called and couldn't find a similar example.
I can't say too much without seeing your HTML or CSS. But I can provide an example of how this may work. I will assume your image will be large enough to fill a narrow device.
The CSS attribute and the terminology you would be looking for is "float" some documentation can be found here.
The HTML below is an example of an image with some text in it.
<p>
<img src="example.png" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id pulvinar urna. Cras scelerisque finibus aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut nec interdum metus. Donec iaculis, nisl quis dignissim tincidunt, lorem nulla rhoncus turpis, eu fermentum ante orci a libero. Suspendisse varius nisl ut dui tincidunt, et feugiat eros egestas. Sed rhoncus viverra tellus ut pulvinar. Morbi id enim eget mauris bibendum tristique. Duis gravida ligula metus, quis porta massa mattis facilisis.
<p>
Now for some CSS.
/* This will align your image to the left within a p tag */
.image {
float: left;
margin: 10px;
}
/* To accommodate a smaller screen you will need a media query */
#media screen and (max-width: 640px) {
.image {
width: 100%;
margin: 10px auto;
}
}
I have made a quick JSfiddle with an example here. Hopefully I have provided you with enough to help you with your problem.
I've created a layout with Maqetta. Now I want to add the logic to the layout. Therefore I have downloaded the whole workspace from Maqetta and imported the files/libaries into a new Rails project. At first I had some problems, that Rails didn't loaded the dojo,js file, but I've solved that problem.
Now I have another problem. The page won't render. I've commented everything out except one widget (a button) and this works fine. But if I undo this, nothing happens. Unfortunately I also don't get any warnings/errors or anything like that from dojo.
After a little bit trying, I changed the parseOnLoad property and now I get a warning:
Unhandled Error: Tried to register widget with id==appLayout but that id is already registered
Here is the include tag:
<%= javascript_include_tag "lib/dojo/dojo/dojo", :'data-dojo-config' => "'async':true,
'packages':[{'name':'maqetta','location':'../../maqetta'},{'name':'gridx','location':'../gridx'},{'name':'clipart','location':'../../clipart'},{'name':'shapes','location':'../../shapes'},
{'name':'maqettaSamples','location':'../../../samples'},{'name':'zazl','location':'../../zazl'},{'name':'widgets','location':'../../custom'}]" %>
Here is the HTML part (I have simplified it, and now I'm just useing the example from the tutorial):
<body class="claro" data-maq-flow-layout="true" data-maq-ws="collapse" id="myapp" data-maq-appstates="{}">
<input type="button" data-dojo-type="dijit.form.Button" intermediateChanges="false" label="Search" iconClass="dijitNoIcon" onclick="alert('hi');"></input>
<div
id="appLayout" class="demoLayout"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design: 'headline'">
<div
class="centerPanel"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center'">
<div>
<h4>Group 1 Content</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
<h4>Group 2 Content</h4>
</div>
<div>
<h4>Group 3 Content</h4>
</div>
</div>
<div
class="edgePanel"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'top'">Header content (top)</div>
<div
id="leftCol" class="edgePanel"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div>
</div>
And here is the parser:
require(["dojo/parser","dojo/domReady!"], function(parser){
parser.parse();
});
I'm trying for hours now, and I'm still as clueless as at the beginning. Has somebody an idea what I can try?
Unhandled Error: Tried to register widget with id==appLayout but that id is already registered
This error is because you are parsing twice. Once on load and second in the require statement. The second parse will try registering a second widget with the same id, thus the error.
Remove one of the parsing calls and give the border container a specific width and height.
<div id="appLayout" class="demoLayout"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design: 'headline'"
style="width: 800px; height: 400px">
See http://livedocs.dojotoolkit.org/dijit/layout/BorderContainer#setting-sizes, the closest parent for which hasLayout is true (e.g. position:relative) must have a width+height set. Also, set width+height for BorderContainer.
another newbie-question regarding rails and bootstrap.
I am using something like this:
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active">About us</li>
<li>Address</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<%= render 'about_us' %>
</div>
<div class="tab-pane" id="tab9">
<%= render 'address' %>
</div>
</div>
My problem is that I render 'address' which includes a form. By submitting this form I end up in an different controller. After saving a new address with this controller I would like to redirect to this page and show the address tab.
The redirect command I tried was: redirect_to salon_path(#salon.id.to_s + "#tab9")
This results in calling the url .../salons/1%23tab9. What I think I need its .../salons/1#tab9.
But maybe you are having a better solution how to choose one specific tab.
Using:
gem 'rails', '3.2.3'
gem 'bootstrap-sass', '2.0.3'.
I could figure it out myself, this post here brought me onto the right track: How to get Twitter-Bootstrap navigation to show active link?
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="<%= 'active' if params[:tab] == 'tab1' %>">About us</li>
<li class="<%= 'active' if params[:tab] == 'tab9' %>"> Address</li>
</ul>
<div class="tab-content">
<div class="<%= if (params[:tab] == 'tab1' || !params[:tab])then 'tab-pane active' else 'tab-pane' end%>" id="tab1">
<%= render 'about_us' %>
</div>
<div class="<%= if params[:tab] == 'tab9' then 'tab-pane active' else 'tab-pane' end%>" id="tab9">
<%= render 'address' %>
</div>
</div>
And in my example I call it like this:
redirect_to salon_path(#salon.id, tab:"tab9")
For future reference and for users with similar issues, I would add one more feature to Marcus's response. The solution itself is perfect and works like a charm but what happens if no tab parameter is passed? Then bootstrap does not show any tab content and only the tabs are shown. For me, this looks rather ugly and unprofessional. In my case, I added the following jQuery to fix it.
$(document).ready(function() {
//The following set of code checks to see if any tab is already active (this occurs if a parameter to tab would be passed)
//If no tab is active, make the first tab and tab-pane active
var elementAlreadyActive = false;
$('.nav-tabs li').each(function(index, li) {
var element = $(li);
if (element.attr("class") == "active"){
elementAlreadyActive = true;
}
});
if (!elementAlreadyActive){
$('.nav-tabs li:first').addClass('active');
$('.tab-content div:first').addClass('active');
} });
Instead of showing nothing if the parameter is not passed, the code checks all the li elements to see if any are already active. If none of them are, it makes the first tab and tab-pane active.
Although making the first tab active may not be useful to everybody, the code above can easily be modified to make a specific tab active if no parameters are passed.
You just have to do data-toggle="tab" for each list item anchor and the class="tab-pane" for each tab
<div class="tabbable">
<ul class="nav nav-tabs" id="proftabs">
<li><a href="#profile_tab" data-toggle="tab" >Profile</a></li>
<li>Friends</li>
<li>Photos</li>
<li>Videos</li>
<li>Quotes</li>
<div class="tab-content">
<div id="profile_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid excepturi id, maxime nesciunt recusandae repellat unde veritatis! Eveniet, fugiat, ipsum. Architecto assumenda, culpa impedit molestias natus porro quisquam repudiandae sunt!
</div>
<div id="friends_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut corporis cupiditate incidunt. Accusantium adipisci architecto dignissimos eligendi est explicabo ipsa molestiae nesciunt optio porro provident, sint soluta, tempore temporibus vitae?
</div>
<div id="photos_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ex harum iste magnam necessitatibus sed sit. A adipisci amet cupiditate delectus dolor itaque numquam officia omnis, provident quod temporibus voluptatibus?
</div>
<div id="videos_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto at autem dolore, dolorum eaque earum eius, id in iste molestias officia, possimus qui quis recusandae repellat reprehenderit suscipit voluptatum!
</div>
<div id="quotes_tab" class="tab-pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consectetur, in necessitatibus qui quidem tenetur unde voluptatum! Aspernatur dolorem earum id labore molestiae nam quas quisquam, sapiente sequi ut voluptatibus.
</div>
</div>
</div>
I was researching here on SO how to implement a tabbed interface in my Rails app. For example, I like how Ryan Bates uses it in his Railscast overview page.
I want to mimic that in my Rails app so that a User's profile has a navigation in it with two or three links. Clicking either link loads information using AJAX (I'm guessing). Then the URL shows /profiles/1/view?info or /profiles/1/view?otherdata
I came across this question, with the following solution:
I would make the contents of each tab be called in by a separate ajax request. This would give you the following benefits
Now each tab can easily be a different view/controller
You only need to load the contents for a tab when it is used; you won't be processing code/downloading html for tabs that the user doesn't use.
The problem is I'm new to Rails and have no idea how to do this. Can anyone point me to some resources that help explain how to set this up? I'd be tabbing between profile data and messages to the user.
Any help would be much appreciated.
As you're new to Rails I'd suggest breaking up your goal into 2 sections: first, get the tabs working with simple content, then add the AJAX.
Step 1 - Getting the tabs working
Have a look at the JQuery UI tabs demos: http://jqueryui.com/demos/tabs/
The code looks something like this:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque.</p>
</div>
</div>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
Step 2 - Getting the AJAX working
Check out: http://jqueryui.com/demos/tabs/#ajax
Even it may be hip to use AJAX today, why not do the Simplest Thing That Could Possibly Work? If have done in the past something like the following:
Adding tabs to the UI by code like the following (notation is HAML, sorry for that). As a result, you get a list of links that link to the controllers index action. This code is part of the file layouts/_header.html.haml.
%ul.sideul
- ["page", "notice", "contact"].each do |thing|
- curr = controller.controller_name.singularize == thing
- cl = curr ? 'current' : 'normal'
%li.normal= link_to(thing.humanize, {:controller => controller, :action => "index"}, {:class => cl })
Add then the CSS to your application that this is shown as tabs. There you will need the information if a li is current or normal.
Every time you click then on the tab, the index action of that controller is called, and after that, the index page is shown.
Your file layouts/application.html.haml should have the following content (at least). I have skipped what is not necessary for the example. The template is taken from html5-boilerplate for Rails.
%body{ :class => "#{controller.controller_name}" }
#columns
%header#side
= render "layouts/header"
#main{ :role => 'main' }
%h1= yield(:title)
= render "layouts/flashes"
= yield
= render "layouts/javascripts"
The relevant parts for this solution is:
= render "layouts/header": Renders the list of tabs inside of #columns > header#side
= yield: Renders whatever is in the view for the action of the controller. In our case first the index page, may be later the edit or show page.
In my cshtml files I have a lot of blocks with stuff like this:
#if(Model.foo)
{
<span>Hello World</span>
}
The only reason the span is there is because I can't find any other way to force it to recognize that "Hello World" is part of the html unless I surround it in html tags. Is there a good way to escape the code that doesn't involve adding meaningless tags to the display?
You could use #: to escape:
#if(Model.foo)
{
#:Hello World
}
or the special <text> tag which is not outputted in the response:
#if(Model.foo)
{
<text>Hello World</text>
}
#if(Model.foo)
{
#:Hello World
}
<text>Explicit HTML<text>
#(Explicit C#)
You can add text in as below:
#if(Model.foo)
{
#:Hello World
}
when you use # razor switch it to code block mode. Hence you need to specify text as above.
many developers has provided many ways above .. here is one more which is working fine in MVC 4 .. I hope it will work for MVC 3 also ..
#if(Model.foo)
{
#Html.Label("Hello World")
}
The above answers are great. I'm going to include a link to Scott Guthrie's article on this, since it shows some more examples and explanations.
https://weblogs.asp.net/scottgu/asp-net-mvc-3-razor-s-and-lt-text-gt-syntax
#if (p.UnitsInStock == 0 {
<text>
Donec in ante vitae purus consequat laoreet ut elementum
purus. Ut ut tempus nulla, quis ultrices est. Integer
pharetra ante in lectus porta, a lacinia ex faucibus.
Aliquam magna risus, pretium vel neque at, laoreet
ultrices lectus. Morbi posuere luctus risus. Nullam
tincidunt massa egestas nunc tempor scelerisque.
</text>
}
#if (p.UnitsInStock == 0 {
#: Line 1
#: Line 2
#: Line 3
}