Page MenuHomePhabricator

each documentation page requires an image for previews
Closed, ResolvedPublic

Description

Purpose

  • for the preview box when posting a Whonix website link to the forums
  • for the preview images when posting a Whonlx website link to social media (mostly facebook)

Image Sizes

As per ideal-image-sizes-social-media-posts and recent successful test results.


How

In the wiki markup, below

{{Header}}

We need something like this:

{{#seo:
|description=Using a Tor Controller with Whonix. Arm. Vidalia. Change your Tor circuit. Monitor Tor.
|og:image=https://www.whonix.org/w/images/5/54/Screenshot_arm_page1_cropped.png
}}

(The description appears as info text in search engine results below the page title. It can be anything and should be an informative summary. - Most pages should already have it.)

Look through existing files:
https://www.whonix.org/wiki/Special:NewFiles

If we can reuse some, then we don't need new ones.

Or upload new suitable screnshots. Something that works as an illustrative image. Upload it.

Go to the image link. For example https://www.whonix.org/wiki/File:Tux.png. Don't use https://www.whonix.org/wiki/File:Tux.png directly! Won't work. Click on the image until you get a full size one, example: https://www.whonix.org/w/images/a/af/Tux.png.

The images does not have necessarily to be added to that wiki page. However, when it makes sense, then now is a good time to have at least one [illustrative] image [or sceenshot - if applicable] per documentation wiki page.

For simple cases of image resizing we can use mediawiki. Go to https://www.whonix.org/wiki/Dev/ImageResize. Add images to that page. Example:

[[File:Virtualbox_logo.png]]

[[File:Virtualbox_logo.png|470px]]

[[File:Virtualbox_logo.png|156px]]

Save. Mediawiki then will automatically created "thumbnails". Right click on the smaller image -> Copy Image Location. Example result: https://www.whonix.org/w/images/thumb/d/d5/Virtualbox_logo.png/156px-Virtualbox_logo.png.

Details

Impact
Normal

Event Timeline

Patrick created this task.Dec 12 2015, 7:51 PM
Patrick raised the priority of this task from to Normal.
Patrick updated the task description. (Show Details)
Patrick added a project: user documentation.
Patrick set Impact to Normal.
Patrick added subscribers: Patrick, TNTBOMBOM.

well u can say i understand the general concept of changing the images sizes.

so u would like to do that for all the current images atm ? or the new uploaded one ?

also not sure how can confirm that the image going to fit for this size or that size , essential visual result needed to c the effect on facebook or twitter ..etc (preview). or im missing something?

TNTBOMBOM (TNT BOM BOM):

so u would like to do that for all the current images atm ? or the new uploaded one ?

Just for the images we will use as og:image.

also not sure how can confirm that the image going to fit for this size or that size , essential visual result needed to c the effect on facebook or twitter ..etc (preview). or im missing something?

Gimp can show image sizes. And also resize.

You can check it by trying it out. But it would require being logged
into facebook. Post the link on your wall. (Perhaps with setting to just
show me to prevent spamming your wall.) See how it looks. Normally, you
don't even have to post it - because the preview will already show how
they would render the image.

There is also the facebook debugger.

https://developers.facebook.com/tools/debug/

  • Perhaps that thing has some bugs itself also. Sometimes you need to

press the "go" button (the debug button) (or the fetch new scrap
information button) multiple times. On the first run it shows a false
positive error.

  • The big preview on the facebook debugger may look messed up. (Image

out of visible area a bit.) But once you click "See this in the share
dialog.", it should look normal.

  • not sure that debugger will work for your (related to who the facebook

"app" created)

You can also test the image preview by pasting a link to a Whonix forum
post. (Create a test thread.)

For twitter, not sure that's worth it at this time. We would need
this... Example:

There is a twitter card preview tester here:

https://cards-dev.twitter.com/validator

