View source: Blueprint

The Panel setup for this page is controlled by the blueprint pages/homepage.yml.

All blueprints can be found in the /site/blueprints folder.

To learn more about Kirby's blueprints, please check out our docs: https://getkirby.com/docs

Back to the page

/site/blueprints/pages/homepage.yml
title: Home page Template test
icon: ☎�
options:
  update:
    *: false
    editor: true
    admin: true
columns:
  - width: 1/1
    fields:
      info0:
        label: General Info
        type: info
        text: |
          All horizontal blocks in the home page is divided into <b>levels</b> here.
  - width: 4/4
    sections:
      info:
        label: Info
        type: info
        text: |
          1. All images used in this page are listed below.
          2. Click on any image to add alt, caption etc for the image.
      File:
        document:
        label: Document
        type: files
        template: image
        info: "{{ file.niceSize }} - {{ file.dimensions }} <br> {{ file.modified('d-m-Y h:i A') }}"
  # Meta tags
  - width: 1/1
    fields:
      event_name:
         label: Event name
         type: text
      meta_tags: 
        label: Meta Tags
        type: textarea
  # lemnisk
  - width: 1/1
    fields: 
      laminsk:
        label: lemnisk
        type: structure
        fields:
          lmnsk_html_id:
            width: 1/4
            label: HTML id attr
            type: text
          lmnsk_html_class:
            width: 1/4
            label: HTML class attr
            type: text
          lmnsk_event_type:
            width: 1/4
            label: Event Type
            type: select
            options:
              - click
              - pageLoad
              - scroll
              - hover
          lmnsk_view:
            width: 1/4
            label: Capture Event On
            type: select
            options:
              - All
              - Mobile
              - Desktop
          lmnsk_section:
            width: 1/2
            label: In Section
            type: textarea
          lmnsk_event_label:
            width: 1/2
            label: Event Label
            type: textarea
          lmnsk_category:
            width: 1/2
            label: Event Category
            type: textarea
          lmnsk_event_action:
            width: 1/2
            label: Event Action
            type: textarea
          lmnsk_desc:
            width: 1/1
            label: Event Desc
            type: textarea      
 
  - width: 1/1
    fields:
      topstrip:
        label: Top page Download Strip
        type: headline
        numbered: false
      topstropinfo:
        label: Info
        type: info
        text: |
          Added any Message with a Teal background   
  - width: 1/1
      fields:
         android_app:
            label: Android Link
            type: text
         ios_app:
            label: IOS Link
            type: text
         link_text:
            label: Download Link Text (Middle)
            type: text
         start_text:
            label: Text at the Start on the Strip
            type: text
         end_text:
            label: Text at the End on the Strip
            type: text
           
           
  # Level 1
  - width: 1/1
    fields:
      line1:
        type: line
      pageSettings1:
        label: Level 1
        type: headline
        numbered: false
      info1:
        label: Info
        type: info
        text: |
          Banner with Slider is Level 1    
  - width: 1/1
      fields:
        banner_long_text_left: 
          label: Banner Left Side Text
          type: textarea
        banner_long_link_text_left: 
          label: Banner Left Side Link Text
          type: text
        banner_long_link_left: 
          label: Banner Left Side Link
          type: text
  - width: 1/1
      fields:
        # lemnisk For Dynamic Content
        l1_lmnsk_section:
          width: 1/2
          label: Level 1 lemnisk In Section
          type: textarea
        l1_lmnsk_category:
          width: 1/2
          label: Level 1 lemnisk Event Category
          type: textarea
  - width: 1/1
      fields:
        Rotating_Banner_right:
          label: Level 1 Slider
          type: structure
          fields:
            Banner_images:
              label: Banner Images
              type: files
              layout: cards
              info: "{{ file.niceSize }} - {{ file.dimensions }} <br> {{ file.modified('d-m-Y h:i A') }}"
              image:
                ratio: 5/4
              size: small
              multiple: true
            Rotatig_banner_short_text_right:
              label: Rotating banner short textright
              type: textarea
            Rotatig_banner_long_text_right:
              label: Rotating banner long text right
              type: textarea
            Rotatig_banner_link_right:
              label: link
              type: text
            Rotatig_banner_link_text_right:
              label: link text
              type: text
          min: 1 
            
  # Level 2
  - width: 1/1
    fields:
      line2:
        type: line
      pageSettings2:
        label: Level 2
        type: headline
        numbered: false
      info2:
        label: Info
        type: info
        text: |
          1. In "heading" to show something in bold character use this syntax, " &lt;b&gt; Your text which will be shown in bold &lt;/b&gt; "
  - width: 1/1
      fields:
        # lemnisk For Dynamic Content
        l2_lmnsk_section:
          width: 1/2
          label: Level 2 lemnisk In Section
          type: textarea
        l2_lmnsk_category:
          width: 1/2
          label: Level 2 lemnisk Event Category
          type: textarea          
  - width: 1/1
      fields: 
        level_2:
          label: Level 2 Blocks
          type: structure
          fields:
            level_2_heading:
              label: heading
              type: text
            level_2_small_heading:
              label: small heading
              type: text
            level_2_link:
              label: link 1
              type: text
            level_2_link_text:
              label: link 1 text
              type: text
            level_2_2_link:
              label: link 2
              type: text
            level_2_2_link_text:
              label: link 2 text
              type: text
          min: 3

