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
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 using django 1.9 and python 3. My english also isn't the best, so excuse the question if it is formulated bad.
I'm working on making my website a single-page application. I need to get the {% block %} contents of a given template, and then send that as a HttpResponse so that ajax can pick it up and inject it into the page.
I've tried using the answer from this question: Django - how to get the contents of a {% block %} tag from a template
But upon trying to fetch the contents of a block in my view like so:
response_data[content] = get_block_source('profile/login.html', 'content')
if request.is_ajax():
return HttpResponse(
json.dumps(response_data),
content_type="application/json"
)
I just get this error from django, no matter what I do:
ValueError at /login/ Template block content not found
The contents of the block don't even make it to the ajax call, what gives?
EDIT:
I'll include my "content" block here:
in my template:
{% extends 'base.html' %}
{% block content %}
<div class="big-title text">Log in</div>
<div class="form-container">
<form name="login-form" id="user" method="post" action="/login/" enctype="multipart/form-data" class="text">
{% csrf_token %}
<div class="title">Enter your credentials</div>
<div class="form-row">
<div class="form-flex">
<div class="field-container">
<div class="field-input-container">
<div class="field-label accent">Username</div>
<div class="field-input">
<input class="field-input-element" type="text" name="username" />
</div>
</div>
<div class="field-help">Your username is always lowercase.</div>
</div>
</div>
<div class="form-flex">
<div class="field-container" style="height: 110px">
<div class="field-input-container">
<div class="field-label accent">Password</div>
<div class="field-input">
<input class="field-input-element" type="password" name="password" />
</div>
</div>
<div class="field-help"></div>
</div>
</div>
</div>
<div class="form-button-container">
<div class="form-error"></div>
<div class="form-message"></div>
<input type="submit" name="submit" value="Accept" class="button form-button"/>
</div>
</form>
</div>
{% endblock %}
In my base (base.html)
<body>
<div id="modal-container">
<div id="modal-overlay">
<div id="modal-items">
</div>
</div>
</div>
<div id="wrapper">
<header>
<div id="header-title" class="text accent">App name</div>
<div id="header-nav">
<nav>
{% if user.is_authenticated %}
Home
Feed {% if request.user.is_superuser %}
Admin {% endif %}
N
<a href="/{{ request.user }}" class="header-avatar-small-a">
<div class="text header-greeting">Hi, {{ user.userprofile.display_name }}</div>
<div class="header-avatar-small">
{% if not user.userprofile.avatar == '' %}
<img src="{{ MEDIA_URL }}users/{{ user }}/avatar" alt=""> {% else %}
<img src="{{ MEDIA_URL }}users/avatar" alt=""> {% endif %}
</div>
</a>
{% else %}
Log in
Create account {% endif %}
</nav>
</div>
<div class="progress">
<div id="header-progress" class="fill"></div>
</div>
</header>
<main>
{% block content %} {% endblock %}
</main>
<footer></footer>
</div>
</body>
</html>
Template source is the template actual HTML, not the file reference
Im using Jekyll and liquid syntax and would like to add a custom background colour and thumbnail image for each of my projects on my homepage. How can I achieve this using YAML frontmatter?
liquid syntax outputting projects
{% for post in site.categories['project'] %}
<div class="project">
<h3 class="project__title">{{ post.title }}</h3>
<p class="project__description">{{ post.description }}</p>
<a class="project__link" href="{{ post.url}}">view project</a>
</div>
{% endfor %}
In your project posts add background and thumbnail variables
myprojectpage.html
---
front matter variables ...
background: #ffffff
thumbnail: images/myproject.jpg
---
You can then use them in your loop :
{% for post in site.categories['project'] %}
<div class="project" style="background:{{post.background}};">
<h3 class="project__title">{{ post.title }}</h3>
<img src="{{ site.baseurl }}/{{ post.thumbnail }}" alt="post.title">
<p class="project__description">{{ post.description }}</p>
<a class="project__link" href="{{ post.url}}">view project</a>
</div>
{% endfor %}
Another option can be to simply add a class to your post and manage style in your css/scss/less file.
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 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