Geni's Wikitext now supports image formatting

Started by Mike Stangel on Thursday, August 27, 2015
Problem with this page?

Participants:

Showing 1-30 of 95 posts

We've enhanced our wikitext code to support Wikipedia's "Extended Image Syntax" -- meaning profile "About Me" biographies and project descriptions can now place frames and captions on images, float them left or right, and make the images (and captions) links. Examples for how to use these features can be found by clicking the "formatting help" link at the top-right of the wikitext input box, or you can view it as a stand-alone page here: http://www.geni.com/help/wikitext

In short, you could previously insert an image using double curly braces:

{{//example.com/path/image.jpg}}

but now you can use the verical bar separator after the image path to add various options:

{{//example.com/path/image.jpg|border}}
{{//example.com/path/image.jpg|frame|Caption Text}}
{{//example.com/path/image.jpg|right}} (or left, center)
{{//example.com/path/image.jpg|150px}} sets width, height scales
{{//example.com/path/image.jpg|150x100px}} sets width and height
{{//example.com/path/image.jpg|x100px}} sets height, width scales
{{//example.com/path/image.jpg|alt=My Image}}
{{//example.com/path/image.jpg|link=//example.com}}

Note that if you specify a link and caption text, both the image and the caption text will become links. Please post here if you encounter any difficulty, and special thanks to curators Private User and Dimitri Gazan for encouraging this development.

Woohoo! Thanks mike!

Mike Stangel,

Thanks for adding them.

A couple notes for Dimitri, who has been exploring using images extensively in project descriptions:

1. I added a width parameter to the big red image atop http://www.geni.com/project-26658 because the new padding around images (3 pixels on each side) caused it to wrap to a new line. You'll see this when you edit the project as:

{{//media.geni.com/p13/90/15/0c/ab/5344483e208ea328/head_banner_left_of_profile_pic_large.jpg?hash=4ac66026ac7e192f5445ac2e1fa685284f2f759826b6fcaf89180d2f10a9daad.1764489599|440px}}

2. Now that images support captions and links, you might want to format your table hosts like so:

Your table host: {{//media.geni.com/p13/17/e1/57/9d/5344483dd79dce39/profile_pic_small.jpg?hash=839c55e3b953ab95054eda892c84b961552703a8ffef68fda7b78c8fecaade03.1764489599|frame|link=//www(dot)geni(dot)com/people/Dimitri-Gazan/6000000000411210894|Dimitri Gazan}}

Mike, thanks again! So excited to play around with this. Would you mind increasing the image padding/margin to 10px? Right not I think it's at 3 or 4px.

Also, while you're mucking about, any chance you can enable
for single forced line breaks? =)

(special request)

Any chance simple instructions / generic images to copy & paste can be added to the WickedWiki / Unicodes etc projects?

Thanks much.

WOW...! Speedy Mike Stangel! You announced this,..what.. 24 hrs ago? Fantastic!

Tommorrow I will go have a look at all the new magic!!
Private User, talk to you soon and discuss the new toys :)

Erica Howton, if Wicked Wicki was understandable for you, I will soon make an effort to translate Mike's stuff into something you hopefully can understand to. At all times you can pm me if you get stuck with this lay-out things.

Mike Stangel, having some overlapping issues, which I guess should should have guessed with float:left.
might fix it.
http://www.geni.com/projects/Circus-people/14485

Or a clear:left on float:left on images might do.

Private User, Mike Stangel, I've just launched a testing ground project:

http://www.geni.com/projects/Playground-for-Wiki-ds/27364

Great job, thanks Mike.

Between the first and second image, it suddenly jumps 1/3 upwards:

{{//media.geni.com/p13/96/2a/ab/95/5344483e2090964b/geni_s_project_concept_plaza_profile_pic_medium.jpg?hash=729e039ecf7ce11d3c070b1e050e3092d99cde66c27a4bbb7764c4af6f7b403f.1764489599|border}} {{//media.geni.com/p13/96/2a/ab/95/5344483e2090964b/geni_s_project_concept_plaza_profile_pic_medium.jpg?hash=729e039ecf7ce11d3c070b1e050e3092d99cde66c27a4bbb7764c4af6f7b403f.1764489599|frame|Mondriaan}} {{//media.geni.com/p13/96/2a/ab/95/5344483e2090964b/geni_s_project_concept_plaza_profile_pic_medium.jpg?hash=729e039ecf7ce11d3c070b1e050e3092d99cde66c27a4bbb7764c4af6f7b403f.1764489599|Mondriaan}}

Any chance that pre-formatted text described in http://www.geni.com/help/wikitext might start working?

Today newlines are replaced by a space, - ignoring any pre-formatted content.

The 'center' function doesn't seem to work:

{{//media.geni.com/p13/96/2a/ab/95/5344483e2090964b/geni_s_project_concept_plaza_profile_pic_medium.jpg?hash=729e039ecf7ce11d3c070b1e050e3092d99cde66c27a4bbb7764c4af6f7b403f.1764489599|center}}

Scaling an image, larger than original is loss in quality.
Works perfect for making it the image smaller.

It is technically impossible to get more details out of an image by zooming it up from the original size. That only happens in movies and on TV, like CSI ;-)

And I keep on buying them stronger pair of glasses each year, and now I know why LOL!!!!

I've added support for line breaks (
-- note the trailing slash, Private User, per Wikipedia's format) as well as horizontal rules (between 4 and 25 dashes, e.g. ----). I've added both of these as buttons on the wikitext toolbar, as well as a button for images.

Victar I chose the 3px padding to match Wikipedia. For now, if you need more I'd suggest editing your images to add some padding within the image itself. I'll give some thought to adding a "padding=10px" attribute even though it's non-standard.

I'll address the other problems posted here in a few hours.

I was hoping and praying, but didn't dare ask for all the Erica Howton's out there, but you actually did it, Mike Stangel!!!

Fantastic!!!

Already did some pimping on the Project Concept Plaza with the new tools today:

http://www.geni.com/projects/Geni-s-Project-Concept-Plaza/26658

Just a thought, but a really important one, I feel.

.. if we had the ability to create an internal link, it would make projects with huge lists far more accessible.

Projects like the International Places Project Index would be welcoming this dearly

Ground
eaking changes here, Mike Stangel! They really are! :)

Thanks for the
support! It fixes my overlap issue.

Strange that the default is only 3px. If you look at Wiki articles, the spacing is much larger. I wonder if that padding is coming from the <p>. *scratches his head*

I would be crazy to ask for span support, huh? ;-)
<span style="font-size:88%; line-height: 1.3em;">xxx</span>
https://en.wikipedia.org/wiki/Wikipedia:Advanced_text_formatting#Re...

Also, maybe instead of 10px, it could be 1em.

Using |left on images causes indents if the text in the right column does not fill up the space to the right.
Example: http://www.geni.com/projects/Hvem-tror-du-at-du-er/1263

That's (part of) why I asked for
.
http://www.geni.com/projects/Circus-people/14485

But yes, I agree with Brox and that <br clear="all"/> would be nice to have as well, so we don't have to use multiple
each time.

Dimitri Gazan I'm not sure what you're requesting with regards to the internal link? Why not just create it the same as an external link?

Speaking of which, I forgot to mention that I also altered the link code to open non-Geni links in a new tab / window. Geni links will continue to open in the same window.

Private User I'm still considering your last 2 requests. :-)

And here's another example for the awesome tools, already implemented:

http://www.geni.com/projects/Geni-s-Artists-Plaza/26929

Showing 1-30 of 95 posts

Create a free account or login to participate in this discussion