# Level 3
  - width: 1/1
    fields:
      line3:
        type: line
      pageSettings3:
        label: Level 3 (Why you should choose DSP)
        type: headline
        numbered: false
      info3:
        label: Info
        type: info
        text: |
          1. Chariman Image must have an alt tag. Goto to top, click on the image listed there and add it "alternate text".
          2. Image Dimension is 850x620
  - width: 1/1
      fields: 
        level_3:
          label: Level 3 heading
          type: text

  - width: 1/2
      fields: 
        level_3_static_image:
          label: Level 3 Static Image
          type: files
          layout: cards
          info: "{{ file.niceSize }} - {{ file.dimensions }} <br> {{ file.modified('d-m-Y h:i A') }}"
          image:
            ratio: 5/4
          size: small
          multiple: true
        level_3_chariman_quotes:
          label: Chairmans Quote
          type: textarea
  - width: 1/2
      fields: 
        level_3_block_2:
          label: Level 3 Block Sliders
          type: structure
          fields:
            level_2_block_3_heading:
              label: heading
              type: text
            level_2_block_3_small_heading:
              label: small heading
              type: text
      min: 3
          
  - width: 1/1
      fields: 
        level_3_link:
          label: Level 3 Link
          type: text
        level_3_link_text:
          label: Level 3 Link Text
          type: text
        level_3_chariman_disclaimer:
          label: Disclamer
          type: textarea

# Level 3 ends

# Level 4 starts
  - width: 1/1
    fields:
      line4:
        type: line
      pageSettings4:
        label: Level 4 (Our Distribution Partners)
        type: headline
        numbered: false
      info4:
        label: Info
        type: info
        text: |
          1. Input alt tags here in case you have not added them to all images while uploading.
  - width: 1/1
      fields: 
        level_4:
          label: Level 4 heading
          type: text

  - width: 1/1
      fields: 
        level_4_block_slider_images:
          label: Level 4 Block Sliders Images
          type: structure
          fields:
            slider_images:
              label: Company Images
              type: files
              layout: cards
              info: "{{ file.niceSize }} - {{ file.dimensions }} <br> {{ file.modified('d-m-Y h:i A') }}"
              image:
                ratio: 5/4
                required: false
              size: small
              max: 1
            slider_placeholder:
              label: Image Alternative text
              type: text
            slider_link:
              label: Link
              type: text
                
# Level 4 ends

