PDA

View Full Version : Reference Module image alignment



Casimir
November 6th, 2020, 02:31
Hello - I'm working on a reference module, and am trying to get a picture to line up to the right (or left) of the text, similar to the setup in the Call of Cthulhu ruleset I've linked below. The code I'm trying to do this with is here:



<id-00001>
<align type="string">center</align>
<frame type="string">noframe</frame>
<text type="formattedtext">Example text...</text>
<blocktype type="string">singletext</blocktype>
</id-00001>
<id-00002>
<align type="string">left,right</align>
<size type="string">200,438</size>
<image type="image">
<bitmap type="string">images\anathaym.jpg</bitmap>
</image>
<caption type="string" />
<imagelink type="windowreference">
<class>imagewindow</class>
<recordname>reference.imagedata.img_anathaym_jpg</recordname>
</imagelink>
<blocktype type="string">image</blocktype>
</id-00002>
<id-00003>
<align type="string">center</align>
<frame type="string">brown</frame>
<text type="formattedtext">More example text...</text>
<blocktype type="string">singletext</blocktype>
</id-00003>


Instead of having the text "wrap" with the image (so that the text shows up on the left side), the text instead appears above and below the image, with the image on the right side.

I'm not exactly sure how to resolve this - I've tried to find a solution here on the forums (and probably missed one, I'm sure), but can't find an example to work from to ensure my XML is correct for the module. If anyone could point me in the right direction, I'd be very grateful.

This is for FGU also - not sure if that makes any difference or not.

damned
November 6th, 2020, 03:31
<blocktype type="string">pictureright</blocktype>

damned
November 6th, 2020, 03:31
or possibly <blocktype type="string">imageright</blocktype>

Casimir
November 6th, 2020, 16:41
Thanks Damned - I've tried both of those. With "pictureright" the block appears but the picture does not; with "imageright" the picture appears but the text still appears above and below the image. If I use those, should the



<align type="string">left,right</align>


remain as coded, or should that change also?

Trenloe
November 6th, 2020, 16:46
Instead of having the text "wrap" with the image (so that the text shows up on the left side), the text instead appears above and below the image, with the image on the right side.
You need a <text> entry in the same block as the image, as you want to combine an image and text within the same block.

Trenloe
November 6th, 2020, 16:47
Some info here: https://www.fantasygrounds.com/wiki/index.php/Reference_Manuals

Talyn
November 6th, 2020, 17:30
You've got a lot going on there, and a screenshot of what you're seeing would have been nice rather than the CoC book you're trying to replicate.



<id-00001>
<align type="string">center</align>
<frame type="string">noframe</frame>
<text type="formattedtext">Example text...</text>
<blocktype type="string">singletext</blocktype>
</id-00001>


There is no such thing as a singletext block type, so there's your first problem. The align attribute does not work on a single-column text-only blocktype (see below for two-column text), only for images to determine which column the image and text will render on. There is also no such frame as noframe although that "trick" can be useful for simulating an indented paragraph with no frame texture.



<id-00002>
<align type="string">left,right</align>
<size type="string">200,438</size>
<image type="image">
<bitmap type="string">images\anathaym.jpg</bitmap>
</image>
<caption type="string" />
<imagelink type="windowreference">
<class>imagewindow</class>
<recordname>reference.imagedata.img_anathaym_jpg</recordname>
</imagelink>
<blocktype type="string">image</blocktype>
</id-00002>


You've got the align here but no formatted text for the script to know what to align with, so there's your next problem. Also, a standard refpage block has a width of approximately 535px, so if you're doing dual-column you'd want to give your image a width of something around 250px or thereabouts. Something that's less than half of 535 to account for the 'buffer' the refpage will give between the columns. @Trenloe might know the exact numbers involved since I think he was one of the main developers of the original reference manual concept if I'm remembering correctly?



<id-00003>
<align type="string">center</align>
<frame type="string">brown</frame>
<text type="formattedtext">More example text...</text>
<blocktype type="string">singletext</blocktype>
</id-00003>


Here again, you've that singletext blocktype that doesn't exist. Not sure where you're getting this stuff but for sure check that Wiki page that @Trenloe linked. Also, as I mentioned above, the align won't work on a text-only block. NOTE: the single exception to that would be the header blocktype, which is auto-centered, so technically the align also doesn't work on that. :)

Talyn
November 6th, 2020, 19:13
Not sure if this helps but here's an example from one of my retail projects:

https://www.fantasygrounds.com/forums/attachment.php?attachmentid=40830&stc=1&d=1604689426



<blocks>
<block_001>
<blocktype type="string">picture</blocktype>
<picture type="token">images/frlogo_small.png@FRQ1 Haunted Halls of Eveningstar</picture>
<size type="string">535,141</size>
</block_001>
<block_002>
<blocktype type="string">header</blocktype>
<text type="string">Haunted Halls of Eveningstar</text>
</block_002>
<block_003>
<blocktype type="string">text</blocktype>
<text type="formattedtext">
<p><b>An Introductory Module for Characters of Levels 1&#x2013;5</b></p>
</text>
</block_003>
<block_004>
<align type="string">left,right</align>
<blocktype type="string">picture</blocktype>
<picture type="token">images/dndclassiclogo.png@FRQ1 Haunted Halls of Eveningstar</picture>
<size type="string">223,150</size>
<text type="formattedtext">
<h>Credits</h>
<p><b>Design: </b>Ed Greenwood
<b>Cartography: </b>Diesel
<b>Editing: </b>Anne Brown
<b>Typography: </b>Tracey Zamagne
<b>Cover Art: </b>Erik Olson
<b>Production: </b>Erin Wilk
<b>Interior Art: </b>Valerie Valusek</p>
</text>
</block_004>
<block_005>
<blocktype type="string">text</blocktype>
<text type="formattedtext">
<p><b>Dedication: </b>To The Knights of Myth Drannor, whose glory-ground this first was: Andrew, Anita, Ian, Jim, Jenny, John, and Victor. A lot's missing here&#x2014;not only rooms and passages and monsters that wouldn't fit, but the delight and camaraderie you brought to its exploration. Know that in memory it yet burns bright.</p>
</text>
</block_005>
<block_006>
<align type="string">left,right</align>
<blocktype type="string">text</blocktype>
<text type="formattedtext">
<p><b>TSR Ltd. </b>
POB 756
Lake Geneva
WI 53147 U.S.A.</p>
</text>
<text2 type="formattedtext">
<p><b>TSR, Inc. </b>
120 Church End, Cherry Hinton
Cambridge CB1 3LB
United Kingdom</p>
</text2>
</block_006>


So, the first block is the FR logo which spans the default width of a refpage (535px). Block 2 is the 'header' blocktype which is auto-centered as I said above. It only accepts a single line of string text. Block 3 is a standard 'text' blocktype (note that 'text' is the default so you can actually omit that; the only reason it's in this project is that I used an in-client tool to build this reference manual so it includes all markup whether it's 'needed' or not.)

Block 4 is where you're going to be interested. This is where we get into the two-column layout. Now, I could have chosen to have the 'Credits' header text in its own block (and if memory serves that was my first choice but this layout looked better so that the 'Credits' line is aligned with the D&D Classic logo rather than being above it. That also helped out because the credits text ended up being less height that the logo image, so having the 'Credits' line balanced the two columns. I chose the 'token' blocktype for both images on this page rather than the 'image' blocktype because FG Classic is still unable to display a PNG with alpha channel except for tokens. But aside from that, the markup would be identical for an 'image' blocktype as well.

Block 5 is once again a standard 'text' blocktype, then finally Block 6 I utilized a two-column layout for the US and UK addresses. (There are some ASCII 10's in there for force the linebreaks but the forum software doesn't like those so they're not displayed here.)

Hope that helps.

Casimir
November 6th, 2020, 20:52
Talyn, wow - thanks for the info. That is awesome and helps immensely.

Using what you've shown here got it working for me - however, I have two related questions.

https://www.fantasygrounds.com/forums/attachment.php?attachmentid=40835&stc=1&d=1604694729

First, is there a way to have the text actually "wrap" around the image? As in the example above the text is longer than the image itself and stays aligned to the left. I'm assuming that there isn't a way, and that to get it to do that will require me to "cut up" the text so that the next block fits neatly under the image, but if there was a way to do it automatically through the XML it'd be great.

Second, is there a way to get the image and text to actually be inside a "brown" frame (i.e., <frame type="string">brown</frame>)? I've toyed with it by adding that to the block containing the text / image section, and it's showing as the image shows - in a standard text block instead (or so it appears - the brown text block below the image / text area is a second text only block with the frame set as brown).



<id-00003>
<align type="string">left,right</align>
<frame type="string">brown</frame>
<size type="string">200,350</size>
<image type="image">
<bitmap type="string">images\sideimg1.jpg</bitmap>
</image>
<caption type="string" />
<imagelink type="windowreference">
<class>imagewindow</class>
<recordname>reference.imagedata.img_sideimg1_jpg</recordname>
</imagelink>
<text type="formattedtext"><p> Lorem ipsum dolor sit amet....</text>
<blocktype type="string">image</blocktype>
</id-00003>

Zacchaeus
November 6th, 2020, 21:09
First question : No; you'll ned to fiddle about with the text so that it sort of is the same length as the image.

Second Question: No. You can't have a frame around just one column or around a text/image dual column. You can have two different borders around two columns of text or around one single text block.

Casimir
November 6th, 2020, 21:32
Okay, thanks Zacchaeus - I figured that would be the case with my first question.

As for my second:


You can have two different borders around two columns of text or around one single text block.

I'm I'm understanding that correctly, does this mean that I could - potentially - enclose the text in a brown border / frame that's to the left of the image? And if so, how would I do that?

Talyn
November 6th, 2020, 21:40
As @Zacc said, basically 'no' to each question. If you have a paragraph break somewhere (as you do in your sample screenshot) only include that text in the 'image' block, then create a new 'text' block below it to continue the normal text.

Frames are purely a background texture for the 'text' portion of a block and will not include images. That's one (of many) features I'm hoping will eventually be included in the layout functionality.



...does this mean that I could - potentially - enclose the text in a brown border / frame that's to the left of the image? And if so, how would I do that?


Sure, just stick the frame markup in the same block as the image+text block and the script will know how to handle it. It also works for two-column text+text.

The main thing to watch for, especially when using the two-column layout, is readability. Each blocktype is inherently 'indented' inside the refpage borders by a few pixels (5 or 10? @Trenloe might know.) When you use a frame, the text inside that frame is further 'indented' (refer to my above comment about using this technique as a "trick") so make sure what you're trying to do actually looks good without having to enlarge the refpage. If it's questionable, then it's usually better to just keep the 'framed' text as its own separate, single-column block.

Casimir
November 7th, 2020, 20:58
Sure, just stick the frame markup in the same block as the image+text block and the script will know how to handle it. It also works for two-column text+text.

Unfortunately, I don't seem to be able to get this to work. I don't know if I'm doing it right, but here's the code I'm trying to work with:



<id-00003>
<align type="string">left,right</align>
<blocktype type="string">image</blocktype>
<image type="image">
<bitmap>images\sideimg1.jpg</bitmap>
</image>
<size type="string">200,350</size>
<frame type="string">brown</frame>
<text type="formattedtext"><p> Lorem ipsum dolor sit amet...</text>
</id-00003>


And what's happening instead is a standard text colored block:

https://www.fantasygrounds.com/forums/attachment.php?attachmentid=40872&stc=1&d=1604782678

Talyn
November 7th, 2020, 21:50
I will correct my original statement (been awhile; I've pretty much trained myself to minimize two-column blocks whenever possible): you can only do something "fancy" (frame or image type) to one column per block. So image + frame would be two "fancy" things, which is a non-starter so the scripts will default to simply the blocktype (image in this case) and normal text.

damned
November 8th, 2020, 00:03
Note the example you started with is the same.

Trenloe
November 8th, 2020, 08:09
For a Pathfinder 2 product I have some blocks that have an image on the left and text (with a frame) on the right - see the third screenshot here: https://www.fantasygrounds.com/store/product.php?id=PZOSMWPZO9303FG

This was created with the following code:


<blocks>
<id-00001>
<align type="string">right,left</align>
<size type="string">170,350</size>
<frame type="string">pfblue</frame>
<image type="image">
<bitmap type="string">images\Abadar - Symbol.jpg</bitmap>
</image>
<caption type="string" />
<text type="formattedtext"><h>Master of the First Vault</h><p>LN god of cities, law, merchants, and wealth</p><p><b>Realm</b> Aktun (Axis)</p><p><b>Allies</b> Asmodeus, Brigh, Erastil, Iomedae, Irori, Shelyn, Shizuru, Torag</p><p><b>Enemies</b> Besmara, Lamashtu, Norgorber, Rovagug</p><p><b>Temples</b> banks, cathedrals, courthouses</p><p><b>Worshippers</b> architects, bankers, lawmakers</p><p><b>Sacred Animal</b> monkey</p><p><b>Sacred Colors</b> gold and silver</p><p><b>Divine Ability</b> Constitution or Intelligence</p><p><b>Alternate Domains</b> duty</p></text>
<imagelink type="windowreference">
<class>imagewindow</class>
<recordname>reference.imagedata.img_abadarsymboljpg</recordname>
</imagelink>
<blocktype type="string">imageleft</blocktype>
</id-00001>

Note the blocktype of imageleft - in theory, imageright should also work - which is what @damned suggested in post #3, but a while ago I had issues with getting this to work properly on imageright and only got it working on imageleft. I didn't investigate in any depth as I didn't specifically need imageright

EDIT: I've done some further investigating now (diving into the CoreRPG ruleset code) and it will work if the frame value is provided via XML as frameleft - so try something like the following:


<id-00003>
<align type="string">left,right</align>
<blocktype type="string">imageright</blocktype>
<image type="image">
<bitmap>images\sideimg1.jpg</bitmap>
</image>
<size type="string">200,350</size>
<frameleft type="string">brown</frameleft>
<text type="formattedtext"><p> Lorem ipsum dolor sit amet...</text>
</id-00003>

Talyn
November 8th, 2020, 13:47
These new tags, are they documented somewhere? They're certainly not on the Wiki page...

darrenan
July 28th, 2021, 00:41
I have a few interrelated questions.

First: I'm struggling to get the <image type="image"> version to work. Here's what I currently have:



<id-00002>
<align type="string">center</align>
<blocktype type="string">image</blocktype>
<image type="image">
<bitmap>images\13ALogo.png</bitmap>
</image>
<imagelink type="windowreference">
<class>imagewindow</class>
<recordname>image.id-00098</recordname>
</imagelink >
<caption type="string" />
<size type="string">250,250</size>
<text type="formattedtext" />
</id-00002>

The space where the image is supposed to be is blank, but when I click on that space the linked image comes up in a new window. This would imply that the <imagelink> portion of that is working fine. I've tried both versions of slash in the path within the <bitmap> part, and that doesn't seem to make any difference.

Second: I have a previous version of this that was using <picture> instead, and it works just fine. I also see that many of Talyn's examples use <picture> instead of <image>. What is the difference between these two, and when would I use one versus the other? Should I just go back to the <picture> version and move on?

I just seems weird to me that there are two different way of doing (apparently) the same thing.

Talyn
July 28th, 2021, 01:34
Using <picture> was the only way to basically "fake" FG Classic into displaying a PNG with alpha by telling it that it's rendering a token (which is also why the @modulename was a requirement, since tokens can be called without having that particular module loaded).

If you're using Unity and your <version> tag is 4.x then you'll need to adjust like so:



<id-00002>
<blocktype type="string">image</blocktype>
<image type="image">
<layers>
<layer>
<name>13ALogo.png</name>
<id>1</id>
<parentid>-1</parentid>
<type>image</type>
<bitmap>images/13ALogo.png</bitmap>
</layer>
</layers>
</image>
<imagelink type="windowreference">
<class>imagewindow</class>
<recordname>image.id-00098</recordname>
</imagelink >
<size type="string">250,250</size>
</id-00002>


Note: I omitted your <align> (btw the <image> tag defaults to center anyway; the align tag only really works in a two-column scenario), <caption> and <text> tags since they were empty.

The image renderer in Unity will display PNG with alpha channel just fine, so there's no longer a need to resort to such trickery (and @Moon Wizard waggled his fingers at us constantly to make sure we didn't abuse that trick, as it forced all the "fake tokens" to be loaded into memory, which was also more of a concern in Classic).

On the other hand, if you're sticking with a 3.x <version> that will tell Unity to go into "Classic Compatibility Mode" for the markup, so your original markup should work just fine, at least by me giving a quick glance-over.

<imagelink> will pop a new window no matter what; that's just an FG function. If you have the <recordname> correct then it will display the image there. In all my retail projects, I go through and rename the records so like in that FRQ1 the cover art would be <recordname>image.cover</recordname>. Just me, but I'm not crazy about having imagelinks to logos; I just do artwork that's large enough and quality enough to think someone might want to see a larger version on its own.

EDIT: Just noticed you mentioned the slash. FG does want the forward slash in filenames so it's always / for that stuff.

darrenan
July 28th, 2021, 20:14
One more question, if I have a block with two columns of text, is there any way to get the frame to apply to the left column? I've tried all four permutations of alignment and text/text2 and in all cases the frame type seems to be applied to the right column.

EDIT: nevermind, I just scrolled up saw Trenloe's bit about frameleft. I'll give that try.

Talyn
July 28th, 2021, 20:31
Oh good call, I had totally forgotten about that... I still have yet to ever see any documentation (so great find @Trenloe) on that, but yes, <frameleft> is the only way to get the refpage script to apply the frame graphic to the left column.

Essentially, in a two-column layout, think of the 'align' tag as being: <align type="string">text,text2</align> so 'left,right' will render 'text' on the left column and 'text2' in the right column. Vice-versa for 'right,left'.

Otherwise, did the extra 4.x tags fix your refpage image rendering? The other 'quick n dirty' fix is to stick with the old markup and adjust your <version> to 3.3.

darrenan
July 28th, 2021, 22:40
yes, everything is working fine with the new tags and 4.x version.