Jump to content
attila2452

Flickr Sets.

Recommended Posts

How do i use flicker sets on my portfolio under portfolio.like this : http://jontangerine.com/about/aside/ how do i do that with my portfolio but able to style it to this: http://attilahajzer....?page=portfolio when i click the picture it opens in a new tab. i know how to link like target="_Blank" and all. just how do i set up the api and style it how i want? i would like to use my Web Design Set as my portfolio.

Edited by Attila2452

Share this post


Link to post
Share on other sites

here's my array

 <?php$gallery_array = array("one", "two", "three", "four", "five", "six", "seven", "eight", "nine"); foreach($gallery_array as) ?>

what would be next?

Share this post


Link to post
Share on other sites

Right! flickr api I really don't have a clue how this work, I presume it allows you show albums of you images, BUT! in their specific layout, and listing??? if you can't customize them to your design, them without using a database the easy option would be to add them to array

$gallery_array = array("one.jpg", "two.png", "three.gif", "four.jpg", "five.jpg", "six.jpg", "seven.jpg", "eight.jpg", "nine.jpg");$gallery_descrip_array = array("text1", "two text", "three text", "four text", "five text", "six text", "seven text", "eight text", "nine text");for($i=0; $i<count($gallery_array);$i++){echo '<figure>'."\n";echo '<img src="http://flicker.com/'.$gallery_array[$i].'">'."\n"; echo '<figcaption>'.$gallery_descrip_array[$i].'</figcaption>'."\n";echo '</figure>'."\n";}

Share this post


Link to post
Share on other sites

im wondering looking at this "\n" is that like a BR in html? or n/ in java? ( i took a computer science course in highschool gr12 and in the end we touched java)

Share this post


Link to post
Share on other sites

and i just realized a problem. because im using the php to include the HTML pages, which includes Portfolio, adding ^ code would mean i would need to make the portfolio a php file and id have to change the contents of the file. the file right now looks like this :

<h2>Portfolio</h2><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><?php$gallery_array = array("one.jpg", "two.png", "three.gif", "four.jpg", "five.jpg", "six.jpg", "seven.jpg", "eight.jpg", "nine.jpg");$gallery_descrip_array = array("text1", "two text", "three text", "four text", "five text", "six text", "seven text", "eight text", "nine text");for($i=0; $i<count($gallery_array);$i++){echo '<figure>'."\n";echo '<img src="http://www.flickr.com/photos/attilahajzer/sets/72157627018495830'.$gallery_array[$i].'">'."\n";echo '<figcaption>'.$gallery_descrip_array[$i].'</figcaption>'."\n";echo '</figure>'."\n";}?>

now if i use that as a HTML file. it won't work. but php file then the whole navigation will be messed up no?

Share this post


Link to post
Share on other sites

okay maybe not, it doesn't affect that for some reason. but i have another problem. the links for images change per image in flickr and its really irritating. such as the first image to the second grey-orange the set stays the same. its the image link that changes and in the middle of the url. so maybe outupt the entire set an individually seperate them?

Share this post


Link to post
Share on other sites

Totally lost me here? all pages you are using can be .php, they can contain html only, php only, or a mixture of both, as long as php does not conflict with any variable ref name you should not have a problem.

Share this post


Link to post
Share on other sites

instead of the whole fliker thing ill just make a regular array and display my images like so. :) ill show you when im done :)

Share this post


Link to post
Share on other sites

okay that was quick. im already lost how i would regularly output images from an array. $gallery_array = array("one.jpg", "two.png", "three.gif", "four.jpg", "five.jpg", "six.jpg", "seven.jpg", "eight.jpg", "nine.jpg");$gallery_descrip_array = array("text1", "two text", "three text", "four text", "five text", "six text", "seven text", "eight text", "nine text"); for($i=0; $i<count($gallery_array);$i++){echo '<figure>'."\n";echo '<img src="'.$gallery_array[$i].'">'."\n"; echo '<figcaption>'.$gallery_descrip_array[$i].'</figcaption>'."\n";echo '</figure>'."\n";} ?

Share this post


Link to post
Share on other sites

all you require is the ref of image 6164449171/in/set-721576270184958305858395325/in/set-72157627018495830 $gallery_array = array("6164449171/in/set-72157627018495830", "5858395325/in/set-72157627018495830");$gallery_descrip_array = array("text1", "two text"); then in the for loop echo '<img src="http://www.flickr.com/photos/attilahajzer/'.$gallery_array[$i].'">'."\n";echo '<figcaption>'.$gallery_descrip_array[$i].'</figcaption>'."\n";

Edited by dsonesuk

Share this post


Link to post
Share on other sites

