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
8/27/2015 at 2:08 PM

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.

Private User
8/27/2015 at 2:12 PM

Woohoo! Thanks mike!

8/27/2015 at 2:15 PM

Mike Stangel,

Thanks for adding them.

8/27/2015 at 2:15 PM

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:

{{//photos.geni.com/p13/90/15/0c/ab/5344483e208ea328/head_banner_left_of_profile_pic_large.jpg|440px}}

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

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

Private User
8/27/2015 at 2:22 PM

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.

Private User
8/27/2015 at 2:30 PM

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

8/27/2015 at 2:31 PM

(special request)

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

Thanks much.

8/27/2015 at 4:19 PM

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.

Private User
8/27/2015 at 4:21 PM

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

Private User
8/27/2015 at 4:44 PM

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

8/28/2015 at 12:59 AM

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.

8/28/2015 at 3:28 AM

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

{{//photos.geni.com/p13/96/2a/ab/95/5344483e2090964b/geni_s_project_concept_plaza_profile_pic_medium.jpg|border}} {{//photos.geni.com/p13/96/2a/ab/95/5344483e2090964b/geni_s_project_concept_plaza_profile_pic_medium.jpg|frame|Mondriaan}} {{//photos.geni.com/p13/96/2a/ab/95/5344483e2090964b/geni_s_project_concept_plaza_profile_pic_medium.jpg|Mondriaan}}

Private User
8/28/2015 at 4:04 AM

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.

8/28/2015 at 4:54 AM

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

{{//photos.geni.com/p13/96/2a/ab/95/5344483e2090964b/geni_s_project_concept_plaza_profile_pic_medium.jpg|center}}

8/28/2015 at 5:05 AM

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

Private User
8/28/2015 at 5:11 AM

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

8/28/2015 at 5:24 AM

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

8/28/2015 at 11:41 AM

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.

8/28/2015 at 12:01 PM

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

8/28/2015 at 12:02 PM

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

8/28/2015 at 12:18 PM

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

8/28/2015 at 12:35 PM

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

Private User
8/28/2015 at 12:53 PM

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

Private User
8/28/2015 at 1:55 PM

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

Private User
8/28/2015 at 2:40 PM

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

Private User
8/28/2015 at 2:43 PM

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

Private User
8/28/2015 at 3:04 PM

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.

8/28/2015 at 3:07 PM

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

8/28/2015 at 3:11 PM

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