Chapter full width not working

  • globalreporter

    (@globalreporter)


    8 years ago

    Hello,
    I am a new Aesop user.
    Great plugin, but I have troubles to make it work with my theme. I would like to have a full width chapter like in this example: https://features.texasmonthly.com/editorial/hidden-texas/
    I do not have an Aesop theme. I have a free theme called Aperture.
    I have read the quick start guide here: https://aesopstoryengine.com/developers/
    So far, I have tried to apply the instructions in the following sections:

    Utilizing Full-width Feature

    I added the following in the Custom CSS plugin:

    p,
    .aesop-content {
    width:100%;
    max-width:960px;
    margin:0 auto;
    }

    p,
    .aesop-header {
    width:100%;
    max-width:960px;
    margin:0 auto;
    }

    Timeline & Chapter Component Integrations

    I do not know in which template file I need to add these codes:

    Pre 1.0.5
    do_action(‘aesop_inside_body_top’);
    1.0.5+
    do_action(‘ase_theme_body_inside_top’);

    I added this class .aesop-entry-header to the page where the chapter should be displayed here:
    https://stories.mobilereporter.info/page-1/

    I did not understand if I need to add to the same page also the class: .aesop-entry-content

    Component Hooks

    I added this code to the Code snippet plugin:

    {{ aesop_chapter_before }}

    // if video is bg type

    <section id=”chapter-hash-HASH” class=”aesop-article-chapter-wrap default-cover aesop-video-chapter aesop-component”>{{ aesop_chapter_inside_top }}
    <div class=”aesop-article-chapter clearfix” style=”height: auto;”><span class=”aesop-chapter-title”>LABEL</span>
    <h2 class=”aesop-cover-title”>TITLE<small>SUBTITLE</small></h2>
    <div class=”video-container”>

    “IMG”

    </div>
    </div>
    {{ aesop_chapter_inside_bottom }}

    </section>// else if img is bg type

    <section id=”chapter-hash-HASH” class=”aesop-article-chapter-wrap default-cover aesop-component”>{{ aesop_chapter_inside_top }}
    <div class=”aesop-article-chapter clearfix” style=”background: url(‘IMG’) center center; background-size: cover;”><span class=”aesop-chapter-title”>LABEL</span>
    <h2 class=”aesop-cover-title”>TITLE<small>SUBTITLE</small></h2>
    </div>
    {{ aesop_chapter_inside_bottom }}

    </section>{{ aesop_chapter_after }}

    THE CHAPTER STILL DOES NOT SHOW IN FULL WIDTH. I WOULD BE GRATEFUL IF SOMEONE COULD EXPLAIN WHAT EXACTLY I NEED TO DO. I AM NOT A CODER, SO PLEASE TRY TO EXPLAIN IN THE MOST SIMPLE WAY. THANKS

Viewing 1 replies (of 1 total)
  • Thread Starter globalreporter

    (@globalreporter)

    I forgot to say that I have already added in the Code snippet plugin this code:

    add_theme_support( “aesop-component-styles”, array( “parallax”, “image”, “quote”, “gallery”, “content”, “video”, “audio”, “collection”, “chapter”, “document”, “character”, “map”, “timeline” ) );

Viewing 1 replies (of 1 total)
  • The topic ‘Chapter full width not working’ is closed to new replies.

Tags