Is it possible to use front matter in an include. I've got an include called image.html that looks like this.
image.html
{% if layout == 'page' %}
<img src="{{ site.url }}/public/img/{{ include.url }}" class="page">
{% else %}
<img src="{{ site.url }}/public/img/{{ include.url }}">
{% endif %}
And an about.md file that looks like this:
about.md
---
layout: page
---
{% include image.html url="img.jpg" %}
But for some reason, it isn't recognising the if layout statement. Any idea how to get this to work?
Any help is appreciated. Thanks in advance!
UPDATE
Full issue below:
If the image.html include is included on a page, the include needs to have a completely different layout, with two encapsulating elements (container and sm-col-12). Hope the below makes a bit more sense than my original question.
image.html
{% if include.size == 'full' and include.type != 'gif' %}
<section class="image full-width">
<img src="{{ site.url }}/public/img/{{ include.name }}.{{ include.type }}">
</section>
{% elsif layout == 'page' and include.type != 'gif' %}
<div class="container">
<div class="sm-col-12">
<section class="image">
<img src="{{ site.url }}/public/img/{{ include.name }}.{{ include.type }}">
</section>
</div>
</div>
{% elsif include.type != 'gif' %}
...
{% else %}
...
{% endif %}
about.md
---
layout: page
---
{% include image.html name="zifferblatt" type="jpg" %}
From an include file, you still have the page variable available.
In your case, you to call page.layout :
<img src="{{ site.url }}/public/img/{{ include.url }}" {% if page.layout == 'page' %}class="page"{% endif %}>
Related
I have an image gallery for each users post. However, if a user has not uploaded any images I don't want to display the title "Image Gallery". How would I go about hiding the title if the for loop does not return anything?
<a>Image Gallery</a>
<div class="row">
{% for images in postgallery %}
<div class="col-md-3">
<a href="{{ images.images.url }}" data-lightbox="image-1">
<img class="img-thumbnail" src="{{ images.images.url }}" />
</a>
</div>
{% endfor %}
</div>
I have tried a few variations of {% if imagegallery == 0 %} but I can't get anything to work as I would like
According to django doc you can use this syntax: {% if postgallery|length == 0 %}
I need to develop a web app using python flask and I need to add an image to the view page. But I couldn't get it.please help me out of it.
In the example below the image is stored in an SQLite database. From there you can do something like:
#app.route('/show')
def show_pic():
filename = request.args.get('filename','')
t = (filename,)
cur = g.db.execute('select label from pics where filename=?', t)
label = cur.fetchone()[0]
return render_template('upload.html', filename=filename, label=label)
And then in your template:
{% macro pic_path(pic) %}
{{ url_for('return_pic', filename='%s' % pic) }}
{% endmacro %}
{% block content %}
{% if filename is defined %}
<div id="image">
<a href="{{ pic_path(filename) }}" target="_blank">
<img class="new" src="{{ pic_path(filename) }}">
</a>
</div>
{% else %}
<ul>
{% for pic in pics %}
<li class="thumb">
<a href="{{ url_for('show_pic', filename=pic.filename) }}">
<img class="thumb" src="{{ pic_path('thumb_'+pic.filename) }}">
</a>
<strong>{{ pic.label }}</strong>
</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}
I am using Django-Oscar with AWS S3 to host my product images. The carousel that displays images is presenting the product images correctly, but it is showing the thumbnail size image. I want to display the full-size image, not the thumbnail, on hover or click.
I am using django-compressor as well, so the images are stored in the cache folder on S3.
Should I change the template to enable this, or is there a django-oscar setting that can handle this?
Relevant code:
<div class="carousel-inner" role="listbox">
{% for image in all_images %}
<div class="item {% if forloop.first %}active{% endif %}">
{% thumbnail image.original "440x400" upscale=False as thumb %}
<img src="{{ thumb.url }}" alt="{{ product.get_title }}" />
{% endthumbnail %}
</div>
{% endfor %}
</div>
To something like this:
<div class="carousel-inner" role="listbox">
{% for image in all_images %}
<div class="item {% if forloop.first %}active{% endif %}">
<a href="{{ image.url }}" target="_blank">
{% thumbnail image.original "440x400" upscale=False as thumb %}
<img src="{{ thumb.url }}" alt="{{ product.get_title }}" />
</a>
{% endthumbnail %}
</div>
{% endfor %}
</div>
How do I display a group of 6 thumbnails in my template to create a filmstrip. The list i am iterating through a for loop has around 30 items i want to break it into chunks of 6 and show it as a filmstrip slider. I tried using the range function for the for loop but that doesnt work
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
{% for show in object_list %}
<li class="span2">
<div class="thumbnail">
<a href="{{ show.get_absolute_url }}" data-title="{{ show.name }}" >
{% if show.images.exists %}
{% with show.images.all.0.image as show_image %}
<img src="{% thumbnail show_image 160x160 crop %}" alt="{{show.name}}" class="thumbnail">
{% endwith %}
{% else %}
<img src="{% static 'img/default-image.gif' %}" alt="{{show.name}}" class="thumbnail">
{% endif %}
</a>
</div>
</li>
{%endfor%}
</ul>
</div>
If you want 1 carousel per 6 images then you could do it like this
Step 1) Create a new .html file in your templates folder called film-slider.html.
{% for reel in reels %}
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
{% for show in reel %}
<li class="span2">
<div class="thumbnail">
<a href="{{ show.get_absolute_url }}" data-title="{{ show.name }}" >
{% if show.images.exists %}
{% with show.images.all.0.image as show_image %}
<img src="{% thumbnail show_image 160x160 crop %}" alt="{{ show.name }}" class="thumbnail">
{% endwith %}
{% else %}
<img src="{% static 'img/default-image.gif' %}" alt="{{ show.name }}" class="thumbnail">
{% endif %}
</a>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
Step 2) In your templatetags/tags.py (create it if you haven't)
from django import template
register = template.Library()
def filmslider(reel):
reels = []
for i in range(0, len(reel), 6):
reels.append(reel[i:i+6])
return {'reels':reels}
register.inclusion_tag('film-slider.html')(filmslider)
This will make an inclusion tag that's available in your templates once you've loaded it via {% load tags %}.
This will make this work for you like this {% filmslider object_list %} which you will replace all the above html code that you posted with.
I haven't tested this but it should work, if in the future you want to have more functionality to this tag you can simply add arguments to the tag definition, I'll give an example.
def filmslider(reel, slides):
#do the code.
which will lead you to {% filmslider object_list 9 %} and voila, now you can extend your film reel from 6 slides to 9.
Hope this helps a bit!
Im trying to implement commenting on my site using the comments framework. I've followed the documentation:
https://docs.djangoproject.com/en/dev/ref/contrib/comments/
https://docs.djangoproject.com/en/dev/ref/contrib/comments/example/
My template looks like:
{% extends "pbase.html" %}
{% load comments %}
{% block bcontent %}
<div class="main">
<< back
<!-- Image -->
<ul>
{% if image.title %}
<div class="title">{{ image.title }}</div>
{% endif %}
<ul>
<img border="0" alt="" src="{{ media_url }}{{ image.image.name }}" width="900" />
</ul>
</ul>
{% load comments %}
{% get_comment_count for photo.image object_pk as comment_count %}
<p>{{ comment_count }} comments have been posted.</p>
{% render_comment_list for photo.image object_pk %}
{% render_comment_form for photo.image object_pk %}
</div>
{% endblock %}
On my page the number of comments is show but not the comments themselves or the form. What am I missing?
Thanks
photo.image should be just image. I know image is correct because you use it elsewhere in the template, and if it were wrong, you'd notice.