›

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Categories

html export default with responsive or bootstrap layout

writer_writer_
in Help! with 2.0
I just tested on my android device (galaxy note 3) a very short twine 2 story exported to HTML.

the layout for the text was ok but image rendering was very poor.

request:
HTML export defaults with responsive code
resource:
http://www.w3schools.com/html/html_responsive.asp


In the meantime, anyone have any luck with modding their HTML output/stories for responsive/bootstrap?

Comments

  • greyelfgreyelf
    It is possible to add Bootstrap CSS to your story but it will require some effort:

    1. BS expects your content to be wrapped within a tag with a class of "container", so you will need to wrap the contents of each of your passages like the following:
    (note: the example is from the BS site and works in Twine 2 after step 2 is done.)

    <div class="container">
    {
    <p>
    <button type="button" class="btn btn-lg btn-default">Default</button>
    <button type="button" class="btn btn-lg btn-primary">Primary</button>
    <button type="button" class="btn btn-lg btn-success">Success</button>
    <button type="button" class="btn btn-lg btn-info">Info</button>
    <button type="button" class="btn btn-lg btn-warning">Warning</button>
    <button type="button" class="btn btn-lg btn-danger">Danger</button>
    <button type="button" class="btn btn-lg btn-link">Link</button>
    </p>
    }
    </div>
    2. You will need to edit the generated HTML file and add to the end of the <head> section the references to the BS related *.css files, it will look something like the following:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    </head>
  • writer_writer_
    Many thanks for the speedy reply!

    In your opinion, programmatically, how difficult is it to build in the bootstrap/responsive CSS into the output automatically?

  • greyelfgreyelf
    Are you asking what effort would it take for the creator (Leon) of the Harlowe story format to embed the Bootstrap framework into Harlowe?
  • writer_writer_
    Yes, I guess I am.

    I am not 100% clear on the topology of the development/developers of Twine.  I checked http://twinery.org/ for a FAQ but did not find one. I also checked the wiki http://twinery.org/wiki/frequently_asked_questions?redirect=1 for developer http://twinery.org/wiki/start?do=search&id=developer and didn't find a mapping of who is who. Again, sorry for not knowing.

    Thank you for your patience/understanding.
  • klembotklembot
    It makes a lot of sense for us to add information about who's working on what, at least at a high level, to the wiki.

    Could you attach a screenshot of what it looks like on Android? (instructions) I'm not sure what you mean by "image rendering" here -- Harlowe doesn't have images but the layout and font size does adapt to your browser width, which to me equals at least some responsiveness.

    Bootstrap integration is Leon's decision to make, but my personal opinion on it is that it would not add much for the average author. Most of Bootstrap is oriented around providing a layout grid (which is sort of irrelevant here, since it's one column of text) and UI components such as buttons and dropdown menus (which also aren't things that the average author will use much).
  • writer_writer_
    re: developer /development who's who
    I agree :)

    re: responsive/bootstrap
    If authors can package their books into a small portable device (phone/phablet/tablet/netbook) etc. then they will increase the # of potential readers/buyers. That is why I bring up the responsive question as that was one of the first things I checked was compatibility on of Twine stories on small devices. Being able to sell stories generated on Twine 2 on mobile platforms easily would seem like a great win-win for all. Unless that is already possible through a 3rd party? Plugin?

    Below are some more tests I performed.

    The images are not responsive in my test e.g. they don't resize. That might just be a question of wrapping the html with the right code.

    Some more poking around turned up this
    http://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

    <img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
    But that won't work with Twine 2 unless you HAVE the various files (locally?). I tried calling smaller files below (with no joy).


    Doesn't work but it should as I'm calling for a smaller file when the screen is below 500w. Note the call to the twinery logo for the 500w setting.
    <img src="http://upload.wikimedia.org/wikipedia/commons/a/a8/VST_images_the_Lagoon_Nebula.jpg" srcset=""http://twinery.org/forum/Themes/MinDI/images/theme/logo.png" 500w, medium.jpg 1000w, large.jpg 2000w" alt="yah">

    This will not work either as there is no srcset for small medium large etc.
    <img src="http://upload.wikimedia.org/wikipedia/commons/a/a8/VST_images_the_Lagoon_Nebula.jpg" srcset="small.jpg 100w, medium.jpg 1000w, large.jpg 2000w" alt="yah">
    This does work:

    <img src="http://twinery.org/forum/Themes/MinDI/images/theme/logo.png" alt="Twine Forum">
  • greyelfgreyelf
    Responsive images is not a simple issue, the following article may help you understand the problems and methods used to solve it.
  • klembotklembot
    I totally agree that Twine stories need to start showing up on mobile devices more, including in app stores.

    I think the image issue may actually have a very simple fix-- give it a max-width: 100% CSS property. Right now I think there is a bug causing custom stylesheets not to be reflected properly in story output, but this worked for me as an example:
    <img src="http://placehold.it/2000x150" style="max-width: 100%">
    srcsets are useful too, but this at least prevents your layout from breaking.
  • writer_writer_
    greyelf wrote:

    Responsive images is not a simple issue, the following article may help you understand the problems and methods used to solve it.


    Thanks for the article. It is NOT a straight forward issue in regards to the images... :/

    However, I think most of us agree that it is something to keep in mind going forward in terms of designing or providing tools for simplifying the process of making stories with images more appealing on handheld/small devices.

    thanks
  • dannyn08dannyn08
    Hi,

    I'm working on a healthcare experience using twine 2 which is a good start but is their functionality on storing responses and making it mobile friendly. I'm new to programming but would like to know where to find out how. I'm learning CSS, HTML, Javascript, Python and can now load a server on google compute. I'm interested in building one stop online platform healthcare that is centered around patient consumers. Need help. Patono.com is what i made so far to screen people for diabetes.

    Feedback would be greatly appreciated. Help would be a kicker.

  • timsamofftimsamoff
    klembot wrote: »
    …Bootstrap integration is Leon’s decision to make, but my personal opinion on it is that it would not add much for the average author…
    I wouldn’t want BS integrated into the core of Twine, but it could make a viable Story Format project for someone.
Sign In or Register to comment.