Pinkbike blog code: Media and Embedding by bentomas

Pinkbike community blogs are written by Pinkbike users for Pinkbike users. Pinkbike editors do not edit or approve the content of the blogs like the news articles of the homepage. If you feel that this blog is objectionable, please report it.

Media and Embedding

Photo Overlays
Photo Width
Photo Cropping
"Parallax" Photos
All Photo Features in one example
Audio Photos
Photo sequences
Photo Captions
Floating Photos
Other photos details
Videos
Instagram embeds
YouTube embeds
iframes
Trailforks Widgets

If you'd like to receive notifications about changes to these features, see the first comment on this article.

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

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

THE FINAL COUNTDOWN

Words & Photography // Dave Trumpore & Matthew Delorme

[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]

RETURN

TO THE

ROCKIES

[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]

FROM THE ASHES

Vallnord Wold Cup Finals

photography & words: // nathan hughes // matt delorme // dave trumpore

[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]

Paris Gore 2013 This image may not be used distributed copied printed published or displayed without the prior written permission of the Photographer Paris Gore Paris Gore Photography . Doing so without prior written permission will result in a charge of 3 three times the Photographer s customary fee for such usage.

MCGAZZA

FOREVER

1982–2016

[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]

INSIDE

ROTWILD

WORDS AND PHOTOGRAPHY // MATT WRAGG

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

Sunset superman on Budeia - Photo Audun Storsanden

INSIDE

ROTWILD

WORDS AND PHOTOGRAPHY // MATT WRAGG

[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]

Riding the
Morpheus Conspiracy

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

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:

[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

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

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

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

Horizontal "parallax" as you scroll:

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

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

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

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

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

An old trail filled with moondust gave us some pretty amazing riding and shooting conditions.

MOUNTAIN BIKING

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

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.

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]

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]

You can put URLs in captions

BENTOMAS

Developer

This is a link in my caption

BENTOMAS

Developer

My whole caption is a link