But since twitter cards are not expanded by default in most cases - I am
not sure it's worth the work involved. The card only auto expands for
super popular tweets or if we bought twitter advertisements. (Not sure
that's worth any money.)

From
https://twittercommunity.com/t/what-is-the-optimum-size-for-the-image-on-a-summary-card-with-large-image/22251/4
I learned, that 600 x 321
(1.867:1 ratio)
is the optimal image size.

Try first how it looks with the two example wiki links that are already
working with preview images.

Gimp can show image sizes. And also resize.
You can check it by trying it out. But it would require being logged
into facebook. Post the link on your wall. (Perhaps with setting to just
show me to prevent spamming your wall.) See how it looks. Normally, you
don't even have to post it - because the preview will already show how
they would render the image.

hmm that requires two things i dont have:-

Gimp knowledge & Facebook account

Gimp way too complex than shutter or paint, need month or more to know the essential right basics of it. this is not the big issue for me.

but Facebook account , thats really an issue, as u know now facebook requires a real mobile number in order to have an account. spent lot of time trying to register and skipping the mobile number but it seems no hope after all...

if u know any good skipping method or having an account then its good to have it.

Resizing images with gimp is simple. Does not require a month to learn.

But if you know other tools than can do resizing, that is fine also.

I don't think there are facebook account skipping possibilities. But the
testing is not super important. Once you have one or two images done, I
can test them. No need to test all of them. Once the image size is
sorted out, it will work.

good then , so just to get everything right:-

now i go to the documentation link:- https://www.whonix.org/wiki/Documentation

and each topic which is contain photos inside it , i will choose the best one (if there is more than one) inside the topic and resize the image to 158x158 and add it in the top of the page with this command:-

{{#seo:

description= xxxxxx (describing the topic content)
og:image=https://www.whonix.org/w/images

XXXXX (name the image).png
}}

right ? if im missing something pls add/correct.

Do not add the name of the image to description=. If description= exists
and looks good, no need to modify.

Try to resize to 470xsomething first.

Please do it for one page first. Then we'll see.

check:- https://www.whonix.org/wiki/The_World_Wide_Web_And_Your_Privacy

hmm i dunno if it worked or not but just check on it.

Need '='. Not ':'. Please use copy and paste.

Example:

Won't work with files on your local disk such as:

/home/user/.tb/tor-browser/Browser/Downloads/rsz_google-chart.png

Needs to be links linking to whonix.org. Example:

https://www.whonix.org/w/images/5/54/Screenshot_arm_page1_cropped.png

TNTBOMBOM added a comment.EditedDec 26 2015, 4:39 AM

aha ok , but it seems that u cant upload photo from qubes-whonix to the wiki ? i have tried many ways it either stuck on the upload (always whatever i do) or doesnt upload the photo at all. i should try then from debian environment.

trying to upload the image here:-

https://www.whonix.org/wiki/Dev/ImageResize

Error on whonix.org server. Now fixed. Image upload should work now as
before. "Drop files here" exists again.

Btw I don't think you can do it all in one step. You first need to "Drop
files here", then find the direct link to the image, then edit the wiki.

TNTBOMBOM added a comment.EditedDec 26 2015, 3:55 PM

yeah i know , its a little time consuming but ok np with that.

check now:-

{{Header}}
{{#seo:
|description=Anonymity Online. Privacy Online.
|og:image=https://www.whonix.org/w/images/3/35/Rsz_google-chart.png
}}

https://www.whonix.org/wiki/The_World_Wide_Web_And_Your_Privacy

TNTBOMBOM (TNT BOM BOM):

https://www.whonix.org/wiki/The_World_Wide_Web_And_Your_Privacy

Looks very good! Even got the big preview!

Please change a few more sites, and I'll check them. Then we see if this
has become a flawless process.

great then , i will change 5 to 10 sites tonight and i will put the links here and then check.

TNTBOMBOM added a comment.EditedDec 29 2015, 6:33 AM

can u check if u can have the place where can u upload the photo:-
https://www.whonix.org/wiki/Dev/ImageResize
the place where i can upload my photo doesnt show up , i have turned off noscript but it seems the page still acting as if i turning on the noscript. happening with u ?

worked now , i dunno but Tor browser acting strangely today

also what is this link about ? can we use it for the same purpose ?

https://www.whonix.org/wiki/Special:Upload

This comment was removed by TNTBOMBOM.

check those:-

1- https://www.whonix.org/wiki/Data_Collection_Techniques

2- https://www.whonix.org/wiki/Warning

actually the problem that i have mentioned about disappearing of the upload field even if u turn off the noscript is still happening. and i dunno is it something from TBB or mediawiki or ..etc.

so i couldnt upload more than these photos nor i do know what is the problem or how to solve it.

also what is this link about ? can we use it for the same purpose ?
https://www.whonix.org/wiki/Special:Upload

Yes.

That interfaces with the same internal mediawiki functions. Just it's a different interface. Using that or the drop image area has the same effect.

actually the problem that i have mentioned about disappearing of the upload field even if u turn off the noscript is still happening. and i dunno is it something from TBB or mediawiki or ..etc.

Does it with with non-TBB? With Firefox? If yes, then it must be a TBB issue.

check those:-

1- https://www.whonix.org/wiki/Data_Collection_Techniques

2- https://www.whonix.org/wiki/Warning

Looks good with small preview.

it seems that the issue from TBB , see here:-

so i will make the rest from firefox only , also i knew now how to move screenshots from dom0 to whonix ( it is hard one but at least i knew how until qubes provide the good way of transferring things).

Yes, the files drop in mediawiki does not work in TBB 5.5 anymore for
some reason.

i think it is not just TBB , but also "noscript". try to disable it and see.

im using firefox , and i had the same issue now.

i think i have finished all the documentation links.

check them , and tell me if u want to change something and/or i have forgot any link.

Thanks a lot! Quite a lot work has been done already.

There are still a lot pages missing. If you go to https://www.whonix.org/wiki/Documentation ...

If you want to work on this some more, please go through these links one by one.

uw :)

