I used isotope for my thumbnail images.
Everything works fine in my development server.
After I have updated my files in appfog using "af update".
The above page spits out this error in inspect element.
Failed to load resource: the server responded with a status of 404 (NOT FOUND) http://neudev.hp.af.cm/static/plugin/css/isotope.css
Failed to load resource: the server responded with a status of 404 (NOT FOUND) http://neudev.hp.af.cm/static/plugin/js/isotope.init.js
Failed to load resource: the server responded with a status of 404 (NOT FOUND) http://neudev.hp.af.cm/static/plugin/js/isotope.js
Failed to load resource: the server responded with a status of 404 (NOT FOUND) http://neudev.hp.af.cm/portfolio/undefined?1367668124923
I try to check it inside appfog directory and i found out the files mentioned above do exists
advitor#ubuntu:~/workstation/neudev$ af files neudev app/neudev/staticfiles/plugin/js --all
====> [0: app/neudev/staticfiles/plugin/js] <====
camera.js 66.7K
camera.min.js 38.4K
isotope.init.js 808B
isotope.js 15.7K
jquery.easing.1.3.js 7.9K
jquery.min.js 91.7K
jquery.mobile.customized.min.js 17.1K
here is my template for the portfolio page
{% extends 'base.djhtml' %}
{% load humanize %}
{% block title %} | {{ title }}{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}defaults/css/pages/portfolio.css" />
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}plugin/css/isotope.css" />
{% endblock %}
{% block maincontent %}
<div class="row">
<div class="span12">
<div class="shelf">
<div class="shelfContainer">
<div class="tabbable tabs-left">
<!-- Only required for left/right tabs -->
<ul id="filters" class="nav nav-tabs">
<li class="active">
All
</li>
{% for c in cat %}
<li>
{{ c.title }}
</li>
{% endfor %}
</ul>
<div id="isotope-container" class="tab-content">
{% for p in folio %}
<div class="well well-small pull-left {{ p.category.id }}" style="margin-left: 20px">
<a href="#">
<img width="180px" src="{{ p.thumbnail.url }}" alt="{{ p.title }}" />
</a>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascript %}
<script type="text/javascript" src="{{ STATIC_URL }}plugin/js/isotope.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}plugin/js/isotope.init.js"></script>
{% endblock %}
I don't know what is wrong here, i hope someone could help me.
Any help would be much appreciated.
I know now where i did wrong, I forgot to run collectstatic
Related
becuase i want to manuplate/add some html tags after html render and save into nunjucks (like before rendering);
nunjucks before render
<div class="ps-4">
<h1>{{heading}}</h1>
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
nunjucks after render and html modification
<div class="ps-4">
<h1>hello world</h1>
<img src="abc.png" />
<div class="px-4">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
</div>
</div>
and i want it like that
<div class="ps-4">
<h1>{{heading}}</h1>
<img src="abc.png" />
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
please solve and suggest any way to do this thing pleassssss
If you want the output to look like the original nunjucks logic you typed in, then you can try the following technique. On your HTML template within your nunjucks project...
<pre>
<code>
<div class="ps-4">
<h1>{{heading}}</h1>
<img src="abc.png" />
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
</code>
</pre>
i'm fairly new to jekyll, but i'm really loving the things you're able to do with it, and the speed for deployment.
so, my site is managed with siteleaf and deployed to github pages. right now, i'm working to build out pages to showcase my past projects, and i need to be able to create dynamic content- have the ability to add multiple meta fields with the same names i.e. multiple fields called center_image or text_block that i can display based on their sort order in the admin panel/markdown file that is creating the page. here's the code i've written so far, it's currently showing the content correctly, but it doesn't allow me to 1. have multiple iterations of the same meta field or 2. sort the content dynamically.
{% for photo in page.project_content.full_width_image %}
<div class="fullwidth-image content-block">
<img src="{{ photo }}">
</div>
{% endfor %}
{% for photo in page.project_content.center_image %}
<div class="center-image content-block">
<img src="{{ photo }}">
</div>
{% endfor %}
{% for photo in page.project_content.split_left_image %}
<div class="split-image-left content-block">
<img src="{{ photo }}">
</div>
{% endfor %}
{% for photo in page.project_content.split_right_image %}
<div class="split-image-right content-block">
<img src="{{ photo }}">
</div>
{% endfor %}
{% for content in page.project_content.text_content %}
<div class="text-block content-block">
{{ content | markdownify }}
</div>
{% endfor %}
so, to sum up, i need to be able to sort this content and also include multiple iterations of the same content type. does anyone have any ideas?
thanks!
jesse
after contacting support, here's what i found.
first, i needed to change the YAML front matter from being key fields to object fields. this creates an array of content, like so
project_content:
- type: full-width-image
image: "/uploads/hero.jpg"
- type: text
body: This is another test content block.
- type: text
body: text two.
then, my markup is like so...
{% for block in project.content %}
{% case block.type %}
{% when 'full_width_image' %}
<img src="{{ block.image }}">
{% when 'text' %}
{{ block.text | markdownify }}
{% endcase %}
{% endfor %}
and my output becomes:
<div class="full-width-image content-block">
<img src="/uploads/hero.jpg">
</div>
<div class="text content-block">
<p>This is another test content block.</p>
</div>
<div class="text content-block">
<p>text two.</p>
</div>
this is exactly what i needed to do, and i can change the sort order of the items in my siteleaf admin!
I have a list of articles in my data and one of the fields is a link to an image. I'm using jeykll-assets, and I would like to load the images using the asset_path. However, the following isn't working:
{% for article in site.data.press %}
<div class="press-item">
<div class="press-image">
<div class="centerit"></div>
<a href="{{ article.url }}" target="_blank">
<img src="{% asset_path article.logo %}" />
</a>
</div>
<div class="press-excerpt">
<a href="{{ article.url }}" target="_blank">
<p>{{ article.title }}</p>
</a>
</div>
<div class="date">{{ article.date }}</div>
</div>
{% endfor %}
Specifically <img src="{% asset_path article.logo %}" /> because it doesn't load article.logo dynamically. What's the correct way to do this?
Use brackets like this : <img src="{% asset_path {{ article.logo }} %}" />
See https://github.com/jekyll/jekyll-assets#liquid-variables
I have a Markdown page index2.md as follow:
---
layout: plain
title: Index2
---
test Index2
<ul class="posts">
{% for post in site.posts %}
<li><span>{{ post.date | date_to_string }}</span> » {{ post.title }}</li>
{% endfor %}
</ul>
However this can't show my blog posts
<body>
<div class="wrapper">
<header>
<h1>Nodeclipse.github.io</h1>
<p>Resource for Nodeclipse developers</p>
<p class="view">View My GitHub Profile</p>
</header>
<section>
<div>
<p>test Index2</p>
<p> <ul class="posts"></p>
<p> </ul></p>
</div>
</section>
<footer>
<p><small>Hosted on GitHub Pages — Theme by orderedlist</small></p>
</footer>
</div>
<script src="javascripts/scale.fix.js"></script>
</body>
That is blog list is empty.
Markdown is interpreting your indented HTML as content, and helpfully wrapping it in a <p> tag for you.
Markdown will pass HTML through raw, which is what you want, but only if the starting and ending tags are not indented at all. So, un-indent the opening and closing <ul> and </ul> tags, and Markdown will let the entire chunk of HTML go unmolested. So it should look like this:
test Index2
<ul class="posts">
{% for post in site.posts %}
<li>
<span>{{ post.date | date_to_string }}</span>
»
{{ post.title }}
</li>
{% endfor %}
</ul>
I'm developing a blog using Jekyll. When I run the server with command jekyll the content don't generate.
Below what appears in the terminal:
WARN Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
index.html
I used the default Jekyll boilerplate.
layout: default
{% for post in paginator.posts %}
<article>
<header class="entry-header">
<h2 class="entry-title">{{ post.title }}</h2>
</header>
<aside class="entry-details">
<p class="entry-date">Publicado em: {{ post.date | date: "%d/%m/%y" }}</p>
</aside>
<div class="entry-content">
{{ post.content }}
</div>
</article>
{% endfor %}
post.html
Standard also.
layout: default
<article>
<header class="entry-header">
<h2 class="entry-title">{{ page.title }}</h2>
</header>
<aside class="entry-details">
{{ page.date | date: "%d/%m/%y" }}
</aside>
<div class="entry-content clearfix">
{{ post.content }}
</div>
<footer class="entry-meta">
{% include disqus.html %}
</footer>
</article>
default.html
Standard also.
<!doctype html>
<html lang="pt-BR">
<head>
{% include head.html %}
</head>
<body class="home blog">
{% include header.html %}
<div id="content">
{{ content }}
</div><!-- end #content -->
{% include footer.html %}
</body>
</html>
I have created an example gist using the three files. I ran jekyll serve using Jekyll 2.1.1 (jekyll --server has been deprecated and replaced with this command), and I did not get any errors (though Jekyll did ignore the liquid syntax because of the yaml front matter).
I have a feeling that this problem was related to a bug in WEBrick (Jekyll's default server).
I am aware that the YAML front matter is missing --- around it and I don't have the _posts directory, though I am assuming that this issue was unrelated.