[PI=9915333]This is a [L=http://www.trailforks.com]link[/L] in my caption[/PI]

[PI=9915333][l=http://www.trailforks.com]My whole caption is a link[/l][/PI]

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

[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]

• Excellent grip in loose terrain
• Wide footprint provides plenty of traction

• Expensive
• Not the longest lasting option

[PCOLUMNS]

[P=https://ep1.pinkbike.org/p4pb12887678/p4pb12887678.jpg size=150x150 align=left][/P]

[FONT family=georgia]
• Excellent grip in loose terrain
• Wide footprint provides plenty of traction[/FONT]
[SPLIT]

[P=https://ep1.pinkbike.org/p4pb12887677/p4pb12887677.jpg size=150x150 align=left][/P]

[FONT family=georgia]
• Expensive
• Not the longest lasting option[/FONT]

[/PCOLUMNS]

You can change the url that a photo goes to when being clicked on with the href attribute. Not the order of the attributes here is not optional. They must all be in this orer.

Blurb about Trailforks here. 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.

[P=https://es.pinkbike.org/246/sprt/i/trailforks/logo_trailforks_triangle1.png size=283x71 align=right href="https://es.pinkbike.org/246/sprt/i/trailforks/logo_trailforks_triangle1.png"][/P]
[BOX size=16 lineHeight=24]Blurb about Trailforks here. 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.[/BOX]

These floating photos work very differently than normal photos, so basically none of the other features mentioned on this page will work with them. If I have not mentioned it working for floating photos, it probably does not.

Other photos details

Most of the photo features on this page DO NOT WORK if you also specify a size attribute. The size is an older way of doing things, but has been made obsolete by the width attribute. The following WILL NOT be full width.

BENTOMAS

Developer

[PI=9915333 size=l0 align=c width=window][/PI]

You can change the url that a photo goes to when being clicked on with the href attribute

BENTOMAS

Developer

Click me!

[PI=9915333 href="http://www.trailforks.com"]Click me![/PI]

Videos

The Tetons

by yeticycles

Views: 47,316 Faves: 616 Comments: 48

[PV=323653]

The Tetons

by yeticycles

Views: 47,316 Faves: 616 Comments: 48

[PV=323653 width=text]

The Tetons

by yeticycles

Views: 47,316 Faves: 616 Comments: 48

[PV=323653 width=window]

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

The Tetons

by yeticycles

[PV=323653 hidedetails]

Instagram embeds

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

link="https://www.w3.org/1999/xlink">

View this post on Instagram

A post shared by Trevor May (@canadaka)

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

To omit the caption, use the nocaption attribute

link="https://www.w3.org/1999/xlink">

View this post on Instagram

A post shared by Trevor May (@canadaka)

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

link="https://www.w3.org/1999/xlink">

View this post on Instagram

A post shared by Trevor May (@canadaka)

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

They work in columns too...

link="https://www.w3.org/1999/xlink">

View this post on Instagram

A post shared by Trevor May (@canadaka)

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

iframes

There are two ways to embed iframes, either by saying you want the iframe to have a specific aspect ratio, or by saying you want a specific height. By default, all iframes are media width, but you can specify text or window as well. Then using either the aspect ratio or the height you specified, this code will make sure the iframe looks good on all screens.

To embed a fixed aspect ratio iframe, you need to specify the src and the aspectRatio attributes.

[IFRAME aspectRatio=16:9 src="https://www.youtube.com/embed/sCa0_h-dTeM"]

You do not have to specify a typical aspect ratio, you can just use pixel dimensions as well.

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

Text width.

[IFRAME width=text aspectRatio=16:9 src="https://www.youtube.com/embed/sCa0_h-dTeM"]

Window width.

[IFRAME width=window aspectRatio=16:9 src="https://www.youtube.com/embed/sCa0_h-dTeM"]

To embed a fixed height iframe, you need to specify the src and the height attributes.

[IFRAME height=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"]

Text width

[IFRAME width=text height=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"]

Window width

[IFRAME width=window height=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"]

Both aspectRatio and height have mobile variants that you can specify as well, in case you need a different size on mobile. You still need to specify the normal versions.

[IFRAME aspectRatio=16:9 mobileAspectRatio=4:3 src="https://www.youtube.com/embed/sCa0_h-dTeM"]

[IFRAME height=175 mobileHeight=300 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"]

Trailforks Widgets

Embed Trailforks maps & other content.

The widgets can be customized using the urls below each type. DO NOT TRY AND WRITE THIS CODE BY HAND. Use the links to generate your code. Also, it is recommended to add a link to the related Trailforks page within article content to help with SEO.

Also, all the widgets here respond to the text, media, window widths.

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

[PREGIONINFO rid=1 width=text height=150px counts=1 stats=1]
[PMAPREGION rid=1 width=media height=400px maptype=trailforks trailstyle=difficulty controls=1 list=0]

Trail Map & Details:
https://www.trailforks.com/widgets/config/trail/

[PMAPTRAIL trailid=216 width=text height=300px map=1 title=1 elevation=1 photos=1 info=1]

Route:
https://www.trailforks.com/widgets/config/route/

[PMAPROUTE id=3 width=text height=505px map=1 elevation=1 trails=1 details=1 section=0]

Ridelog
https://www.trailforks.com/widgets/config/ridelog/

[PMAPRIDELOG id=252 width=text height=400px map=1 trails=1 stats=1]

Events List
https://www.trailforks.com/widgets/config/event_list/

[PEVENTS rows=5 width=text height=483px query=]

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

Report

Must Read This Week

[UPDATED] Overall Standings & Final Results from the Pietra Ligure Enduro World Cup 2023
73260 views

Spotted: Pivot's Lugged Carbon DH Bike Prototype
55002 views

First Look: 2024 Giant Glory Downhill Race Bike
43405 views

Tech Randoms: Lenzerheide DH World Cup 2023
37460 views

Noga Korem Dropped by GT & Sponsored by Commencal
33627 views

Emily Batty Announces Retirement from Professional Racing
31176 views

Pinkbike Primer: The 2023 DH World Cup Series Finally Begins at Lenzerheide
26134 views

Video: Testing the Difference Between Steel & Aluminum Frames
25672 views

138 Comments

15 0

bentomas (Feb 23, 2017 at 12:48)

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.

CrankedMedia-Aus (Feb 23, 2017 at 20:05)

Count me in!

brigand (Feb 25, 2017 at 11:41)

PB was missing those features, great to see them!

morcombemedia (Feb 26, 2017 at 17:28)

fvfd

bentomas (Feb 27, 2017 at 21:16)

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.

CrankedMedia-Aus (Feb 28, 2017 at 2:01)

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

bentomas (Feb 28, 2017 at 10:02)

@CrankedMedia-Aus: unfortunately that's just for contractors/PB publishers. It does look nice though, doesn't it?

CrankedMedia-Aus (Feb 28, 2017 at 13:08)

@bentomas: It does! The goal is to one day be a contractor, so hopefully I'll be able to soon!

RichardCunningham (Feb 28, 2017 at 22:16)

yes

evergreenmountainbikealliance (Mar 9, 2017 at 12:51)

Please update me. Thanks @bentomas!

sexley (Mar 10, 2017 at 19:33)

Yes please

Oxburger (Mar 13, 2017 at 13:04)

Dope!

sexley (Mar 17, 2017 at 12:35)

Can you add: How to do 'Mentions' and how to add a 'poll' within our article?

canadianenduro (Mar 29, 2017 at 19:43)

FOLLOWING!

cmjohnson (Mar 30, 2017 at 7:33)

In for updates!

epsteinisalive (Apr 4, 2017 at 21:48)

count me in thanks my man

Flo356 (Apr 8, 2017 at 6:44)

Thumbs up!

tris400d (Apr 18, 2017 at 9:52)

Please!

l8igz (Apr 28, 2017 at 19:08)

here for updates

haitman (May 9, 2017 at 17:50)

thanks ¡¡¡

nswitalski (May 10, 2017 at 5:52)

Thanks!!!

JacobODonoghuePrice (May 23, 2017 at 20:09)

following

ChristopherSutcliffe (May 25, 2017 at 11:47)

Yes, Please!

FineLine-Media (May 25, 2017 at 15:18)

Yes, please!

ajaneta (Jun 6, 2017 at 14:42)

Thanks!

PeterWojnar (Jun 7, 2017 at 8:43)

Update me muthalicka!

lunatyk (Aug 1, 2017 at 23:02)

good stuff!

Alucas95 (Aug 15, 2017 at 14:55)

id like to be notified please

david-hill (Sep 20, 2017 at 13:11)

pick me!

bentomas (Nov 10, 2017 at 13:58)

A few updates today:

I added a section titled "Other Photo Details" with a few things to keep in mind.
We've made the iframe embedding more powerful, so check out the docs for that.
Made it possible to add links to photo captions.

hellequine (Nov 11, 2017 at 8:50)

Count me in too.

elyari (Nov 12, 2017 at 17:35)

ok...done

gerrycreighton (Nov 13, 2017 at 5:49)

Great tips to create interesting posts.

leelau (Nov 29, 2017 at 18:54)

subscribed

garrettstories (Dec 7, 2017 at 14:59)

following

Hwulex (Dec 7, 2017 at 16:18)

Subscribe.

mossa (Dec 13, 2017 at 4:33)

@Hwulex: Yes please

ANVILfilms (Jan 11, 2018 at 16:48)

Yes please

dhmatt123 (Jan 16, 2018 at 13:34)

YES YES YES, THANKS

Evolution13 (Jan 22, 2018 at 7:07)

*keeping me updated*

almondworkshop (Jan 28, 2018 at 8:19)

Yes please

ertsi (Mar 2, 2018 at 12:06)

Subscribing to updates

oatkinso (Mar 14, 2018 at 3:06)

Count me in for updates, cheers.

sarahmoore Mod (Apr 30, 2018 at 10:32)

Yes please!

llbikes (Jun 18, 2018 at 3:35)

sick

mauudeavila (Jun 26, 2018 at 16:51)

thanks!

zepmtbcamps (Aug 23, 2018 at 13:34)

Thanks!

Glenn8888 (Oct 9, 2018 at 0:02)

Yes please

projectnortheast (Oct 21, 2018 at 11:30)

andrejdekleva (Oct 28, 2018 at 10:50)

Check

canadianenduro (Dec 6, 2018 at 13:51)

Uhhh huhhhhh!

SlicingAir (Dec 12, 2018 at 8:43)

Count me in

tboothmtb (Mar 3, 2019 at 22:11)

Yeet

paulfisson (Mar 21, 2019 at 13:08)

Yep

trailmex (Jun 16, 2019 at 13:14)

THanks !!

bot-fly (Jul 5, 2019 at 11:51)

brothermendiarys (Mar 29, 2020 at 20:16)

im in

CharlieEdis (Jul 19, 2020 at 6:05)

Subbed!

SHREDWORX (Mar 8, 2021 at 8:18)

Update me

as-capture (Mar 8, 2021 at 15:10)

following

konafranksongoy (Jun 20, 2021 at 9:55)

Thanks for the updates!

antonios-charalambous (Oct 6, 2021 at 10:18)

Count me in too! Thank you in advance!

rileygardner (Oct 28, 2021 at 14:38)

updates?

lmfilms (Dec 11, 2021 at 16:49)

Updates would be sweet!

bipolarexpress (Jan 6, 2022 at 16:53)

@lmfilms: I'll have two number 9s, a number 9 large, a number 6 with extra dip, a number 7, two number 45s, one with cheese, and a large soda.

Tannerstolt (Jan 6, 2022 at 16:56)

@bipolarexpress: "kilo tray scopin' us out"

DoubleCrownAddict (May 28, 2022 at 6:16)

Update me please.

eight-n-burly (Jul 29, 2022 at 12:19)

Please

stevemokan (Feb 1, 2018 at 18:50)

@bentomas - I'm trying to post a blog with full-width images, but it's not letting me. Do you know if I have to be a certain level "user"? Here's the code I have inserted in the blog: [PI=15576011 align=center width=window][/PI]

Right now it shows as standard width... any idea of what I have to do?

formidable-industry (Jun 1, 2018 at 2:02)

same for me so frustrating!!

CrankedMedia-Aus (Feb 16, 2017 at 1:17)

@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!

CrankedMedia-Aus (Feb 16, 2017 at 1:41)

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?

bentomas (Feb 23, 2017 at 11:39)

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

CrankedMedia-Aus (Feb 23, 2017 at 20:04)

@bentomas: Worked perfectly! New format of this article is great, look forward to putting it to good use!

anyexcusetoride (Dec 9, 2017 at 10:52)

So am i right in saying us mere mortals cannot use the full width photos/videos feature? It is reserved for news/pinkbike staff articles? Trying to use it simply copy and pasting the code above but subbing in links to my photos or videos.

stevemokan (Feb 2, 2018 at 7:06)

Did you ever find out the answer?

anyexcusetoride (Feb 3, 2018 at 3:21)

@stevemokan: i'm afraid not! I got the impression here was the place to ask and no one has ever replied... Can anyone help? @bentomas maybe?

sexley (Feb 5, 2018 at 11:35)

How to add quotes:

[QUOTE author="Shannon Fox, Teacher"]It was such an amazing gift that Pinkbike Share the ride program gave to Exshaw School. I now have the ability to run a bike program within the physical education program. Some of the kids here don’t own bike or have never even ridden one and are so excited to learn. I now get to share my passion of biking with them and hopefully show them the health benefits, freedom and joy of riding a bike. Thank you to Pinkbike and all of the sponsors that contributed to make this happen.[/QUOTE]

TransitionBikeCompany (Sep 12, 2017 at 10:21)

Hey guys, trying to get the "width=window" to work for photos, but it doesn't seem to apply.

Here is the code "[PI=15158688 size=l0 align=c width=window][/PI]"

Can you tell what's going on?

Thank you!

david-hill (Sep 20, 2017 at 13:12)

I'm having the same issue, @bentomas any suggestions?

Equally - are we able to put URL links into captions? The standard approach doesn't seem to work.

bentomas (Nov 10, 2017 at 13:59)

@TransitionBikeCompany your code did not work because of the size attribute. See the "Other Photo details" section above for details. Also some of the formatting features are only available on news pages though, so I don't know if you'll have access to the full width feature. You'd have to talk to an admin to get that figured out.

bentomas (Nov 10, 2017 at 14:00)

@david-hill: I added the ability to put URL links into captions today.

VTwintips (Aug 22, 2016 at 18:13)

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.

bentomas (Feb 8, 2017 at 12:21)

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

sexley (Feb 16, 2017 at 16:35)

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

bentomas (Feb 23, 2017 at 12:55)

@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!

sexley (Feb 23, 2017 at 14:18)

@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!!

bentomas (Feb 23, 2017 at 16:27)

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

CrankedMedia-Aus (Feb 23, 2017 at 20:04)

@sexley: How can you get your profile upgraded?
If it gives more blogging options, I need to get it!

bentomas (Nov 10, 2017 at 14:00)

@CrankedMedia-Aus: I'm not sure what the process is to get your profile updated, I'm out of the loop on that.

stevemokan (Feb 2, 2018 at 7:07)

@sexley: Mind PM'ing me with info on how to become an enhanced user so I can publish blogs with full-width photos and enhanced images?

CrankedMedia-Aus (Feb 4, 2018 at 19:13)

@stevemokan: Hey Steve, I tried getting mine upgraded early last year. The deal is once you start contributing a lot of content and get VOD's/POD's etc, you'll be considered to become a 'PLUS' member. Pretty sure that's how it all works!

VTwintips (Feb 4, 2018 at 19:23)

@CrankedMedia-Aus: It was like 20 bucks a year a while ago...

CrankedMedia-Aus (Feb 5, 2018 at 1:46)

@VTwintips: Yeah and you still can! Not sure if doing so actually allows for the ability to do all the special coding features however. @bentomas do you know if purchasing Pinkbike Plus gives us full access to the coding/layouts?

VTwintips (Feb 5, 2018 at 10:22)

@CrankedMedia-Aus: ok so its actually 50 bucks per year.

midnowhere (Dec 10, 2018 at 10:38)

Hi. When embedding a YouTube video the embed is there and the size comes up fine but it says, "youtube.com refused to connect" do you have any idea how I would fix this? Cheers.

existenz (Dec 12, 2018 at 10:27)

You need to use the Youtube embed URL instead in the src, for example: www.youtube.com/embed/Fpva_uxuYBg

bluntosaurusrex (Apr 17, 2017 at 10:48)

Cannot get instagram to embed in the forums... have even tried copy and pasting the example above is this only for blog posting?

bentomas (Nov 10, 2017 at 13:10)

I'm not sure what features are available in forums. Maybe try asking @existenz about that.

FineLine-Media (May 25, 2017 at 15:23)

@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!

bentomas (Nov 10, 2017 at 13:03)

Sorry for the very late reply, need to check these comments more often! See this article for quotes: www.pinkbike.com/u/bentomas/blog/article-formatting.html Some of the formatting features are only available on news pages though, so I don't know if you'll have access to all those features.

FineLine-Media (Dec 9, 2017 at 17:02)

@bentomas: Found it, thanks for the help Bentomas!✌️

Bizznasty (Apr 14, 2022 at 12:35)

Where are all the old blog instructions? I am trying to add 3 photos next to each other and can't figure out the coding for that.

CrankedMedia-Aus (May 4, 2017 at 16:59)

@bentomas, in the recent Emil Johanson blog, the background of the blog was black. Am I able to do that?

bentomas (Nov 10, 2017 at 13:05)

Sorry for the very late reply, need to check these comments more often! See the "sections" section in this article for changing the background color: www.pinkbike.com/u/bentomas/blog/article-formatting.html Some of the formatting features are only available on news pages though, so I don't know if you'll have access to all those features.

leelau (Jun 20, 2017 at 21:16)

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

leelau (Jun 25, 2017 at 9:17)

This article is also useful for blog authors www.pinkbike.com/u/bentomas/blog/article-formatting.html

bentomas (Nov 10, 2017 at 14:03)

Sorry for the late reply, looks like you found out how to do it. A quick note about that other page for other users, some of those formatting features are only available on news pages though, so you might not have access to all those features.

elyari (Jul 4, 2017 at 0:51)

How can I do my blog occupy all the width of the window? Can't find how to do it.

bentomas (Nov 10, 2017 at 13:05)

You cannot make the text take up the full width of the window, only things like photos, videos and iframes.

as-capture (Mar 8, 2021 at 15:12)

can anyone post window width pictures yet? I keep getting and question mark in a small blue box when I try.

dbudd (Aug 9, 2016 at 15:35)

So happy this exists

sexley (Feb 16, 2017 at 16:35)

Same - copy it before it gets taken down..

VTwintips (Aug 24, 2016 at 17:28)

Also, audio photos aren't a thing anymore right?

bentomas (Nov 10, 2017 at 13:06)

There is an example of an audio photo on this page.

bkxc (Jan 23, 2017 at 12:04)

This is pretty sweet! Any info on embedding YouTube clips?

bentomas (Feb 23, 2017 at 13:06)

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.

IONbike (Mar 14, 2017 at 6:06)

Very helpful. Thx!

pbcreative (Sep 11, 2017 at 16:33)

Keep me in the loop, por favor.

bentomas (Nov 10, 2017 at 13:07)

If you want updates to this, you need to comment on the first comment sorted by score. The Pinkbike commenting system only notifies of replies.

ilmarki (Aug 3, 2021 at 11:09)

sounds cool to me. I'm in.

me-at (Mar 10, 2017 at 10:14)

Definitely on this list

bentomas (Nov 10, 2017 at 13:07)