# Level 5 starts Key Hilights
  - width: 1/1
    fields:
      line5:
        type: line
      pageSettings5:
        label: Level 5 (Key Hilights)
        type: headline
        numbered: false
      info5:
        label: Info
        type: info
        text: |
          > Each Image must have its "alt" tag. Goto to top, click on the image listed there and add it "alternate text".
          > Multiple Download links are not recommended as per design. Only 1 download link is recommended.
          > In Category to show content in bold use, "&lt;span class="font-weight-semibold"&gt;Type Content here&lt;/span&gt;"
          > An Example of Category will be "MARKET INSIGHTS &lt;span class="font-weight-semibold"&gt;/ April 2020&lt;/span&gt;"
  - width: 1/1
      fields: 
        level_5:
          label: Level 5 heading
          type: text

  - width: 1/1
      fields:
        # lemnisk For Dynamic Content
        l5_lmnsk_section:
          width: 1/2
          label: Level 5 lemnisk In Section
          type: textarea
        l5_lmnsk_category:
          width: 1/2
          label: Level 5 lemnisk Event Category
          type: textarea          

  - width: 1/1
      fields: 
        level_5_block:
          label: Level 5 Details
          type: structure
          fields:
            slider_images:
              label: Image
              type: files
              layout: cards
              info: "{{ file.niceSize }} - {{ file.dimensions }} <br> {{ file.modified('d-m-Y h:i A') }}"
              image:
                ratio: 5/4
              size: small
            level_5_category:
              label: Category
              type: text
            level_5_heading:
              label: Heading
              type: text
            level_5_short_info:
              label: Short Info
              type: text
            level_5_read_text:
              label: Read text
              type: text
            level_5_read_link:
              label: Read Link
              type: text
            level_5_download_text:
              lebel: Download text
              type: text
            level_5_download_links:
              lebel: Download Links
              type: structure
              fields:
                l5_download_links:
                  label: Download Link(Only internal links)
                  type: text
                level_5_copy_link:
                  label: Copy Link
                  type: textarea
                level_5_whatsapp_link:
                  label: Whatsapp Link
                  type: textarea
                level_5_whatsapp_msg:
                  label: Whatsapp msg
                  type: textarea
                level_5_twitter_link:
                  label: Twitter Link
                  type: textarea
                level_5_twitter_msg:
                  label: Twitter msg
                  type: textarea
              max: 2                              
          min: 3
# Level 5 ends
# Page Ticker
  - width: 1/1
    fields: 
      page_ticker:
        label: Page Ticker
        type: textarea
