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]



You can put URLs in captions

Cam Zink at the 2012 Crankworx in Whistler.
BENTOMAS
Developer
This is a link in my caption


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

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]





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


[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


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





Videos

Views: 46,542    Faves: 615    Comments: 47


[PV=323653]



Views: 46,542    Faves: 615    Comments: 47


[PV=323653 width=text]



Views: 46,542    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...


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


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



They work in columns too...

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]





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





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





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





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




94 Comments

  • + 31
 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
  • + 1
 pick me!
  • + 1
 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.
  • + 1
 Count me in too.
  • + 1
 ok...done
  • + 1
 Great tips to create interesting posts.
  • + 1
 subscribed
  • + 1
 following
  • + 1
 Subscribe.
  • + 1
 @Hwulex: Yes please
  • + 1
 Yes please
  • + 1
 YES YES YES, THANKS
  • + 1
 *keeping me updated*
  • + 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
 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.
  • + 2
 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!
  • + 1
 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.
  • + 1
 @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.
  • + 1
 @david-hill: I added the ability to put URL links into captions today.
  • + 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
 @CrankedMedia-Aus: I'm not sure what the process is to get your profile updated, I'm out of the loop on that.
  • + 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!
  • + 2
 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.
  • + 1
 @bentomas: Found it, thanks for the help Bentomas!✌️
  • + 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
 I'm not sure what features are available in forums. Maybe try asking @existenz about that.
  • + 1
 @bentomas, in the recent Emil Johanson blog, the background of the blog was black. Am I able to do that?
  • + 1
 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.
  • + 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
 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.
  • + 1
 How can I do my blog occupy all the width of the window? Can't find how to do it.
  • + 1
 You cannot make the text take up the full width of the window, only things like photos, videos and iframes.
  • + 1
 Keep me in the loop, por favor.
  • + 1
 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.
  • + 2
 Very helpful. Thx!
  • + 2
 So happy this exists
  • + 1
 Same - copy it before it gets taken down..
  • + 1
 Also, audio photos aren't a thing anymore right?
  • + 1
 There is an example of an audio photo on this page.
  • + 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.
  • + 1
 If you want updates to this post, you need to comment on the first comment sorted by score. The Pinkbike commenting system only notifies of replies.
  • + 1
 Count me in as well!
  • + 1
 If you want updates to this post, you need to comment on the first comment sorted by score. The Pinkbike commenting system only notifies of replies.
  • + 1
 @bentomas: Thnx. Will do
  • + 1
 ....
  • + 1
 Me please!
  • + 1
 If you want updates to this post, you need to comment on the first comment sorted by score. The Pinkbike commenting system only notifies of replies.
  • + 1
 Definitely on this list
  • + 1
 If you want updates to this post, you need to comment on the first comment sorted by score. The Pinkbike commenting system only notifies of replies.
  • + 1
 Thanks for this
  • + 1
 Count me in
  • + 1
 If you want updates to this post, you need to comment on the first comment sorted by score. The Pinkbike commenting system only notifies of replies.
  • + 1
 follow up...
  • + 1
 If you want updates to this post, you need to comment on the first comment sorted by score. The Pinkbike commenting system only notifies of replies.

Post a Comment



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

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