logo

English
                 

How to use pictures in Flickr.com on to your webpage.


This is for somewhat advanced members who use pictures in this website.

Beginners may not understand what I am saying here.

 

Flickr.com is one of the best photo website where you can store and re-use your picture collections for free.
You may have to pay if you have a lot of pictures. The free account is big enough to keep many thousand pictures.
The good thing about Flickr is that the URL is very small.
The "Photobucket.com" is also good one but the URL you get from there is just too long.

 

1. First you join flickr.com from flickr.com website. Then login.
2. Click point your mouse at "You" at the top menu. In the drop down menu, you click "Albums"
3. You get listing of all albums you created here.
4. Click the album that has the pictures you want to upload.
5. Then the album page opens with all the pictures (in medium size thumnails but big enough to see well).
6. At this page at the top row, click "Edit in Organizr ".
7. That will give you the entire alum content in smaller thumnail (in 75x75 size but detailed enough to recognize each picture).
8. Pick the picture that you want to upload in your webpage and Right Clifck on it.
9. You get drop down menu and click "Properties" and a small "Properties" window opens.

 

10. Mark and copy the Address (URL) and get out of this small window. Now, you have this URL.
For an example: https://farm3.staticflickr.com/2947/34050450512_73795d615d_s.jpg

 

11. Back to the "Edit" window. At the top menu, click "Photo Stream"
12. Now you get the list view of all pictures in medium size thumbnail.
13. Double click the same picture you picked earlier and you get the original picture in the original size.
14. At the right bottom, click the up-arrow icon (share button) and you get "Share Photo" window.

 

15. Click "Embed" at the top menu. You get this codes.
<a data-flickr-embed="true"  href="https://www.flickr.com/photos/44686189@N00/34050450512/in/datetaken/" title="Whitney2016-001"><img src="https://c1.staticflickr.com/3/2947/34050450512_73795d615d_b.jpg" width="700" height="394" alt="Whitney2016-001"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

 

16. Out of this long codes, just mark the <img> tag and copy and paste in notepad as below:
<img src="https://c1.staticflickr.com/3/2947/34050450512_73795d615d_b.jpg" width="700" height="394" alt="Whitney2016-001">

 

17. This codes is what you use in your webpage.

However, if you want to use many pictures in yur webpage, all these process seem too long and complicated.
So, here is the short cut to use multiple pictures in the webapge.

 

Compare two URLs above.
A. https://farm3.staticflickr.com/2947/34050450512_73795d615d_s.jpg
B. https://c1.staticflickr.com/3/2947/34050450512_73795d615d_b.jpg (you get this from the "src=" above.)

Here, the B is the URL you need for your webpage.

 

Here, above, the variables (difference at each picture) are "/2947/34050450512_73795d615d_s.jpg" at A

and "2947/34050450512_73795d615d_b.jpg" at B.

 

Only difference between A and B is that:
18. "farm3.staticflickr.com/" is to be changed to "c1.staticflickr.com/3/"
19. "_s" is to be changed to "_b"

 

This means that if you have the first URL at #10 line,
you can easily change it to the original picture by changing the URL from A to B
above by adding the changes I mentioned just above in 18 and 19.

 

20. Now, all you have to is to get the URLs from #10 window and paste them
in Note pad and then change the whole thing by using " Edit-Replace" menu.

 

If you don't understand what I am saying in #20 line (or any other lines), you have to call me on my phone.
Then, I will explain you one of the most useful function in Notepad.

 

A couple of arrogant remarks below !!

There are a lot of wonderful "Free" things around us but we have to be eager, ready, and know well to get them.

The process looks very complicated but once you start it is easier and simpler than you think.

No. Subject Date Author Last Update Views
Notice How to write your comments onto a webpage [2] 2016.07.06 운영자 2016.11.20 18193
Notice How to Upload Pictures in webpages 2016.07.06 운영자 2018.10.19 32347
Notice How to use Rich Text Editor [3] 2016.06.28 운영자 2018.10.19 5924
Notice How to Write a Webpage 2016.06.28 운영자 2020.12.23 43840
3523 Antelope Valley California Poppy Reserve [4] 2017.04.13 홍초미#65 2017.04.14 21637
3522 [Medical] Primary Aldosteronism [2] 2017.04.14 이한중*65 2017.04.15 9583
3521 Donald Trump [4] 2017.04.14 이한중*65 2017.04.15 278
3520 손흥민이 잉글랜드 프리미어리그에서 아시아 최초로 두 자릿수 득점 [4] 2017.04.08 황규정*65 2017.04.15 47
3519 VP Mike Pence's Father [1] 2017.04.16 이한중*65 2017.04.16 178
3518 The flop by United Airlines [1] 2017.04.12 운영자 2017.04.20 14413
3517 Summit Climb of Mt. Whitney - 운영자 [16] file 2016.08.17 운영자 2017.04.20 277
3516 뜻깊은 가족 한국여행 [1] file 2017.04.20 조동준*64 2017.04.20 429
3515 [Medical]Atrial Fibrillation Prevention [4] 2017.04.19 이한중*65 2017.04.21 120
3514 [Medical] Intensive LDL Lowering and CAD Progression 2017.04.21 이한중*65 2017.04.21 394
3513 Hiking at Joshua Tree National Park, California [3] file 2017.04.19 운영자 2017.04.22 265
3512 Longevity Secrets [1] 2017.04.21 이한중*65 2017.04.22 103
3511 시카고 동창회 소식 [1] 2017.04.23 노영일*68 2017.04.24 107
» How to use saved pictures in Flickr.com in your webpage. [1] 2017.04.23 운영자 2017.04.24 61
3509 의화단 사건(Boxer Rebellion)과 중국의 대북정책 [3] 2017.04.25 온기철*71 2017.04.26 96
3508 President Trump's Korean War [3] 2017.04.27 온기철*71 2017.04.27 72
3507 변방에서 세계 최고 리그로…한국 아이스하키의 놀라운 변신 [2] 2017.04.28 황규정*65 2017.04.29 66
3506 NK failed Missile Test; Cyber War(?) [1] 2017.04.29 온기철*71 2017.04.29 57
3505 The U.S.-ROK Alliance: Abandonment Fears [1] 2017.04.30 온기철*71 2017.04.30 55
3504 Haru Nomura Outlasts Cristie Kerr in 6 Hole Playoff For Her Third Victory [5] 2017.04.30 황규정*65 2017.05.01 140