1. REGISTRATION REQUIREMENTS:

    Your username here MUST MATCH your XenForo username (connected to your XF license).

    Once you have registered here, then you need to start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

New Layout: Article View

Discussion in 'Showcase Closed Suggestions' started by Bob, Dec 4, 2014.

  1. Bob

    Bob Developer Staff Member

    As previously hinted, Showcase has a new layout that can be used for various Showcase Item lists. This new layout actually comes from a new ADDON of mine called AMS (Article Management System) (COMING SOON).

    This layout is perfect for Items that have A LOT of TEXT (hence why it is called ARTICLE View). It is not great for Items that have little to no Text in the First Tab (those items should use one of the other layout types that are not TEXT based).

    The Layout consists of a LARGE(ISH) Responsive Photo, Title (with prefix), Featured Note (if featured), Rating (if rated or reviewed), Custom Fields (if set to display on the layout), a Snippet of the message body from TAB 1 (admin configurable snippet length).

    Here is a sneak peek.

    This shot is on a 27 inch wide screen monitor. The image is fairly large because of the available space. You can also see that there are a couple custom fields being displayed.
    Selection_467.png

    This shot is via Tablet with no sidebar. The image is still large, but not nearly as large as on a wide screen monitor.
    Selection_465.png

    This shot is NARROW view responsive (Smart Phone). It has a nice large image, followed by all the same data as the other responsive break points (nothing is removed).
    Selection_466.png
     
    resonansER, Veer, leotran and 4 others like this.
  2. BT012SS

    BT012SS Active Member AMS Premium Showcase Pickem

    [​IMG]
     
    Bob likes this.
  3. Veer

    Veer Member Showcase

    @Bob I need to change the letters limit, by default its too long and I don't want to let visitors read everything on article listing page :D also this way article listing page has become too lengthy with 10 to 15 articles per page.
     
  4. Bob

    Bob Developer Staff Member

    There are OPTIONS for setting the amount of characters for the Article view layouts.
     
  5. Bob

    Bob Developer Staff Member

    There are options to set the amount of articles for the Showcase Home. Category's also have their own setting, so that if you use Article View for Category A, you can set 5 items per page where as if you use List View for Category B, you can set 20 items per page.
     
  6. Veer

    Veer Member Showcase

    @Bob Yeah I know that but I was asking about the LETTERS limit of each article displayed in Showcase Home and Category pages.
     
  7. BT012SS

    BT012SS Active Member AMS Premium Showcase Pickem

    You mean this?

    showcase3.JPG
     
    Veer and Bob like this.
  8. Bob

    Bob Developer Staff Member

    The Item Snippet Length IS the amount of "LETTERS" (technical term is Characters).

    The 3 RED Arrows point to the setting that controls the amount of characters (LETTERS) for the 'Article View' lists (applies to the Article View Layout for Home, Category, Member, Tags, etc when using the Article View Layout)

    Selection_743.png


    Here is what 1500 Characters (Letters) looks like (which you probably have not changed from default)
    Selection_748.png



    Here we change it to 500 Characters (Letters).

    Selection_750.png
    And this is what it looks like now (significant difference)
    Selection_749.png




    Then CHANGE the amount of items per page. EACH area (Showcase Home, Catagory Pages, Member Pages, Tag Results Pages etc has an option for setting the amount of items per page. Its been in showcase for YEARS.

    NOTE: Each CATEGORY also has the option of over riding the Global Category Setting so that you can have Categories that use the LIST View layout and have 30 items per page and other Categories that use the Article View layout and have 5 Items per page. (See the last image below)


    Selection_744.png


    Selection_745.png

    Selection_746.png

    Here is a screen shot of Showcase Home set to 3 Items per page with Article View Layout and a snippet length set to 500 Characters.
    Selection_751.png


    And at the same time, here is a screen shot of Showcase CATEGORY set to 5 Items per page with Article View Layout and a snippet length set to 500 Characters.
    Selection_752.png


    A pointed out above, Each CATEGORY also has the option of over riding the Global Category Setting so that you can have Categories that use the LIST View layout and have 30 items per page and other Categories that use the Article View layout and have 5 Items per page.
    Selection_747.png
     
    BT012SS and Veer like this.
  9. Veer

    Veer Member Showcase

    Thanks @Bob that is what exactly I was looking for but just missed the option "Item Snippet Length: Article View List" :oops:

    I wanted to do it like this :)

    [​IMG]
     
    Bob likes this.
  10. Bob

    Bob Developer Staff Member

    I've added more functionality to this. Each place that you are able to set the Layouts for item lists now have a couple additional options pertaining to the Article View Layout.

    Float Cover Image Right
    Show Rating
    Show Custom Fields
    Enable limited BB Code Parsing
    Items Snippet Length


    Here you can see that the "New Items" page has the option to set a "layout" so it comes with the new options giving you a lot more control over how this specific page looks. Each major area that lets you set a Layout has these options.

    Selection_777.png

    In this example, the Showcase Home is set to Article View Layout, Float Image Right is enabled, Show Rating is enabled, Show Custom Fields is enabled and Enabled limited BB Code parsing is enabled. You can have a custom snippet length for each major area now as well (in case you want say 1000 characters on Showcase Home for 5 Items and on Category Pages you might only want 500 characters with fields and 10 items per page with the image not floated.

    Selection_778.png
     
    Veer, 3rd angle and alfa1 like this.
  11. viper357

    viper357 New Member CAS Premium SC Premium

    Hi Bob, how do we change the size of the floating image/thumbnail in Article View? Can't seem to find a setting anywhere. Thanks.
     
  12. Bob

    Bob Developer Staff Member

    There are no STYLE PROPERTIES if that is what you are asking. THe only Style Properties I add for my addons are for the RESPONSIVE LAYOUTS.

    Each layout type in showcase has its OWN CSS file that only pertains to that Layout. Article View = nflj_showcase_layout_article_view_item.css. You can edit that CSS file directly OR use Extra.css to override (which is probably the best).

    The layout is specifically designed for static images sizes for the various xenforo responsive breaking points. You can change the static min-max widths for each responsive breaking point and let the width percentage control the size, however, you might run into problems if you don't understand how CSS works and understand the design of the layout.

    HTML:
        .showcaseArticleViewItem .articleImage
        {
            width: 30%;
            min-width: 200px;
            max-width: 200px;
        }
    At the bottom of the CSS file is where all the RESPONSIVE CSS is located. Each breaking point has CSS that changes specific classes. In Article View, one of those is changing the image size at all breaking points.

    WIDE breaking point
    HTML:
            .Responsive .showcaseArticleViewItem .articleImage
            {
                width: 25%;
                min-width: 175px;
                max-width: 175px;
            }
    MEDIUM breaking point
    HTML:
            .Responsive .showcaseArticleViewItem .articleImage
            {
                width: 20%;
                min-width: 150px;
                max-width: 150px;
            }
    NARROW breaking point
    HTML:
            .Responsive .showcaseArticleViewItem .articleImage
            {
                width: 100%;
                max-width: 100%;
                display: block;
                float: none;
                margin: 0px 0px;
            }
     
  13. viper357

    viper357 New Member CAS Premium SC Premium

    Thanks Bob, great info. :)
     
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.