Middleman Blog Pagination shows all articles - html

I have been trying to activate Pagination for my Middleman Blog, but for some reason, even though pagination itself seems to work (as signified by the buttons at the bottom, leading me until page three), all articles are shown on each individual page, instead of just ten
section in config.rb
activate :blog do |blog|
blog.name = "en"
blog.prefix = "blog"
blog.permalink = "/{year}/{month}/{day}/{title}.html"
blog.sources = "/posts/:year-:month-:day-:title.html"
blog.layout = "blog_layout"
blog.tag_template = "tag.html"
blog.paginate = true
blog.page_link = "page:num"
blog.per_page = 10
end
Blog Index.html
---
pageable: true
blog: en
priority: 1.0
change_frequency: weekly
description: Tbd.
title: Blog
---
<div class="page-content">
<div class="container">
<ul class="blog-post-list">
<% blog.articles.each do |article| %>
<li>
<a href="<%= article.url %>">
<div>
<img src="<%= article.data.image %>" class="blog-post-list__image" />
</div>
<div class="blog-post-list__post-preview">
<p class="blog-post-list__title"><%= article.title %></p>
<p><%= article.summary(140, '...') %></p>
<span><%= article.date.strftime('%B %e, %Y') %></span>
</div>
</a>
</li>
<% end %>
<ul class="paginate">
<% if paginate && num_pages > 1 %>
<% if prev_page %>
<p class="previous"><%= link_to 'Previous page', prev_page %></p>
<% end %>
<% end %>
<% if paginate %>
<% if next_page %>
<p class="next "><%= link_to 'Next page', next_page %></p>
<% end %>
<% end %>
</ul>
</ul>
</div>
</div>
Any hints what could be the issue here, that causes all articles to be displayed anyways would be highly appreciated! Thanks in advance :)

Is that not because you use blog.articles.each and should use page_articles instead?
I think you have to change blog.articles.each (the total number of articles) and use something like <% page_articles.each do |article| %> to get the number of articles you want on your page.

Related

How to display an array of object in ejs with conditions

i'm doing a web app to manage my money with node Js.
Here is what it's look like :
I've done almost everything, but I still have one part to do, which is to display my last 30 transactions.
I can't display my transactions as I want. It is necessary that if the date of the current transaction is different from the transaction just before then it displays the date and the transaction otherwise just the transaction. I block at the condition level if the date is different
At first I tried to display the first transaction with the date and then use (for) or (for in) to display the others with the condition but i can't use the i variable in my array of objects.
like this :
<%= transaction30[0].DateT%>
<%= transaction30[0].Name%>
<%= transaction30[0].Montant%>
<% for var i in transactions30 %> or <% for var i=1; i<= transactions30.length;i++%> {
<% if(transactions30[i].DateT != transactions30[i-1].DateT) %>
then display date and infos
<% }else{ %>
juste display infos
<% } %>
Then I read somewhere that you shouldn't use (for) for arrays of objects. So I tried a forEach.
Here is my code :
<h1>
<%= transactions30[0].DateT %>
</h1>
<% let status=transactions30[0].DateT %>
<% transactions30.forEach(function(item){ %>
<% console.log(item.DateT," et ",status) %>
<% if(item.DateT!=status) {%>
<h1>
<%= item.DateT %>
</h1>
<div class=" activite">
<div class="transaction-image"></div>
<div class="transaction-info-container">
<p class="transaction-nom">
<%= item.Nom %>
</p>
<p class="transaction-categorie">
<%= item.Categorie %>
</p>
</div>
<p class="transaction-montant">
<%= item.Montant %>
</p>
</div>
<% status=item.DateT %>
<% }else{ %>
<div class="activite">
<div class="transaction-image"></div>
<div class="transaction-info-container">
<p class="transaction-nom">
<%= item.Nom %>
</p>
<p class="transaction-categorie">
<%= item.Categorie %>
</p>
</div>
<p class="transaction-montant">
<%= item.Montant %>
</p>
</div>
<% } %>
<% }); %>
The 'prevdate' variable is updating well, but it always display date of all transactions. The (if) condition work but only for the first transaction because i dont get the date of the first transaction two times ( i display the first date at start, out of the forEach condition)
Here is the array for better comprehension : array named transactions30
Can someone help me please ?
If found the solution. Instead of (if date != previsousdate) i had to do
if(date < previousdate || date > previousdate)
and now it's work
<h1>
<%= transactions30[0].DateT %>
</h1>
<% let status=transactions30[0].DateT %>
<% transactions30.forEach(function(item){ %>
<% console.log(item.DateT," et ",status) %>
<% if(item.DateT>status || item.DateT < status) {%>
<h1>
<%= item.DateT %>
</h1>
<div class=" activite">
<div class="transaction-image"></div>
<div class="transaction-info-container">
<p class="transaction-nom">
<%= item.Nom %>
</p>
<p class="transaction-categorie">
<%= item.Categorie %>
</p>
</div>
<p class="transaction-montant">
<%= item.Montant %>
</p>
</div>
<% status=item.DateT %>
<% }else{ %>
<div class="activite">
<div class="transaction-image"></div>
<div class="transaction-info-container">
<p class="transaction-nom">
<%= item.Nom %>
</p>
<p class="transaction-categorie">
<%= item.Categorie %>
</p>
</div>
<p class="transaction-montant">
<%= item.Montant %>
</p>
</div>
<% } %>
<% }); %>

