Package com.oorian.html.layout

Class StoryLayout

java.lang.Object
com.oorian.html.Element<StoryLayout>
com.oorian.html.VisualElement<StoryLayout>
com.oorian.html.StyledElement<StoryLayout>
com.oorian.html.layout.PageLayout<StoryLayout>
com.oorian.html.layout.StoryLayout
public class StoryLayout extends PageLayout<StoryLayout>
A layout with alternating image/text sections for product storytelling.

StoryLayout provides a structure optimized for marketing pages and product tours where content alternates between image and text sections. This creates a visually engaging narrative flow commonly seen on landing pages.

Structure:

 ┌──────────────────────────────────────┐
 │           Header (optional)          │
 ├──────────────────────────────────────┤
 │  ┌──────────────┬──────────────┐     │
 │  │    Image     │    Text      │     │  Section 1
 │  └──────────────┴──────────────┘     │
 ├──────────────────────────────────────┤
 │  ┌──────────────┬──────────────┐     │
 │  │    Text      │    Image     │     │  Section 2 (reversed)
 │  └──────────────┴──────────────┘     │
 ├──────────────────────────────────────┤
 │  ┌──────────────┬──────────────┐     │
 │  │    Image     │    Text      │     │  Section 3
 │  └──────────────┴──────────────┘     │
 └──────────────────────────────────────┘

Features:

  • Alternating image-left/image-right sections
  • Optional header section
  • Configurable section spacing
  • 50/50 or custom split ratios
  • Vertical alignment options

