Photo Overlays


Cam Zink at the 2012 Crankworx in Whistler.
BENTOMAS
Developer
This is a picture, with some text overlayed on top of it.

[POVERLAY=9915333 padding=25 color=#f2f2f2]
[BOX bold family=Verdana size=75 lineHeight=80 marginLeft=-6]BENTOMAS[/BOX][BOX marginTop=-10]Developer[/BOX]
[/POVERLAY]
[PI=9915333]This is a picture, with some text overlayed on top of it.[/PI]

Notice how I used negative margins on the FONT tags to get the text lined up evenly on the left. Then I used a combination of line height and negative margins to bring the lines closer together. Unfortunately, this just takes some fiddling to get everything aligned well.




You can also set the alignment of the overlayed text. Write the overlay like this: [POVERLAY=<photo id> align=<alignment>]. The vertical alignment options are top and bottom. You can add horizontal alignment to the vertical alignment. Separate them with a dash: top-right. The horizontal alignment options are left, center and right. Here is an example of it in action...


Rob Venables Burke Mountain BC
RADEK
Mountain Biker
This is a picture, with some text overlayed in the bottom right

[POVERLAY=9899741 padding=25 color=#f2f2f2 align=bottom-right]
[BOX bold family=Verdana size=75 lineHeight=80]RADEK[/BOX][BOX marginTop=-10]Mountain Biker[/BOX]
[/POVERLAY]
[PI=9899741]This is a picture, with some text overlayed in the bottom right[/PI]



Here are some more examples taken from actual articles...



[POVERLAY=13989390 align=middle-center paddingBottom=50 color=black family="Times New Roman"]
[BOX size=80]THE FINAL COUNTDOWN[/BOX][BOX size=15 marginTop=-15]Words & Photography // Dave Trumpore & Matthew Delorme[/BOX]
[/POVERLAY]
[PI=13989390][/PI]





[POVERLAY=13862616 align=middle-center color=#f8eb8a]
[BOX bold size=60 letterSpacing=15]RETURN[/BOX][BOX bold size=20 letterSpacing=5 marginTop=-5 marginBottom=-5]TO THE[/BOX][BOX bold size=60 letterSpacing=15]ROCKIES[/BOX]
[/POVERLAY]
[PI=13862616][/PI]





[POVERLAY=13900988 align=top-center paddingTop=130]
[BOX size=125 lineHeight=125 family=Impact]FROM THE ASHES[/BOX][BOX size=50 family=Impact]Vallnord Wold Cup Finals[/BOX][HR size=2 color=white width=40%][BOX size=12 marginTop=10]photography & words: // nathan hughes // matt delorme // dave trumpore[/BOX]
[/POVERLAY]
[PI=13900988][/PI]





[POVERLAY=13182971 align=top-left paddingTop=100 paddingLeft=90]
[BOX size=83 lineHeight=83 marginBottom=-15 family="Times New Roman"]MCGAZZA[/BOX][BOX size=90 lineHeight=90 family="Times New Roman" marginBottom=-10]FOREVER[/BOX][HR size=2 color=white width=100%][HR size=2 color=white width=100%][BOX size=60 family="Times New Roman"][CENTER]1982–2016[/CENTER][/BOX]
[/POVERLAY]
[PI=13182971][/PI]





[POVERLAY=14379763 align=bottom-left paddingBottom=64 paddingLeft=56 color=black]
[BOX family=impact size=64 lineHeight=84 marginBottom=-15 marginLeft=-3]INSIDE[/BOX][BOX family=impact size=200 lineHeight=200 marginLeft=-9]ROTWILD[/BOX][BOX family=impact size=16]WORDS AND PHOTOGRAPHY // MATT WRAGG[/BOX]
[/POVERLAY]
[PI=14379763][/PI]



Using the BOX tag with a border and margins is also a very nice effect. Though it does mean you need to use FONT tags where the new lines are a little trickier.



[POVERLAY=9911671 align=bottom-left]
[BOX padding=30 margin=30 width=none border=white color=white]
[FONT family=impact size=64 lineHeight=84 marginLeft=-3]INSIDE[/FONT]


[FONT family=impact size=200 lineHeight=92 marginLeft=-9]ROTWILD[/FONT]


[FONT family=impact size=16]WORDS AND PHOTOGRAPHY // MATT WRAGG[/FONT]
[/BOX]
[/POVERLAY]
[PI=9911671][/PI]





[POVERLAY=14439383]
[FONT family="verdana" bold size=30 color=#fff lineHeight=30 paddingTop=56 paddingLeft=32]Riding the[/FONT]
[FONT family="verdana" bold size=94 color=#fff lineHeight=100 paddingLeft=32]Morpheus Conspiracy[/FONT]
[/POVERLAY]
[PI=14439383][/PI]





Photo Width

By default photos will be a little wider than the text of an article. This looks nice and makes it possible to keep the line length short, which makes it comfortable to read. However, there are times when you want to go narrower or even wider.



Specify width=text on an image to have it be just as wide as the text.

It s only september winter can wait. Heading towards the descent to Leadville. Photo by Dan Milner

[PI=8062564 width=text][/PI]



Specify width=window on an image to have it expand all the way out to the edge of the browser window.

One flew over the Riga s nest.
Caption caption caption caption caption caption caption

[PI=9876928 align=center width=window]Caption caption caption caption caption caption caption[/PI]

It generally looks nicer if you center the caption as well






Photo Cropping

If you have a photo on Pinkbike that you'd like to embed just a part of, you can crop it just for your blog post.



Here is this photo cropped to just show the middle portion:

joey drifting a bike

[PI=9868055 cropHeightBy=60% offsetTop=25%][/PI]

To do the cropping, we have 4 attributes for the image tag: cropHeightBy, cropWidthBy, offsetTop and offsetLeft. To have access to these attributes, first remove the size attribute from a normal image tag.




These can be combined with the width attribute

joey drifting a bike

[PI=9868055 width=window cropHeightBy=60% offsetTop=25%][/PI]





"Parallax" Photos

You can add a little depth to your photos by using a faux-parallax effect on a photo. You will do this using the scrollOffsetTop and scrollOffsetLeft properties. This should be a subtle effect. Don't overdo it. I'd say at the very least never have two things moving on screen at one time.

And even though this has nothing to do with parallax, you can move the horizontally with the scroll or zoom the image as you scroll.



joey drifting a bike

[PI=9868055 width=text cropHeightBy=60% offsetTop=10% scrollOffsetTop=40%][/PI]

The way this works is as you scroll the page, the image will move from your offsetTop and offsetLeft to your scrollOffsetTop and scrollOffsetLeft.

So, in order to use "parallax" scrolling for images, you need to have cropped the image. If you haven't done that, then the layout cannot scroll the image because it would leave empty whitespace being scrolled. So, the workflow works like this: 1. crop your image, 2. offset the image to the start position, and then 3. choose the final scroll position.

You'll have to play around with the numbers to get an effect you like.




Here the image is scrolling in the opposite direction as the page, which is also a nice effect.

joey drifting a bike

[PI=9868055 width=text cropHeightBy=60% offsetTop=40% scrollOffsetTop=10%][/PI]



Horizontal "parallax" as you scroll:

joey drifting a bike

[PI=9868055 width=text cropHeightBy=60% cropWidthBy=40% offsetTop=25% offsetLeft=5% scrollOffsetLeft=35%][/PI]



Zoom-in, "ken burns" effect as you scroll:

joey drifting a bike

[PI=9868055 width=text cropHeightBy=60% offsetTop=25% scrollZoom=25%][/PI]



Zoom-out, "ken burns" effect as you scroll:

joey drifting a bike

[PI=9868055 width=text cropHeightBy=50% offsetTop=25% offsetLeft=25% cropWidthBy=50% scrollZoom=-25%][/PI]

Note: in order to zoom out, you'd have to have cropped the photo some






All Photo Features in one example

You can use all of these features at once. Here is an image made full width, cropped, with "parallax" zoom, and with an overlay.



[POVERLAY=9290413 align=bottom-center padding=16]
[BOX bold family=Verdana size=75 lineHeight=80 color=#f2f2f2]MOUNTAIN BIKING[/BOX]
[/POVERLAY]
[PI=9290413 width=window cropHeightBy=60% offsetTop=60% scrollZoom=30% scrollOffsetTop=70%][/PI]





Audio Photos

Add audio to an image, by passing in the audio attribute.

The attribute should point to the URL of the file without the extension. So if your file is named http://www.example.com/interview.mp3, then it needs to be http://example.com/interview. The reason for this is that it allows you to upload the audio file in multiple formats. You should upload an MP3 file, a AAC file (.mp4), and if you want to target Firefox users without Flash too, then you also need to upload a .OGG file. You can convert MP3s to OGG files here and convert to AAC files here.



Dry tires or cut spikes The panic that the rain started up top in the closing minutes of the race was quite literally epic. Many racers had no tear offs for what was suddenly going to be a wet one. As to tire selection--that was pure mental torture for most. The deluge promised slick conditions in the open sections of the track but the trees held off the worst of the wet in the woods... Overall keeping dry tires on was the better call for the top men for sure it was slick but the two days of sun the track received meant that the surface was slick but not gooey as a consequence cut spikes were anything but a reassuring choice as Greg Minnaar discoverd.
  Dry tires or cut spikes? In the closing minutes of the race when the rain came down the stress level in the lift station must have been just epic. Many racers had no tear offs or mudguards for what was suddenly going to be full-on wet one. As for tire selection, that was pure mental torture for most. The deluge promised slick conditions in the open sections of the track, but the trees held off the worst of the wet in the woods... Overall, keeping dry tires on was the better call for the top men; for sure it was slick, but the two days of sun the track received meant that the surface was slick, but not gooey; as a consequence, cut spikes were not the right decision.
00:00 04:21

[PI=9965398 audio=http://ev1.pinkbike.org/data/audio/fwdmusictoyourears/Greg size=h align=c]Dry tires or cut spikes? In the closing minutes of the race when the rain came down the stress level in the lift station must have been just epic. Many racers had no tear offs or mudguards for what was suddenly going to be full-on wet one. As for tire selection, that was pure mental torture for most. The deluge promised slick conditions in the open sections of the track, but the trees held off the worst of the wet in the woods... Overall, keeping dry tires on was the better call for the top men; for sure it was slick, but the two days of sun the track received meant that the surface was slick, but not gooey; as a consequence, cut spikes were not the right decision.[/PI]



Works with window width photos as well...

Dry tires or cut spikes The panic that the rain started up top in the closing minutes of the race was quite literally epic. Many racers had no tear offs for what was suddenly going to be a wet one. As to tire selection--that was pure mental torture for most. The deluge promised slick conditions in the open sections of the track but the trees held off the worst of the wet in the woods... Overall keeping dry tires on was the better call for the top men for sure it was slick but the two days of sun the track received meant that the surface was slick but not gooey as a consequence cut spikes were anything but a reassuring choice as Greg Minnaar discoverd.
Dry tires or cut spikes? In the closing minutes of the race when the rain came down the stress level in the lift station must have been just epic. Many racers had no tear offs or mudguards for what was suddenly going to be full-on wet one. As for tire selection, that was pure mental torture for most. The deluge promised slick conditions in the open sections of the track, but the trees held off the worst of the wet in the woods... Overall, keeping dry tires on was the better call for the top men; for sure it was slick, but the two days of sun the track received meant that the surface was slick, but not gooey; as a consequence, cut spikes were not the right decision.
00:00 04:21

[PI=9965398 audio=http://ev1.pinkbike.org/data/audio/fwdmusictoyourears/Greg width=window]Dry tires or cut spikes? In the closing minutes of the race when the rain came down the stress level in the lift station must have been just epic. Many racers had no tear offs or mudguards for what was suddenly going to be full-on wet one. As for tire selection, that was pure mental torture for most. The deluge promised slick conditions in the open sections of the track, but the trees held off the worst of the wet in the woods... Overall, keeping dry tires on was the better call for the top men; for sure it was slick, but the two days of sun the track received meant that the surface was slick, but not gooey; as a consequence, cut spikes were not the right decision.[/PI]





Photo sequences

Documentation forthcoming.



0% Loaded prev 1/16 next


[PSEQ delay=200 trans=none border=0 height=450 width=800 color=white size=l sequence=i:13224684|t:fade:13224684,i:13224685,i:13224686,i:13224687,i:13224689,i:13224691,i:13224692,i:13224693,i:13224695,i:13224697,i:13224698,i:13224700,i:13224701,i:13224703,i:13224704,i:13224705|d:1000]





Photo Captions

By default captions show a PB logo to the left of the caption. You can remove this by adding the nopbcaption attribute to your images.

Stephen Matthews rides through foggy mordor like trees on sumas
Caption caption caption caption caption caption caption

[PI=9845802 width=text nopbcaption]Caption caption caption caption caption caption caption[/PI]



You can mimic the look of photo captions (to, say, caption two images at once) with the PCAPTION tag.

Stephen Matthews rides through foggy mordor like trees on sumas
Brett Rheeder jumps the lower road gap and into the final jump. Mountains giving a not too terrible backdrop in Les 2 Alps.
Caption caption caption caption caption caption caption

[PCOLUMNS]
[PI=9845802 width=text][/PI]
[SPLIT]
[PI=9829837 width=text][/PI]
[/PCOLUMNS]
[PCAPTION]Caption caption caption caption caption caption caption[/PCAPTION]



Stephen Matthews rides through foggy mordor like trees on sumas
Brett Rheeder jumps the lower road gap and into the final jump. Mountains giving a not too terrible backdrop in Les 2 Alps.
Caption caption caption caption caption caption caption

[PCOLUMNS]
[PI=9845802 width=text][/PI]
[SPLIT]
[PI=9829837 width=text][/PI]
[/PCOLUMNS]
[PCAPTION align=center]Caption caption caption caption caption caption caption[/PCAPTION]





Floating Photos

If you need a photo to be inline with some text and you know its dimensions, you can use the P tag...

About the Reviewer
Stats: Age: 34 • Height: 5'11" • Inseam: 33" • Weight: 160lb • Industry affiliations / sponsors: None
Twenty-two years deep into a mountain biking addiction that began as a way to escape the suburban sprawl of Connecticut, Mike Kazimer is most at home deep the woods, carving his way down steep, technical trails. The decade he spent as a bike mechanic helped create a solid technical background to draw from when reviewing products, and his current location in the Pacific Northwest allows for easy access to the wettest, muddiest conditions imaginable.

[P=https://ep1.pinkbike.org/p4pb11876513/p4pb11876513.jpg size=135x127 align=left][/P]
[BOX size=12 lineHeight=20]
[FONT size=14 lineHeight=30 bold]About the Reviewer[/FONT]
[B]Stats:[/B] Age: 34 • Height: 5'11" • Inseam: 33" • Weight: 160lb • Industry affiliations / sponsors: None
[I]Twenty-two years deep into a mountain biking addiction that began as a way to escape the suburban sprawl of Connecticut, [L=https://www.pinkbike.com/u/mikekazimer/blog/]Mike Kazimer[/L] is most at home deep the woods, carving his way down steep, technical trails. The decade he spent as a bike mechanic helped create a solid technical background to draw from when reviewing products, and his current location in the Pacific Northwest allows for easy access to the wettest, muddiest conditions imaginable. [/I]
[/BOX]



You can put it on the right too...

About the Reviewer
Stats: Age: 34 • Height: 5'11" • Inseam: 33" • Weight: 160lb • Industry affiliations / sponsors: None
Twenty-two years deep into a mountain biking addiction that began as a way to escape the suburban sprawl of Connecticut, Mike Kazimer is most at home deep the woods, carving his way down steep, technical trails. The decade he spent as a bike mechanic helped create a solid technical background to draw from when reviewing products, and his current location in the Pacific Northwest allows for easy access to the wettest, muddiest conditions imaginable.

[P=https://ep1.pinkbike.org/p4pb11876513/p4pb11876513.jpg size=135x127 align=right][/P]
[BOX size=12 lineHeight=20]
[FONT size=14 lineHeight=30 bold]About the Reviewer[/FONT]
[B]Stats:[/B] Age: 34 • Height: 5'11" • Inseam: 33" • Weight: 160lb • Industry affiliations / sponsors: None
[I]Twenty-two years deep into a mountain biking addiction that began as a way to escape the suburban sprawl of Connecticut, [L=https://www.pinkbike.com/u/mikekazimer/blog/]Mike Kazimer[/L] is most at home deep the woods, carving his way down steep, technical trails. The decade he spent as a bike mechanic helped create a solid technical background to draw from when reviewing products, and his current location in the Pacific Northwest allows for easy access to the wettest, muddiest conditions imaginable. [/I]
[/BOX]





Videos

Views: 46,466    Faves: 615    Comments: 47


[PV=323653]



Views: 46,466    Faves: 615    Comments: 47


[PV=323653 width=text]



Views: 46,466    Faves: 615    Comments: 47


[PV=323653 width=window]



You can remove the stats and add to favorites button with the hidedetails attribute.



[PV=323653 hidedetails]





Instagram embeds

To do an Instagram embed, just pass the URL of a photo into the INSTAGRAM tag...

Not a bad view from the home office this morning. Time to head to the mountains!

A post shared by Trevor May (@canadaka) on


[INSTAGRAM=https://www.instagram.com/p/BOuxP1HAKL5/]



To omit the caption, use the nocaption attribute

A post shared by Trevor May (@canadaka) on


[INSTAGRAM=https://www.instagram.com/p/BOuxP1HAKL5/ nocaption]



By default Instagram embeds are only text width, but you can pass in media or window widths as well...

Not a bad view from the home office this morning. Time to head to the mountains!

A post shared by Trevor May (@canadaka) on


[INSTAGRAM=https://www.instagram.com/p/BOuxP1HAKL5/ width=media]



They work in columns too...

Not a bad view from the home office this morning. Time to head to the mountains!

A post shared by Trevor May (@canadaka) on

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

[PCOLUMNS]
[INSTAGRAM=https://www.instagram.com/p/BOuxP1HAKL5/]
[SPLIT]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
[/PCOLUMNS]





YouTube embeds

See the iframes section below...





Trailforks Widgets

Embed Trailforks maps & other content. The widgets can be customized using the urls below each type. It is recommended to add a link to the related Trailforks page within the article content to help with SEO.

Region Map:
https://www.trailforks.com/widgets/config/region_map/
Example (includes 2 widgets, a narrow strip with region stats and a map widget below it):


There are many other Trailforks widgets that do not have a PBcode yet, so you can use the iframe version.





iframes

To embed an iframe you need to specify the src and the width and the height from the original code as realWidth and realHeight.


[IFRAME realWidth=1024 realHeight=576 src="https://www.youtube.com/embed/sCa0_h-dTeM"]



iframes default to media width, but you can specify text or window width.



[IFRAME width=text realWidth=1024 realHeight=576 src="https://www.youtube.com/embed/sCa0_h-dTeM"]

[IFRAME width=window realWidth=1024 realHeight=576 src="https://www.youtube.com/embed/sCa0_h-dTeM"]



They work with any sort of iframe...


[IFRAME width=text realWidth=784 realHeight=175 src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FChristchurchPrk%2Fposts%2F1361136530615028&width=784&show_text=true&appId=252745294751268&height=175"]





58 Comments

  • + 23
 If you'd like to be notified of updates to this page, reply to this comment. When I add new features or update the documentation substantially, I'll comment here, and you should get a notification on your dashboard.
  • + 1
 Count me in!
  • + 1
 PB was missing those features, great to see them!
  • + 2
 I added an example to the Photo Captions section (www.pinkbike.com/u/bentomas/blog/pinkbike-blog-code.html#photo-captions) for removing the PB logo from image captions.
  • + 1
 @bentomas: Is there a way we can put our credit in the bottom corner with the PB logo, or is that only for contractors/PB publishers?
  • + 2
 @CrankedMedia-Aus: unfortunately that's just for contractors/PB publishers. It does look nice though, doesn't it?
  • + 1
 @bentomas: It does! The goal is to one day be a contractor, so hopefully I'll be able to soon!
  • + 1
 Please update me. Thanks @bentomas!
  • + 1
 Yes please
  • + 1
 Dope!
  • + 1
 Can you add: How to do 'Mentions' and how to add a 'poll' within our article?
  • + 1
 FOLLOWING!
  • + 1
 In for updates!
  • + 1
 count me in thanks my man
  • + 1
 Thumbs up!
  • + 1
 Please!
  • + 1
 here for updates
  • + 1
 thanks ¡¡¡
  • + 1
 Thanks!!!
  • + 1
 Yes, Please!
  • + 1
 Yes, please!
  • + 1
 Thanks!
  • + 1
 Update me muthalicka!
  • + 1
 good stuff!
  • + 1
 id like to be notified please
  • + 2
 @bentomas tried using the bottom right, text on photo code, but it all comes up in code on the photo. If I want to put 'Cranked Media' in large font, with 'Richo Radness' underneath like it says 'Bike Rider' under 'Radek'. How would I do this?

Thanks!
  • + 1
 I saw that you said these are more for PB writers, but I've seen some local photographers using them, so thought maybe it's available to use now?
  • + 2
 @CrankedMedia-Aus: the code examples have been updated to not use HTML but instead use PB formatting tags. I think the reason it was failing for you was that we've removed the ability to use HTML for security reasons. Try again with the new examples and let me know how it goes.
  • + 1
 @bentomas: Worked perfectly! New format of this article is great, look forward to putting it to good use!
  • + 1
 I'm trying to get the feature to work "All Photo Features in one example". I just copy and pasted the code there to start. Am I doing something wrong? It doesn't appear to work in the preview.
  • + 1
 Sorry for the very late reply, I didn't see this comment here. I'm not what the problem was, but my guess is it was probably related to which article format you had selected. It needs to be the one called "New Layout".
  • + 1
 @bentomas: I think this option of "new layout' is not available to the average user. When I click on blogs, create new blog - I don't have any options to choose from...
  • + 1
 @sexley: Hmmm... are you sure? I think you should be able to see it! When you write a new blog post, under the "Title" field, is there an "Article Format" field? If so, from the dropdown there, choose "New Layout". Let me know if you can see it!
  • + 1
 @bentomas: positive, but I was able to plead my case with Pinkbike and they upgraded my profile so that the New Layout is now an option for me..

Thank you so much for putting this blog together!!
  • + 1
 @sexley: Awesome! Glad to hear it! Yeah, I looked at your account and was thinking, boy it sure looks like he can choose the new layout...
  • + 1
 @sexley: How can you get your profile upgraded?
If it gives more blogging options, I need to get it!
  • + 1
 Cannot get instagram to embed in the forums... have even tried copy and pasting the example above is this only for blog posting?
  • + 1
 @bentomas: We will be publishing an article tomorrow and would like to use block quotes. Is that possible? Couldn't find it between the features.Thanks for your help!
  • + 1
 How can I do my blog occupy all the width of the window? Can't find how to do it.
  • + 1
 @bentomas I need to embed a quote from another PB article in a blog post for the front page. What's the code for that?
  • + 2
 This article is also useful for blog authors www.pinkbike.com/u/bentomas/blog/article-formatting.html
  • + 1
 @bentomas, in the recent Emil Johanson blog, the background of the blog was black. Am I able to do that?
  • + 1
 Also, audio photos aren't a thing anymore right?
  • + 1
 This is pretty sweet! Any info on embedding YouTube clips?
  • + 1
 Checkout the iframes section above. Basically: get the embed code from YouTube; then grab the src, width and height out of it; use those in with the IFRAME tag.
  • + 2
 So happy this exists
  • + 1
 Same - copy it before it gets taken down..
  • + 2
 Very helpful. Thx!
  • + 1
 Count me in
  • + 1
 Definitely on this list
  • + 1
 Thanks for this
  • + 1
 Me please!
  • + 1
 follow up...

Post a Comment



You must login to Pinkbike.
Don't have an account? Sign up

Join Pinkbike  Login
Copyright © 2000 - 2017. Pinkbike.com. All rights reserved.
dv56 0.080271
Mobile Version of Website