# Level 6 Twitter Links
  - width: 1/1
    fields:
      line6:
        type: line
      pageSettings6:
        label: Twitter Configuration
        type: headline
        numbered: false
      info6:
        label: Info
        type: info
        text: |
          <h3>Select from the below dropdown the DISPAY configuration you want to go for. Below each config is explained in short.</h5>
            <b>All tweets with images</b> - Only 3 tweets can be added, as image takes more space.
            <b>Tweets Images on both sides only</b> - <b>Left and Right</b> will have <b>single</b> tweet with image each and <b>Middle</b> we can add <b>2 small</b> text tweets.
            <b>Left Image rest all text</b> - Only <b>Left</b> will have <b>single</b> tweet with image. <b>Middle and Right</b> we can add <b>2 small</b> text tweets each.
            <b>Middle Image rest all text</b> - Only <b>Middle</b> will have <b>single</b> tweet with image. <b>Left and Right</b> we can add <b>2 small</b> text tweets each.
            <b>Right Image rest all text</b> - Only <b>Right</b> will have <b>single</b> tweet with image. <b>Left and Middle</b> we can add <b>2 small</b> text tweets each.
            <b>Dynamic</b> - This feature is not yet developed. Please do not use this.
          <br>
          <h3>Steps to embed a tweets</h3>
          Go to <a target="_blank" href="https://help.twitter.com/en/using-twitter/how-to-embed-a-tweet">Link</a>
          Follow the steps to get the tweet then once you get the code paste it here depending upon the tweet and the <b>DISPAY</b> config.

  - width: 1/1
    sections:
      content:
        type: fields
        fields:
          postType:
            label: Twitter Configuration
            type: select
            options:
              - All tweets with images
              - Tweets Images on both sides only
              - Left Image rest all text
              - Middle Image rest all text
              - Right Image rest all text
              - Dynamic
      awi:
        type: fields
        fields:
          line_awi:
            type: line
          pageSettings_awi:
            label: All tweets with images
            type: headline
            numbered: false
          info_awi:
            label: Info
            type: info
            text: |
              Only 3 tweets can be added, as image takes more space.     
          awi_link_left:
            label: Twitter status link left
            type: textarea
          awi_link_middle:
            label: Twitter status link middle
            type: textarea
          awi_link_right:
            label: Twitter status link right
            type: textarea
        when:
          postType: All tweets with images  
      iob:
        type: fields
        fields:
          line_iob:
            type: line
          pageSettings_iob:
            label: Tweets Images on both sides only
            type: headline
            numbered: false
          info_iob:
            label: Info
            type: info
            text: |
              <b>Left and Right</b> will have <b>single</b> tweet with image each and <b>Middle</b> we can add <b>2 small</b> text tweets.        
          iob_link_left:
            label: Twitter status link left
            type: textarea
          iob_link_upper_middle:
            label: Twitter status link upper middle
            type: textarea
          iob_link_lower_middle:
            label: Twitter status link lower middle
            type: textarea
          iob_link_right:
            label: Twitter status link right
            type: textarea
        when:
          postType: Tweets Images on both sides only  
      lio:
        type: fields
        fields:
          line_lio:
            type: line
          pageSettings_lio:
            label: Left Image rest all text
            type: headline
            numbered: false
          info_lio:
            label: Info
            type: info
            text: |
              Only <b>Left</b> will have <b>single</b> tweet with image. <b>Middle and Right</b> we can add <b>2 small</b> text tweets each.
          lio_link_left:
            label: Twitter status link left
            type: textarea
          lio_link_upper_middle:
            label: Twitter status link upper middle
            type: textarea
          lio_link_lower_middle:
            label: Twitter status link lower middle
            type: textarea
          lio_link_upper_right:
            label: Twitter status link upper right
            type: textarea
          lio_link_lower_right:
            label: Twitter status link lower right
            type: textarea
        when:
          postType: Left Image rest all text 
      mio:
        type: fields
        fields:
          line_mio:
            type: line
          pageSettings_mio:
            label: Middle Image rest all text
            type: headline
            numbered: false
          info_mio:
            label: Info
            type: info
            text: |
              Only <b>Middle</b> will have <b>single</b> tweet with image. <b>Left and Right</b> we can add <b>2 small</b> text tweets each.
          mio_link_upper_left:
            label: Twitter status link upper left
            type: textarea
          mio_link_lower_left:
            label: Twitter status link lower left
            type: textarea
          mio_link_middle:
            label: Twitter status link middle
            type: textarea
          mio_link_upper_right:
            label: Twitter status link upper right
            type: textarea
          mio_link_lower_right:
            label: Twitter status link lower right
            type: textarea
        when:
          postType: Middle Image rest all text 
      rio:
        type: fields
        fields:
          line_rio:
            type: line
          pageSettings_rio:
            label: Right Image rest all text
            type: headline
            numbered: false
          info_rio:
            label: Info
            type: info
            text: |
              Only <b>Right</b> will have <b>single</b> tweet with image. <b>Left and Middle</b> we can add <b>2 small</b> text tweets each.
          rio_link_upper_left:
            label: Twitter status link upper left
            type: textarea
          rio_link_lower_left:
            label: Twitter status link lower left
            type: textarea
          rio_link_upper_middle:
            label: Twitter status link upper middle
            type: textarea
          rio_link_lower_middle:
            label: Twitter status link lower middle
            type: textarea
          rio_link_right:
            label: Twitter status link right
            type: textarea
        when:
          postType: Right Image rest all text                                    
      dyn:
        type: fields
        fields:
          dynamic_tweets:
            type: textarea
        when:
          postType: Dynamic

  - width: 1/1
      fields: 
            twitter_handler_link:
              label: Twitter Handler Link
              type: text