Usage:


 // Basic story layout
 StoryLayout story = new StoryLayout();
 story.addSection(image1, text1)        // Image left
      .addSection(image2, text2)        // Image right (auto-alternates)
      .addSection(image3, text3);       // Image left

 // With header
 StoryLayout story = new StoryLayout();
 story.header(heroSection)
      .addSection(feature1Img, feature1Text)
      .addSection(feature2Img, feature2Text);

 // Custom split ratio
 StoryLayout story = new StoryLayout();
 story.setSplitRatio("40%", "60%")      // 40% image, 60% text
      .addSection(img, text);

 // Disable alternating
 story.setAlternating(false);           // All sections image-left
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:

  • Constructor Details

    • StoryLayout

      public StoryLayout()
      Constructs a StoryLayout with default configuration.

  • Method Details

    • initialize

      protected void initialize()
      Builds the element tree for the layout.
      Overrides:
      initialize in class StyledElement<StoryLayout>

    • header

      public StoryLayout header(Element<?> header)
      Sets the header content.
      Parameters:
      header - the header element (hero section, title, etc.)
      Returns:
      this StoryLayout for method chaining

    • addSection

      public StoryLayout addSection(Element<?> image, Element<?> text)
      Adds a story section with image and text content.

      Sections automatically alternate between image-left and image-right when alternating mode is enabled (default).

      Parameters:
      image - the image/media element
      text - the text/content element
      Returns:
      this StoryLayout for method chaining

    • addSection

      public StoryLayout addSection(Element<?> image, Element<?> text, boolean imageFirst)
      Adds a story section with explicit image position.
      Parameters:
      image - the image/media element
      text - the text/content element
      imageFirst - true to place image on the left, false for right
      Returns:
      this StoryLayout for method chaining

    • addSectionImageLeft

      public StoryLayout addSectionImageLeft(Element<?> image, Element<?> text)
      Adds a section with image on the left.
      Parameters:
      image - the image/media element
      text - the text/content element
      Returns:
      this StoryLayout for method chaining

    • addSectionImageRight

      public StoryLayout addSectionImageRight(Element<?> image, Element<?> text)
      Adds a section with image on the right.
      Parameters:
      image - the image/media element
      text - the text/content element
      Returns:
      this StoryLayout for method chaining

    • setAlternating

      public StoryLayout setAlternating(boolean alternating)
      Enables or disables automatic alternating of image position.
      Parameters:
      alternating - true to alternate, false for consistent positioning
      Returns:
      this StoryLayout for method chaining

    • setSplitRatio

      public StoryLayout setSplitRatio(String imageWidth, String textWidth)
      Sets the split ratio between image and text panes.
      Parameters:
      imageWidth - the image pane width (e.g., "40%", "300px")
      textWidth - the text pane width (e.g., "60%", "1fr")
      Returns:
      this StoryLayout for method chaining

    • equalSplit

      public StoryLayout equalSplit()
      Sets equal 50/50 split ratio.
      Returns:
      this StoryLayout for method chaining

    • smallImageSplit

      public StoryLayout smallImageSplit()
      Sets a 40/60 split ratio (smaller image, larger text).
      Returns:
      this StoryLayout for method chaining

    • largeImageSplit

      public StoryLayout largeImageSplit()
      Sets a 60/40 split ratio (larger image, smaller text).
      Returns:
      this StoryLayout for method chaining

    • setSectionGap

      public StoryLayout setSectionGap(int gap)
      Sets the gap between sections.
      Parameters:
      gap - the gap in pixels
      Returns:
      this StoryLayout for method chaining

    • setSectionGap

      public StoryLayout setSectionGap(String gap)
      Sets the gap between sections.
      Parameters:
      gap - the gap value (e.g., "64px", "4rem")
      Returns:
      this StoryLayout for method chaining

    • setInnerGap

      public StoryLayout setInnerGap(int gap)
      Sets the gap between image and text within sections.
      Parameters:
      gap - the gap in pixels
      Returns:
      this StoryLayout for method chaining

    • setInnerGap

      public StoryLayout setInnerGap(String gap)
      Sets the gap between image and text within sections.
      Parameters:
      gap - the gap value (e.g., "48px", "3rem")
      Returns:
      this StoryLayout for method chaining

    • setContentPadding

      public StoryLayout setContentPadding(int padding)
      Sets padding for the sections container.
      Parameters:
      padding - the padding in pixels
      Returns:
      this StoryLayout for method chaining

    • setContentPadding

      public StoryLayout setContentPadding(String padding)
      Sets padding for the sections container.
      Parameters:
      padding - the padding value (e.g., "48px", "3rem")
      Returns:
      this StoryLayout for method chaining

    • setMaxWidth

      public StoryLayout setMaxWidth(int maxWidth)
      Sets maximum width for the sections (for centered content).
      Overrides:
      setMaxWidth in class StyledElement<StoryLayout>
      Parameters:
      maxWidth - the max width in pixels
      Returns:
      this StoryLayout for method chaining

    • setMaxWidth

      public StoryLayout setMaxWidth(String maxWidth)
      Sets maximum width for the sections (for centered content).
      Overrides:
      setMaxWidth in class StyledElement<StoryLayout>
      Parameters:
      maxWidth - the max width value (e.g., "1200px", "80%")
      Returns:
      this StoryLayout for method chaining

    • getHeaderArea

      public Div getHeaderArea()
      Returns the header area for advanced customization.
      Returns:
      the header area div

    • getSectionsContainer

      public Div getSectionsContainer()
      Returns the sections container for advanced customization.
      Returns:
      the sections container div

    • getSectionCount

      public int getSectionCount()
      Returns the number of sections added.
      Returns:
      the section count

    • compactSpacing

      public StoryLayout compactSpacing()
      Applies compact spacing (smaller gaps between and within sections).
      Returns:
      this StoryLayout for method chaining

    • standardSpacing

      public StoryLayout standardSpacing()
      Applies standard spacing (the default).
      Returns:
      this StoryLayout for method chaining

    • spaciousSpacing

      public StoryLayout spaciousSpacing()
      Applies spacious spacing (larger gaps for dramatic effect).
      Returns:
      this StoryLayout for method chaining

    • narrowContent

      public StoryLayout narrowContent()
      Applies narrow content width (960px) - focused storytelling.
      Returns:
      this StoryLayout for method chaining

    • normalContent

      public StoryLayout normalContent()
      Applies normal content width (1200px).
      Returns:
      this StoryLayout for method chaining

    • wideContent

      public StoryLayout wideContent()
      Applies wide content width (1440px).
      Returns:
      this StoryLayout for method chaining

    • fullWidth

      public StoryLayout fullWidth()
      Applies full width content (no max width constraint).
      Returns:
      this StoryLayout for method chaining

    • featureTourStyle

      public StoryLayout featureTourStyle()
      Configures for a feature tour style with large images and compact text.
      Returns:
      this StoryLayout for method chaining

    • articleStyle

      public StoryLayout articleStyle()
      Configures for a blog/article style with smaller images and more text.
      Returns:
      this StoryLayout for method chaining

    • balancedStyle

      public StoryLayout balancedStyle()
      Configures for balanced image and text presentation.
      Returns:
      this StoryLayout for method chaining