Harlowe is a popular story format for Twine, an open-source tool for creating interactive fiction. When designing a Twine story, incorporating images enhances the reader’s experience. Sometimes, however, you need to adjust the image size to fit your story’s layout or design. Resizing images in Harlowe involves using HTML and CSS, as Harlowe doesn’t offer built-in functions for direct image manipulation. This guide will walk you through the process step-by-step.
Step 1: Add the Image to Your Twine Story
Before resizing, ensure the image is properly added to your Twine project. You can use images hosted online or embedded in your project.
To add an image:
1. Use the HTML `` tag.
2. Insert the image URL within the `src` attribute.
Example:
“`html
“`
Note: For local images, you must upload them to a hosting service or Twine’s media folder (if using a self-hosted solution).
Step 2: Apply Inline CSS for Resizing
To resize an image directly within the `` tag, use the `style` attribute with CSS properties like `width` and `height`.
Example:
“`html
“`
– `width` sets the desired width (in pixels or percentage).
– `height:auto` maintains the image’s aspect ratio, preventing distortion.
Flexible Sizing:
If you prefer percentages, you can use:
“`html
“`
This approach ensures the image scales dynamically based on the parent container’s size.
Step 3: Using CSS Classes for Consistency
For multiple images requiring the same size, create a CSS class. Harlowe supports custom CSS through Twine’s Story Stylesheet.
1. Open the Story Stylesheet: Click the “Edit Story Stylesheet” button (usually represented by a gear icon).
2. Add a CSS class:
“`css
.resized-image {
width: 300px;
height: auto;
}
“`
3. Apply the class to an image:
“`html
“`
This method promotes cleaner code and makes future adjustments easier.
Step 4: Responsive Design Considerations
To ensure your image looks good on various screen sizes (especially important for mobile devices), use responsive CSS.
Example with Media Queries:
“`css
.resized-image {
width: 100%; / Full width on smaller screens /
max-width: 300px; / Limit size on larger screens /
height: auto;
}
“`
This code allows the image to fill the screen width on smaller devices but caps its size on larger displays.
Step 5: Testing and Adjusting
After adding and resizing your image:
1. Preview Your Story: Click the “Play” button in Twine to see how the image displays.
2. Adjust as Needed: Modify width, height, or responsive settings based on the preview.
Common Issues and Solutions
1. Image Not Loading:
– Ensure the URL is correct and publicly accessible.
– Check for typos in the `src` attribute.
2. Distorted Images:
– Use `height:auto` to maintain the aspect ratio.
3. CSS Not Applying:
– Verify that the class name in the HTML matches the stylesheet entry.
Resizing images in Harlowe involves simple yet effective use of HTML and CSS. By embedding images with inline styles or classes, you can control their appearance and maintain a clean layout. This enhances your Twine story’s visual appeal, ensuring a smoother and more engaging experience for readers. Whether working on a single image or applying styles across multiple assets, mastering these techniques adds polish to your interactive fiction projects.