Hi hello,
I am busy writing a workflow guide for Git. I want to add some screenshots to accompany that guide, for those who want. But I am struggling with getting moin to display it all neatly.
See http://wiki.fsfe.org/TechDocs/Git/Guide%3AWorkflow
(Resize that page a bit to see what's going on. Also see https://i.imgur.com/v4PF9hd.png for sake of future reference.)
Ideally I want the images to be _between_ the paragraphs, not next to them. Or something else that doesn't look bad, really.
Does someone have any suggestions?
Yours,
Hi Carmen,
On Dienstag, 19. September 2017 12:54:02 CEST Carmen Bianca Bakker wrote:
I am busy writing a workflow guide for Git. I want to add some screenshots to accompany that guide, for those who want. But I am struggling with getting moin to display it all neatly.
The current css formats all images as floats, which causes the problem that you are seeing.
A workaround for now is to add a horizontal line (or any object that clears floats) after the image:
[[attachment:clone.png|{{attachment:clone.png||width=200}}]] -------
Another workaround is to wrap the image block in a pagebox environment:
{{{#!wiki pagebox [[attachment:clone.png|{{attachment:clone.png||width=200}}]] }}}
Ideally I want the images to be _between_ the paragraphs, not next to them. Or something else that doesn't look bad, really.
Does someone have any suggestions?
@Paul: I think we discussed the issue some time ago. Is there some better solution? Maybe we could introduce another alignment option for images? E.g.: {{attachment:clone.png|screenshot of git clone|align=block}}
Cheers, Johannes
On Tue, Sep 19, 2017 at 10:17:29PM +0200, Johannes Zarl-Zierl wrote:
Another workaround is to wrap the image block in a pagebox environment:
{{{#!wiki pagebox [[attachment:clone.png|{{attachment:clone.png||width=200}}]] }}}
I strongly recommend against using a pagebox for this. It may achieve a desired optical effect in our current design, but semantically it is completely different from what should be achieved. For example it might look completely different in a future design, or in a rendering for paper, slides, eReaders, etc. As a rule of thumb: Never argue with a markup engine ;-)
Ideally I want the images to be _between_ the paragraphs, not next to them. Or something else that doesn't look bad, really.
Does someone have any suggestions?
I have enabled a markup, that can do what you asked for, see below. I think that a floating image might actually be appropriate though.
@Paul: I think we discussed the issue some time ago. Is there some better solution? Maybe we could introduce another alignment option for images?
First of all: the wiki style tries to display articles in the corporate design set by the website. Where an image accompanies a text without being the primary content provider itself, it is often displayed as being framed by the text. Examples are [1], [2] (the quotation photographs), or [3] (the cycle gallery).
[2] https://wiki.fsfe.org/TechDocs/FellowshipSmartCard [2] https://fsfe.org/campaigns/valentine/2011/valentine-2011.en.html [3] https://fsfe.org/campaigns/ilovefs/
Different from this are banner graphics (in the same examples), or sometimes diagrams and screenshot walkthroughs.
Since the images in the Git documantation are already scaled to be only recognizable when clicked, I would rather consider them an instance of accompanying imagery. Possible visual styling would be to to have them displayed right or left of the text, i.e. by _prepending_ them to the paragraph, which they should accompany or by setting them to be right aligned:
[[attachment:clone.png|{{attachment:clone.png||width=200,align=right}}]]
For the latter case I have added corresponding behaviour when an image is *indented* by a whitespace. This is reminiscent of quotations in the markdown syntax, which unfortunately we cannot currently have on the wiki. You might want to allow the image to grow wider, when displaying it on a lone paragraph. Even on small screens it will never grow beyound the text frame.
Hello,
Je 20 Sep 2017 13:34:13 paul haensch skribis:
Since the images in the Git documantation are already scaled to be only recognizable when clicked, I would rather consider them an instance of accompanying imagery. Possible visual styling would be to to have them displayed right or left of the text, i.e. by _prepending_ them to the paragraph, which they should accompany or by setting them to be right aligned:
[[attachment:clone.png|{{attachment:clone.png||width=200,align=right}}]]
For the latter case I have added corresponding behaviour when an image is *indented* by a whitespace. This is reminiscent of quotations in the markdown syntax, which unfortunately we cannot currently have on the wiki. You might want to allow the image to grow wider, when displaying it on a lone paragraph. Even on small screens it will never grow beyound the text frame.
I have tried this. The result is not very pretty.
=== GUI ===
First, make sure that you are on the master branch of your local repository. You do this by right-clicking on "master" in the branches dock and clicking on "Checkout", or by clicking on "Branch" in the menu and clicking on "Checkout...", then selecting the master branch.
[[attachment:checkout1.png|{{attachment:checkout1.png||width=200,align=right}}]]
[[attachment:checkout2.png|{{attachment:checkout2.png||width=200,align=right}}]]
Now, you pull from upstream/master. You do this by clicking on "Actions" and clicking on "Pull...". Select upstream and master in the pop-up that appears.
[[attachment:pull.png|{{attachment:pull.png||width=200,align=right}}]]
If you want, you can also add all the actions to the main window by clicking on "View" and selecting "Actions". This makes it a little more persistently obvious what actions are available to you.
At this stage, the master branch of your local repository is identical to the master branch of the remote main repository. You can also update your remote repository by clicking on "Push".
[[attachment:push.png|{{attachment:push.png||width=200,align=right}}]]
This step is not absolutely necessary, but doesn't hurt.
becomes
https://i.imgur.com/rOprniy.png
See also: https://wiki.fsfe.org/TechDocs/Git/Workflow (renamed)
Yours sincerely,
On Wed, Sep 20, 2017 at 01:57:20PM +0200, Carmen Bianca Bakker wrote:
For the latter case I have added corresponding behaviour when an image is *indented* by a whitespace. This is reminiscent of quotations in the markdown syntax, which unfortunately we cannot currently have on the wiki. You might want to allow the image to grow wider, when displaying it on a lone paragraph. Even on small screens it will never grow beyound the text frame.
I have tried this. The result is not very pretty.
Sorry. So much for my last minute alteration after testing an edit ;-)
Shift-F5...
Hello again,
I just noticed that the wiki has some strange issues when handling a page title with a colon in it. It seems that colons are used by MoinMoin to denote special InterWiki[1] links.
I would strongly suggest that you rename the page to something without ':' in it.
Thanks! Johannes
[1] https://moinmo.in/InterWiki
On Dienstag, 19. September 2017 12:54:02 CEST Carmen Bianca Bakker wrote:
Hi hello,
I am busy writing a workflow guide for Git. I want to add some screenshots to accompany that guide, for those who want. But I am struggling with getting moin to display it all neatly.
See http://wiki.fsfe.org/TechDocs/Git/Guide%3AWorkflow
(Resize that page a bit to see what's going on. Also see https://i.imgur.com/v4PF9hd.png for sake of future reference.)
Ideally I want the images to be _between_ the paragraphs, not next to them. Or something else that doesn't look bad, really.
Does someone have any suggestions?
Yours,