FG Spreadshirt Swag
Page 1 of 3 123 Last
  1. #1

    Reference Module image alignment

    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:

    Code:
    <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.
    Attached Images Attached Images

    Ultimate License Holder!
    Anyone can play!
    Timzone:
    US Central (-6 GMT)

  2. #2

  3. #3

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

    Code:
    <align type="string">left,right</align>
    remain as coded, or should that change also?

    Ultimate License Holder!
    Anyone can play!
    Timzone:
    US Central (-6 GMT)

  5. #5
    Trenloe's Avatar
    Join Date
    May 2011
    Location
    Colorado, USA
    Posts
    33,291
    Quote Originally Posted by Casimir View Post
    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.
    Private Messages: My inbox is forever filling up with PMs. Please don't send me PMs unless they are actually private/personal messages. General FG questions should be asked in the forums - don't be afraid, the FG community don't bite and you're giving everyone the chance to respond and learn!

  6. #6
    Trenloe's Avatar
    Join Date
    May 2011
    Location
    Colorado, USA
    Posts
    33,291
    Private Messages: My inbox is forever filling up with PMs. Please don't send me PMs unless they are actually private/personal messages. General FG questions should be asked in the forums - don't be afraid, the FG community don't bite and you're giving everyone the chance to respond and learn!

  7. #7

    Join Date
    May 2016
    Location
    Jacksonville, FL
    Posts
    2,211
    Blog Entries
    7
    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.

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

    Code:
    <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?

    Code:
    <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.
    Last edited by Talyn; November 6th, 2020 at 21:59.

  8. #8

    Join Date
    May 2016
    Location
    Jacksonville, FL
    Posts
    2,211
    Blog Entries
    7
    Not sure if this helps but here's an example from one of my retail projects:



    Code:
    <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.
    Attached Images Attached Images
    Last edited by Talyn; November 6th, 2020 at 22:03.

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



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

    Code:
    <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>
    Attached Images Attached Images

    Ultimate License Holder!
    Anyone can play!
    Timzone:
    US Central (-6 GMT)

  10. #10
    Zacchaeus's Avatar
    Join Date
    Dec 2014
    Location
    Scotland
    Posts
    20,663
    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.
    If there is something that you would like to see in Fantasy Grounds that isn't currently part of the software or if there is something you think would improve a ruleset then add your idea here http://fgapp.idea.informer.com/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
DICE PACKS BUNDLE

Log in

Log in