librelist archives

« back to archive

Displaying Images

Displaying Images

From:
angela martin
Date:
2012-06-21 @ 02:57
Hi,
I am using Flask to create a website in which i can display the images.
Just like a image bookmarking site. I am using MySQL  database and storing
the image path in the table. I can take the path from the table and using
that path display that image. But i am not able to do that if i want it to
take each path from the table and all the images. I need to display all the
images in 1 request only. I can use <img> tags and for that i have to have
1 request per image. Is that convenient. How to do that?
I can encode the images to base64 and use data URLs but how to do that I
don't know.
Can somone provide some code or example please.
Thanks for the help

Re: [flask] Displaying Images

From:
Simon Sapin
Date:
2012-06-21 @ 06:00
Le 21/06/2012 04:57, angela martin a écrit :
> Hi,
> I am using Flask to create a website in which i can display the images.
> Just like a image bookmarking site. I am using MySQL  database and
> storing the image path in the table. I can take the path from the table
> and using that path display that image. But i am not able to do that if
> i want it to take each path from the table and all the images. I need to
> display all the images in 1 request only. I can use <img> tags and for
> that i have to have 1 request per image. Is that convenient. How to do that?
> I can encode the images to base64 and use data URLs but how to do that I
> don't know.
> Can somone provide some code or example please.
> Thanks for the help

Hi,

Do you really really need to do this with a single HTTP request? Why?

Unless your images are very small or you have some good reason you 
haven’t told us yet, I recommend serving each image separately and doing 
that many HTTP requests (+1 for the HTML page)

* This is easier
* You do not get the 33% penalty on transfer size because of base64
* Browsers can cache each individual images


Now, if you still want to go with data: URIs, there is a Python example 
on Wikepedia:

http://en.wikipedia.org/wiki/Data_URI_scheme#Python

Note that a MIME type like image/png is included. You’ll need to make 
that a parameter if your images are not all of the same type.

That’s all I can say if your question is not more specific than that.

Regards,
-- 
Simon Sapin

Re: [flask] Displaying Images

From:
pronoyc@gmail.com
Date:
2012-06-21 @ 15:45
>
> Do you really really need to do this with a single HTTP request? Why?
>

I think the simplest way would be to use the static function. You'll
obviously have to migrate the whole thing to /static/img/your_custom_folder

It shows all the images in one go.


-- 
Regards,

Pronoy Chopra
http://blog.pronoy.in <http://www.pronoy.in/about>/
http://www.twitter.com/pronoyc

Re: [flask] Displaying Images

From:
angela martin
Date:
2012-06-22 @ 03:43
the images are not small. I want them to show them collectively like it's
displayed on any image bookmarking site like weheartit.com or any other.
I have the images and want to display them on one page in a template.
that's all
i guess i will be using the static function. I hope i will be successful.
Can u provide me with some code for it. please
Thanks

Re: [flask] Displaying Images

From:
azwar akbar
Date:
2012-06-22 @ 03:52
Hi angela, maybe this is code that you want.


<img src="{{ url_for('static', 'image_name.png') }}" />

assume your image is under static/ directory
--static/
   |
  +-- image_name.png

if you have more image, combine code above with loop function

On Fri, Jun 22, 2012 at 10:43 AM, angela martin <martinangela63@gmail.com>wrote:

> the images are not small. I want them to show them collectively like it's
> displayed on any image bookmarking site like weheartit.com or any other.
> I have the images and want to display them on one page in a template.
> that's all
> i guess i will be using the static function. I hope i will be successful.
> Can u provide me with some code for it. please
> Thanks
>



-- 


regards,
Azwar Akbar

Re: [flask] Displaying Images

From:
angela martin
Date:
2012-06-22 @ 04:37
Hie  azwar akbar,
this code will be in the template? right
<img src="{{ url_for('static', 'image_name.png') }}" />
do i have to apply loop in html then?
and sorry for the silly question! but please answer!

Re: [flask] Displaying Images

From:
azwar akbar
Date:
2012-06-22 @ 05:33
Yes, it is. It is html tag, and you can put it on your template.

On Fri, Jun 22, 2012 at 11:37 AM, angela martin <martinangela63@gmail.com>wrote:

> Hie  azwar akbar,
> this code will be in the template? right
> <img src="{{ url_for('static', 'image_name.png') }}" />
> do i have to apply loop in html then?
>

For the first, just try it without loop.
If it success then, you can try make loop of it which the image name is
from your database.

and sorry for the silly question! but please answer!
>



-- 


regards,
Azwar Akbar

Re: [flask] Displaying Images

From:
pronoyc@gmail.com
Date:
2012-06-22 @ 06:25
>
> <img src="{{ url_for('static', 'image_name.png') }}" />
> do i have to apply loop in html then?
>

Angela, do this:

1. Have all your image names that you'd like to show in one go in the
database.
2. You will then have all these images in static directory.
The hierarchy is what Azwar mentioned: within static directory, either in
img folder or outside the img folder.
3. Now, create a function that will retrieve all the image names from the
database with their path. (The path too has to be in the database)
Example

@app.route('/someurl')def get_image_paths():
    #below is a custom function you'll have to write that will
    #give you all images with their urls like
    #/img/foo.png within the static directory
    images = from_database_retrieve_all_image_paths()
    return render_template('template.html', images=images)


Now, in the template as Azwar mentioned you can use the static function but
of course to automate the process you'll have to use a loop like so:

{# A loop that will fetch the images from views that you passed #}{%
for img in images %}{# for every image in the images list, you'll add
the img tag to the html with
the the static function. with filename having the complete path within
the static directory #}<img src="{{ url_for('static', filename=img )
}}" />{% endfor %}{# loop ends #}



Try it once, if you have trouble, share your code. People will help you
out. Good luck.

-- 
Regards,

Pronoy Chopra
http://blog.pronoy.in <http://www.pronoy.in/about>/
http://www.twitter.com/pronoyc

Re: [flask] Displaying Images

From:
angela martin
Date:
2012-06-22 @ 07:47
Thank you  pronoyc, I will surely try it.

Re: [flask] Displaying Images

From:
pronoyc@gmail.com
Date:
2012-06-21 @ 03:07
>
> that if i want it to take each path from the table and all the images. I
> need to display all the images in 1 request only. I can use <img> tags and
> for that i have to have 1 request per image. Is that convenient. How to do
> that?
>

You can do it using 2 ways.

1. Either your images be uploaded in some path like /static/img/foo/abc.png
This way you can serve it by making it static content. No views magic only
img tags in the template

2. Use the function send_from_directory.
Retrieve all the images using a loop in the views and push them in a dict
and push the dict as context. Then you can retrieve them in the template.

Here's a small example of the function usage.

@app.route('/uploads/<filename>')def retrieve_files(filename):
    """    Retrieve files that have been uploaded    """
    return send_from_directory(app.config['UPLOADED_FILES_DEST'],filename)



Hope that helps. Good luck.

-- 
Regards,

Pronoy Chopra
http://blog.pronoy.in <http://www.pronoy.in/about>/
http://www.twitter.com/pronoyc

Re: [flask] Displaying Images

From:
angela martin
Date:
2012-06-21 @ 03:34
I am not able to do it yet. I don't understand it.
The function only return once and so if i have to display multiple images
in one request then i pass the path of each image with a loop to a template
and by using the <img> tag it fetch that image and displays it. Am I
missing anything here?
Is it possible even to display multiple images with Flask because I
couldn't find a single entry in internet related to it.
thank you for your time.