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>
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 %}
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!
Can I access content from Mezzanine page gallery in a template I use for another page?
For example I have a gallery page that shows a collection of images I have added in Django Admin to the "Media Library". The page works fine and shows all of the images I have selected for the page.
The gallery page template has some code for displaying the images that looks something like...
{% with page.gallery.images.all as images %}
{% for image in images %}
<li>
<a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ MEDIA_URL }}{{ image.file }}">
<img class="image-overlay-thumb" src="{{ MEDIA_URL }}{% thumbnail image.file 75 75 %}">
</a>
<div id="image-{{ image.id }}" class="image-overlay" style="display:none;">
←
→
<img class="image-overlay-full" src="{{ MEDIA_URL }}{% thumbnail image.file 0 600 %}"><br>
<p>{{ image.description }}<br>{{ forloop.counter }} / {{ images|length }}</p>
</div>
</li>
{% endfor %}
{% endwith %}
However, on a different page, I want to use those same images, in the same sequence within a list I'll use to drive a jQuery slideshow.
Is there a way to use a template tag something like '{% with page.gallery.images.all as images %}' but make it point to the specific page that has the gallery images I want?
Thanks in advance for any insight you can provide.
you need to create context processor like:
def all_pages(request):
from mezzanine.galleries.models import Gallery
galleries = Gallery.objects.all()
return {'pages': galleries}
then add it to your settings.py in TEMPLATE_CONTEXT_PROCESSORS
TEMPLATE_CONTEXT_PROCESSORS += (
'path.to.our.just.created.context_processor.all_pages',
)
then in template:
{% load mezzanine_tags %}
<ul class="thumbnails gallery">
{% for page in pages %}
{% with page.gallery.images.all as images %}
{% for image in images %}
<li>
<a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ MEDIA_URL }}{{ image.file }}">
<img class="image-overlay-thumb" src="{{ MEDIA_URL }}{% thumbnail image.file 75 75 %}">
</a>
<div id="image-{{ image.id }}" class="image-overlay" style="display:none;">
←
→
<img class="image-overlay-full" src="{{ MEDIA_URL }}{% thumbnail image.file 0 600 %}"><br>
<p>{{ image.description }}<br>{{ forloop.counter }} / {{ images|length }}</p>
</div>
</li>
{% endfor %}
{% endwith %}
{% endfor %}
</ul>
I'm not so familiar with mezzanine, but it should work, you can pass context in view or other way and manipulate it.
you can also use templatetag like this:
#register.simple_tag
def show_gallery_by_slug(slug):
from mezzanine.galleries.models import Gallery
gallery = Gallery.objects.filter(slug=slug)
template = get_template("pages/images.html")
c = Context({"gallery": gallery})
return template.render(c)
and then in templates
{% load yourtags %}
{% show_gallery_by_slug "galleryslugishere" %}
you also need to create template to display with for image in gallery..
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.