ive decided to save the images to my site and just use them. because i dont want to have to play around with the height and all im not sure if i want them clickable. like if i do. i might aswell use the flicker part. but i know . this is alot of work. but nothing compaired to what it would be on a larger site.

Share this post


Link to post
Share on other sites

Okay so now i am thinking about linking them. haha. i just needed a bit of time to think about it..so. now my question is , im using the smaller size image that they provide (view all sizes). but would like it to LINK to the largest of the sizes which because of the size of the original images, the largest size varies between the images. this post might stump a few people. but here's an example. the first image is (840 x 800)im SHOWING the (240 x 229) size of that image on my website through one of the preset file dimentions on flicker I would like to link the smaller sized image to the larger image. like so:

<a href ="flickr.com/large-image.jpg">    <figure><img src="flickr.com/small-image.jpg">    <figcaption>THIS CAPTION</figcaption> </figure></a>

Share this post


Link to post
Share on other sites

Maybe i could do this through CSS. to control the size of the displaying image on my site. ill do my best.

Share this post


Link to post
Share on other sites

okay. thats weird, broken link image. but when i view source, copy the link it creates and paste it into browser, it shows the image. i know why. because its showing the page, not the image.

Edited by Attila2452

Share this post


Link to post
Share on other sites

I just want it to display an image first.then i can just link it. forget about the sizes. i can tinker with css with that.

Share this post


Link to post
Share on other sites

The links you provided are links to the flicker webpage that shows you images, what you require is the actual image file name to drag from flicker site to your site. Go the flicker, select any of your images to view, at the top you will see a 'Share' button with dropdown arrow, you have two options grab link (take you to flicker to see your image) AND Grab html/bbcode which will give you exactly what you require, a direct link to your images to show on your website. It even provides different sizes, so you can link their thumbnail (http://farm6.static....68cfe6059_t.jpg), medium (http://farm6.static...._868cfe6059.jpg), and large image (http://farm6.static....68cfe6059_b.jpg).

Edited by dsonesuk

Share this post


Link to post
Share on other sites

worked like a charm . i made another array called $gallery_link_array. put the links in there, then outputted them like so:

<?php$gallery_link_array = array("6164449171/in/set-72157627018495830", "5858395325/in/set-72157627018495830", "5837971521/in/set-72157627018495830", "5837971447/in/set-72157627018495830", "5837971393/in/set-72157627018495830", "5838523010/in/set-72157627018495830", "5837971077/in/set-72157627018495830", "5837970961/in/set-72157627018495830", "6165182432/in/set-72157627018495830");$gallery_array = array("6151/6164449171_a3092c8519_m.jpg", "2750/5858395325_a23e7f8653_m.jpg", "2774/5837971521_7524c5fde5_m.jpg", "5222/5837971447_868cfe6059_m.jpg", "/2599/5837971393_48ca018880_m.jpg", "5160/5838523010_5ff25cffec_m.jpg", "3183/5837971077_522e03b565_m.jpg", "2801/5837970961_1f9fd21b5a_m.jpg", "6164/6165182432_160ebc1c85_m.jpg");$gallery_descrip_array = array("Prevous Portfolio Design", "Blue Steel", "Eco Designs", "Spring Breeze", "Steve Auld Design Mock-up", "Beachwood gold and country club", "Grape Juice", "Blue Print", "Continuing Education");for($i=0; $i<count($gallery_array);$i++){echo '<figure>'."\n";echo '<a href="http://www.flickr.com/photos/attilahajzer/'.$gallery_link_array[$i].'">'."\n"; // what it links to.echo '<img src="http://farm3.static.flickr.com/'.$gallery_array[$i].'"></a>'."\n"; //what you seeecho '<figcaption>'.$gallery_descrip_array[$i].'</figcaption>'."\n";echo '</figure>'."\n";}?>

and VIOLA! http://attilahajzer.host-ed.net/

Edited by Attila2452

Share this post


Link to post
Share on other sites

OR you could replace '_m.' for medium image, to '_b.' for large image using just the $gallery_array

echo '<a href="http://farm3.static.flickr.com/'.str_replace("_m.", "_b.", $gallery_array[$i]).'">'."\n"; // what it links to.

Just to point out, that you need to remove duplicate showing meta tags for "description" and "keywords", you should remove below and place it in the php switch meta tag variables for home.

<meta name="description" content="Attila Hajzer is a website design and Developoper, he uses the latest HTML5, CSS3, jQuery and PHP practices in the industry to make your next website. Who will you choose to create the image of your company?"> <meta name="keywords" content="Attila Hajzer, Attila, Hajzer, Web, Mobile, Device, Media, CSS, CSS3, HTML 5, PHP, jQuery, Website Design, Website Development, Web design, Web Development">

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...