Separating posts in a newsfeed using CSS/BootStrap

I'm currently trying to render a newsfeed, similar to that of FB on a Rails application I'm working on. Unfortunately, I'm not the greatest when it comes to CSS and I'm having some issues trying to display different posts. This issue occurs whether I'm using BootStrap or plain CSS. I do believe it's something to do with the loop that is created by <% #posts.each do |post| %> Currently, whenever a new post is made, it wraps inside the previous post; thus the more posts that are made, the thicker the border gets.
Image:
<% if #posts.any? %>
<% #posts.each do |post| %>
<div class="well">
<%= post.user.first_name %> <%= post.user.last_name %><br>
<% if !post.image.exists? %>
<h2> <%= post.text %> </h2>
<% else %>
<h2> <%= link_to post.text, post_path(post) %> </h2>
<%= link_to post_path(post) do %>
<p><%= image_tag post.image.url(:medium) %></p>
<% end %>
<% end %>
<% if #user %>
<% if current_user.voted_up_on?(post) %>
<%= link_to "Like", dislike_post_path(post), method: :put %>
<% else %>
<%= link_to "Like", like_post_path(post), method: :put %>
<% end %>
<% end %>
<%= "Likes: #{post.get_upvotes.size}" %>
<% if post.user == current_user %>
<%= link_to "Edit", edit_post_path(post) %>
<%= link_to "Delete", post_path(post), method: :delete %>
<% end %>
<div id='comments_div' class="comments-index">
<%= render post.comments %>
</div>
<% if current_user %>
<%= form_for [post, post.comments.new ], remote: true do |f| %>
<%= f.text_area :text, placeholder: 'Add a comment' %>
<%= f.submit 'Comment' %>
<% end %>
<% else%>
<p>You need to <%= link_to "sign in", new_user_session_path %> to comment</p>
<% end %>
<% end %>
<% else %>
No posts have been added!
<% end %>
</div>
Any help would be greatly appreciated! Thanks.
Edit: OK, please take a look at the new image -- hopefully that will make the issue slightly more obvious. Additionally, I've removed all the dead tags and replaced them with just one: BootStrap's 'well' class. So, there you have it. All the information you need is within the code above.
from your description it sounds as though an html element is not being properly closed. Run the page source through an html validator and that could show you the problem.
If you don't want to take a structured problem solving approach, try adding another </div> to the end of your posts-index container.
Your issue is very simple, just that its not clear due to poor indendation.
A simple way to explain what you did is:
<-- if (start) -->
<-- do (start) -->
<-- post (start) -->
(post is not ending here, hence it breaks the layout)
<-- do (end) -->
<-- if (end) -->
<-- post (end) -->
Mistake in the above should be simple to understand so if you move your last </div>(of the well class) just before the second last <% end %>(of the <% #posts.each do |post| %> loop) it should fix the issue. So the last few lines should be
<% else%>
<p>You need to <%= link_to "sign in", new_user_session_path %> to comment</p>
<% end %>
</div>
<% end %>
<% else %>
No posts have been added!
<% end %>
Sounds to me like it could be a misplaced
<% end %>
or a missing
</div>
that is causing this behavior.
Proper indentation will point to where to close off actions or divs

Undefined method `errors' for nil:NilClass - Static Pages Rails

I try to add a link in the menu to a simple html page, but when I try to go to the link I get an error as in the title. I'm newbie in Rails and I can't understand this error, I try add one static html page. Where is the problem? Please help.
In menu
<li><%= link_to "test" , pages_test_path %></li>
Routes
Test::Application.routes.draw do
post "inquiry/create"
root :to => 'welcome#index'
resources :inquiries
get "pages/test"
end
Pages controller
class PagesController < ApplicationController
def show
end
end
Test html
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Error messages
<% if item.errors.any? %>
<div class="alert alert-danger fade in" id="error_messages">
<div id="error_explanation">
<ul class="list-unstyled">
<% item.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
</div><!--/alert-->
<% else %>
<div id="error_messages" class="hide"></div>
<% end %>
It seems item object is nil. Meaning this is not declared in your controller.
Declare the variable #item in your controller like below.
#item = Item.find(your_item_id)
or
item = Item.new(your_params)
#item = item.save
Then change your html like below.
<% if #item.errors.any? %>
<div class="alert alert-danger fade in" id="error_messages">
<div id="error_explanation">
<ul class="list-unstyled">
<% #item.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
</div><!--/alert-->
<% else %>
<div id="error_messages" class="hide"></div>
<% end %>

Insert HTML with embedded Ruby

Is there a way that I can insert HTML tags with embedded Ruby?
I'm trying to loop over items in my database and need to put them in a bootstrap grid.
<% #div = "</div> <div class='row'> <div class='col-md-3'>" %>
<% #end = "</div>" %>
<div class="row">
<% #branches.each_with_index do |b, index| %>
<div class="col-md-3">
<div class="cardje transition">
<h2 class="transition"><%= b.description %></p>
<div class="cta-container transition">Import branch</div>
<div class="cardje_circle transition"></div>
</div>
</div>
<% if index+1%4 == 0 %>
<%= #div.html_safe %>
<% end %>
<% if index+1 == #branches.count %>
<% #end.html_safe %>
<% end %>
<% end %>
There must be a simpler way but I need this page to be done by tomorrow morning and I've been working way too long.
When I check the source code it's running only the loop and never implementing anything (so everything is on one row and overlapping).

Some HTML for values of Hash keys

I am building a panel with a partial, but I'd like to customise the inside of the panel with some html. Is there any way to write some HTML for a hash value?
I have a custom partial _panel_builder.html.erb that I takes as argument pclass, heading, body, etc., that I would like to use like this :
(The below syntax is bad, but I don't really understand how I could do something nice..)
<% #etudes.each_with_index do |etude, i| %>
<%= render 'shared/panel_builder',
pclass: panel_color_rotation(i),
heading: etude.name,
# For the body param, I'd like to be able to use some HTML with occasional <%=...%> for variables, like :
body: (%>
<p><%=etude.description %></p>
<ul>
<%etude.competences.each do |comp| %>
<li><strong><%= competence.name %></strong> : <%=competence.level %>
<br><small><%=competence.why %></small>
</li>
<% end %>
</ul>
<%).html_safe,
collapsable: true %>
<% end %>
EDIT : An idea of what my _panel_builder partial looks like :
<%
collapsable ||= false
pclass ||= "default"
footer ||= false
%>
<div class="panel panel-<%= pclass %> <%= if collapsable then "panel-collapsable " end %>">
<div class="panel-heading">
<%= heading %>
<% if collapsable %>
<span class="pull-right"><i class="glyphicon glyphicon-chevron-down"></i></span>
<% end %>
</div>
<div class="panel-body <%= if collapsable then "collapse" end %>">
<%= body %>
</div>
<% if footer %>
<div class="panel-footer <%= if collapsable then "collapse" end %>">
<%= footer %>
</div>
<% end %>
</div>
Okay so I was actually looking for the capture helper :
<% #etudes.each_with_index do |etude, i| %>
<%= render 'shared/panel_builder',
pclass: panel_color_rotation(i),
heading: etude.name,
body: capture do %>
<p><%=etude.description %></p>
<ul>
<%etude.competences.each do |comp| %>
<li><strong><%= competence.name %></strong> : <%=competence.level %>
<br><small><%=competence.why %></small>
</li>
<% end %>
</ul>
<% end %>,
collapsible: true %>
<% end %>
Note : in some cases, I also want to pass a complex HTML block as the header of footer, so I can't just have a helper that takes a block.
Note2 : My panel is a HTML template made for generic data. I cannot pass it a Ruby object