Flickr Sets.

[attila2452]

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.

[dsonesuk]

Quick way would be to store image file src in a array, the loop through each, creating each <figure> <img src="http://lorempixum.com/300/200/"> <figcaption>A short description</figcaption></figure> with new src filename from that array.

[attila2452]

so i shouldn't need to use the API for it? ori should still use it but differently?

[attila2452]

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?

[dsonesuk]

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";}

[attila2452]

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)

[dsonesuk]

\n = newline similar to break, it prevents the html appearing in one big mass of html code, so you spot what it is creating, and any errors during each loop.

[attila2452]

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?

[attila2452]

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 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?

[dsonesuk]

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.

[attila2452]

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

[attila2452]

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";} ?

[dsonesuk]

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";

[attila2452]

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.

[attila2452]

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>

[attila2452]

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

[attila2452]

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.

[attila2452]

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.

[dsonesuk]

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).

[attila2452]

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/

[dsonesuk]

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">