Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Creating a With and With-Out images version of your Story
An Author may find themselves in the situation where they want/need to make two versions of their story, one With images and one without.
Although you can "hide" the images using some CSS, the images are still there and making the file larger than it needs to be.
The following is a very basic method to allow you to build two different versions of your story, one with images, and one where the images are not included in the generated HTML file.
NOTES:
a. The TWS / HTML files listed below can be named whatever you like, I selected the names to make it easier to understand their purpose.
b. Remember to delete the three default passages (Start, StoryTitle, StoryAuthor) from story files created in point 1 & 2.
1. Create a new story (tws) file named with_images.tws.
You will be importing all your images into this file using the Story > Import Image menu item.
2. Create a second new story (tws) file named without_images.tws.
Add a stylesheet passage to this file containing the following CSS rule, which will hide the HTML img tag.
4. Add a StoryIncludes special passage to it if it does not already have one.
5. Edit the StoryIncludes passage and add a reference to the with_images.tws file.
6. Using the standard [img[image-name]] macro, add image links to the passages within your main story file.
7. Use the Build > Build Story menu item to create the version of your story with images. (story_with_images.html)
8. Edit the StoryIncludes passage and change the with_images.tws reference to without_images.tws.
9. Build the version of your story without an images. (story_without_images.html)
The HTML file generated should be a lot small in size because it does not contain the images.
You can now build the two different versions of your story just by changing the reference in the StoryIncludes passage from with_images.tws to without_images.tws and back again.
I have attached an ZIP file containing an example of the three TWS files listed within this topic.
Although you can "hide" the images using some CSS, the images are still there and making the file larger than it needs to be.
The following is a very basic method to allow you to build two different versions of your story, one with images, and one where the images are not included in the generated HTML file.
NOTES:
a. The TWS / HTML files listed below can be named whatever you like, I selected the names to make it easier to understand their purpose.
b. Remember to delete the three default passages (Start, StoryTitle, StoryAuthor) from story files created in point 1 & 2.
1. Create a new story (tws) file named with_images.tws.
You will be importing all your images into this file using the Story > Import Image menu item.
2. Create a second new story (tws) file named without_images.tws.
Add a stylesheet passage to this file containing the following CSS rule, which will hide the HTML img tag.
#passages .passage .content img {
display: none;
}
4. Add a StoryIncludes special passage to it if it does not already have one.
5. Edit the StoryIncludes passage and add a reference to the with_images.tws file.
6. Using the standard [img[image-name]] macro, add image links to the passages within your main story file.
7. Use the Build > Build Story menu item to create the version of your story with images. (story_with_images.html)
8. Edit the StoryIncludes passage and change the with_images.tws reference to without_images.tws.
9. Build the version of your story without an images. (story_without_images.html)
The HTML file generated should be a lot small in size because it does not contain the images.
You can now build the two different versions of your story just by changing the reference in the StoryIncludes passage from with_images.tws to without_images.tws and back again.
I have attached an ZIP file containing an example of the three TWS files listed within this topic.