librelist archives

« back to archive

How to link the Image to it's thumbnail and get both of the urls?

How to link the Image to it's thumbnail and get both of the urls?

From:
angela martin
Date:
2012-06-25 @ 15:38
Hi,
I am making an image gallery site. I have created thumbnails of the images
and stored the image path as well as thumbnail picture path into the
database(MySQLdb).
The main page show the thumbnail pictures and if any one of them are
clicked then they get the main image.
So either I make a list of both of them( Path, Thumbnail) and then pass it
on to the template. But i am not able to do looping in it of both.
other way i thought was to make a dictionary and have the key as the image
and thumbnail as the value. so i can give <A href=key> and <img src=value>.
like that but i don't know the syntax of it.someone please help.

My code:

import MySQLdb as db1
db = db1.connect('localhost', 'user', 'password', 'images')
cursor = db.cursor()
sql = 'SELECT Path,Thumbnail FROM image;'
cursor.execute(sql)
data = list(cursor1.fetchall())
im = {}
for row in data:
        im[row[0]]=row[1]
return render_template('index.html', images=im)


And the template code if i pass a dictionary:

{% for i in images %}
<A href="{{url_for('static', filename= i.key) }}">
<img src="{{ url_for('static', filename=i.value) }}"  />
</A>
{% endfor %}

Thanks for all your help.

Re: [flask] How to link the Image to it's thumbnail and get both of the urls?

From:
Ib Lundgren
Date:
2012-06-25 @ 16:15
Hey,

I think what you are looking for is a
tuple<http://docs.python.org/tutorial/datastructures.html#tuples-and-sequences>
which
allows you to use automatic unpacking of its values in the for loop.

images = []
for row in data:
        images.append((row[0], row[1]))

or if you prefer list comprehensions

images = [(row[0], row[1]) for row in data]

Supply the list of image/thumbnail pairs to your template and then unpack
them neatly in the loop.

{% for image, thumbnail in images %}
<A href="{{url_for('static', filename=image) }}">
<img src="{{ url_for('static', filename=thumbnail ) }}"  />
</A>
{% endfor %}

Oh and if you really wanted to use the key+value dictionary approach you
would supply your dictionary as you mention and then

{% for key in images %}
<A href="{{url_for('static', filename=key) }}">
<img src="{{ url_for('static', filename=images[key] ) }}"  />
</A>
{% endfor %}

Or you could use the dictionary method items to make a list of 2-tuples of
your dictionary (similar to my example above)

{% for key, value in images.items() %}
<A href="{{url_for('static', filename=key) }}">
<img src="{{ url_for('static', filename=value ) }}"  />
</A>
{% endfor %}

Good luck!
-- Ib

On Mon, Jun 25, 2012 at 5:38 PM, angela martin <martinangela63@gmail.com>wrote:

> Hi,
> I am making an image gallery site. I have created thumbnails of the images
> and stored the image path as well as thumbnail picture path into the
> database(MySQLdb).
> The main page show the thumbnail pictures and if any one of them are
> clicked then they get the main image.
> So either I make a list of both of them( Path, Thumbnail) and then pass it
> on to the template. But i am not able to do looping in it of both.
> other way i thought was to make a dictionary and have the key as the image
> and thumbnail as the value. so i can give <A href=key> and <img src=value>.
> like that but i don't know the syntax of it.someone please help.
>
> My code:
>
> import MySQLdb as db1
> db = db1.connect('localhost', 'user', 'password', 'images')
> cursor = db.cursor()
> sql = 'SELECT Path,Thumbnail FROM image;'
> cursor.execute(sql)
> data = list(cursor1.fetchall())
> im = {}
> for row in data:
>         im[row[0]]=row[1]
> return render_template('index.html', images=im)
>
>
> And the template code if i pass a dictionary:
>
> {% for i in images %}
> <A href="{{url_for('static', filename= i.key) }}">
> <img src="{{ url_for('static', filename=i.value) }}"  />
> </A>
> {% endfor %}
>
> Thanks for all your help.
>

Re: [flask] How to link the Image to it's thumbnail and get both of the urls?

From:
angela martin
Date:
2012-06-25 @ 17:04
Thank you! :)