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 %}
Related
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!
turl1, turl2...ourl1, ourl2 are context variables (all strings) I am returning from view.
{% for i in "1234" %}
<div class="spot">
{% with t="turl"|add:i %}
{% with o="ourl"|add:i %}
<a href= {{ o }}">
<img src={{ t }}>
</a>
{% endwith %}
{% endwith %}
</div>
{% endfor %}
Right now I am getting this:
<a href="ourl1">
<img src="turl1">
</a>
...
while ourl1 and turl1 should evaluate to url but it's not.
You should remove quotes in lines:
{% with t=turl1 %}
{% with o=ourl1 %}
If you want to iterate over it, you should pass in two arrays from your view.
{'urls': [[turl1, ourl1], [turl2, ourl2]]}
Then iterate over it in your template:
{% for t, o in urls %}
<a href="{{ o }}">
<img src="{{ t }}"/>
</a>
{% endfor %}
If turl1, turl2...ourl1, ourl2 are context variables then in the django templates you need to put them between { ... }
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.
Hey I have been plugging away trying to get haystack working with whoosh to implement a search backend for a django cms project i have been working on. After figuring out some really weird permissions errors i can almost taste sucess.
I now have haystack creating the indexes correctly and it will even display results for a custom app i have created an index for however i cannot get it to display any results for the cms page stuff. There are results being returned as im not getting the "No Results" message but nothing is being printed out in the results.html template.
bearing in mind that im letting django-cms-search handle the indexing for the cms app i didnt think i would need to add anything extra to get the results to display.
So to outline what i have so far
Haystack installed with a Whoosh backend
my setting.py setting are
HAYSTACK_SITECONF = 'lactoseintolerant.lactose_search.search_sites'
HAYSTACK_SEARCH_ENGINE = 'whoosh'
HAYSTACK_WHOOSH_PATH = '/home/mike/sites/lactosetoloerant/lactoseintolerant/whoosh'
HAYSTACK_SEARCH_RESULTS_PER_PAGE = 50
my search_sites.ph file looks like
import haystack
from cms.models import monkeypatch_reverse
from cms.plugin_pool import plugin_pool
monkeypatch_reverse()
haystack.autodiscover()
i have a custom index for my Topics Model that looks like so (This is working and resturning Reuslts)
from topics.models import Topic
from haystack.indexes import *
from haystack import site
class TopicIndex(SearchIndex):
text = CharField(document=True, use_template=True)
def index_queryset(self):
"""
This is used when the entire index for model is updated, and should only include
public entries
"""
return Topic.objects.filter(active=True)
site.register(Topic, TopicIndex)
My results.html template look like
{% extends "base.html" %}
{% load cache cms_tags menu_tags %}
{% block base_content %}
<div id="panel-left">
{% block nav %}
<ul id="nav-left">
{% show_menu 1 100 100 100 %}
</ul> <!-- #nav-left -->
{% endblock %}
{% block panel_left %}
{% endblock %}
</div>
{% block panel_right %}
<div id="panel-main">
{% ifequal q '' %}
<h1 id="page-head-2">Search Results Page</h1>
<p>Please provide search criteria or keywords</p>
<br />
<form action=".">
<p>
<input type="text" name="q" value="{{ q }}">
<input type="submit" name="search" value="Search">
</p>
</form>
{% else %}
<h1 id="page-head-2">Search Results - page {{ request.GET.page|default:1 }} of {{ paginator.num_pages }}</h1>
<h1 id="page-head-2">Found {{ paginator.count }} for <span id="searchString">'{{ q }}'</span></h1>
<form action=".">
<p>
<input type="text" name="q" value="{{ q }}">
<input type="submit" name="search" value="Search">
</p>
</form>
<ul id="searchResults">
{% for item in current_page.object_list %}
<li class="searchResult">
<h2 class="searchTitle">{{ forloop.counter }}. {{ item.get_title }}</h2>
<a class="searchLink" href="{{ item.get_absolute_url }}">{{ item.get_absolute_url }}</a>
</li> <!-- .searchResult -->
{% endfor %}
</ul>
{% if paginator.num_pages > 1 %}
<div id="pagination">
{% for page_range_item in paginator.page_range %}
{% if not request.GET.page and page_range_item == 1 or request.GET.page == page_range_item|safe %}
<span class="pag-link current" href="/topics/?page={{ page_range_item }}">{{ page_range_item }}</span>
{% else %}
<a class="pag-link" href="/search/?q={{ q }}&page={{ page_range_item }}">{{ page_range_item }}</a>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endifequal %}
</div>
{% endblock %}
{% endblock %}
Im clearly missing something obvious here any help would be grealt appreciated!!
Cheers
i think you got it almost, try to change {{ item.get_absolute_url }} to {{ item.object.get_absolute_url }} inn your results.html file.