yeah why not , but these links dont have photos inside so how im going to add photos? or u mean i choose random photo fitting the subject and try to put it inside them ? like what we did witha logos?

show me the way and im on for it

Yes, coming up with some illustrative image that fits the subject.

That image does not need to be on that page, but if it's useful to add
it there, please do so.

aha ok perfect , should i care about is this image with X license or Z license (like with logos)? or with images im free to use anyone i see it good to fit the subject ?

and r we going to open a subject for it inside the forum ?

TNTBOMBOM (TNT BOM BOM):

aha ok perfect , should i care about is this image with X license or Z license (like with logos)? or with images im free to use anyone i see it good to fit the subject ?

Licensing always matters unfortunately.

and r we going to open a subject for it inside the forum ?

Please do.

There is a problem. File names that contain "spaces" are not allowed. _ is considered a space.

For example https://www.whonix.org/wiki/File:Invisible-13955_640.jpg is broken.

How to fix:

Go to https://www.whonix.org/wiki/File:Invisible-13955_640.jpg

Press action -> move

Replace the space with let's say a dash -.

Keep Leave a redirect behind enabled.

Get the new direct link. Update og:image with the new direct link.

TNTBOMBOM added a comment.EditedJan 13 2016, 9:40 PM

Press action -> move

didnt really got what do u mean by it ?

im going to upload more photos to the documentation and without spaces _ for the rest of the topics if i can.

On that wiki page... On the top... Pres...
action
then press
move

finished , check out.

Patrick closed this task as Resolved.Jan 14 2016, 3:41 AM
Patrick assigned this task to TNTBOMBOM.

Good work!

TNTBOMBOM added a comment.EditedFeb 15 2016, 4:24 AM

done, check it out babe ;)

also fix ur first comment here:-

We need something like this:

{{#seo:
|description=Using a Tor Controller with Whonix. Arm. Vidalia. Change your Tor circuit. Monitor Tor.
|og:image=https://www.whonix.org/w/images/5/54/Screenshot_arm_page1_cropped.png
}}

the last line should be:-

|og:image=https://www.whonix.org/w/images/5/54/Screenshot-arm-page1-cropped.png

The removal of _ is fortunately no longer required. Just now tested. Works as is.

Patrick closed this task as Resolved.Feb 16 2016, 6:52 AM

Looks good! Thanks!

Patrick added a comment.EditedFeb 16 2016, 9:34 PM

TODO:

Patrick reopened this task as Open.Dec 16 2016, 10:47 PM
TNTBOMBOM closed this task as Resolved.Jan 6 2017, 10:36 PM