New Layout: Article View

[Bob]

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.


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


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).

 

[BT012SS]

 

[Veer]

@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 also this way article listing page has become too lengthy with 10 to 15 articles per page.

 

[Bob]

@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 also this way article listing page has become too lengthy with 10 to 15 articles per page.

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

 

[Bob]

article listing page has become too lengthy with 10 to 15 articles per page.

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.

 

[Veer]

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

 

[BT012SS]

You mean this?

 

[Bob]

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

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)




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




Here we change it to 500 Characters (Letters).


And this is what it looks like now (significant difference)

also this way article listing page has become too lengthy with 10 to 15 articles per page.

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)








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.



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.



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.

 

[Veer]

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

I wanted to do it like this

 

[Bob]

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.



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.

 

[viper357]

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.

 

[Bob]

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.

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.

    .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

        .Responsive .showcaseArticleViewItem .articleImage
        {
            width: 25%;
            min-width: 175px;
            max-width: 175px;
        }

MEDIUM breaking point

        .Responsive .showcaseArticleViewItem .articleImage
        {
            width: 20%;
            min-width: 150px;
            max-width: 150px;
        }

NARROW breaking point

        .Responsive .showcaseArticleViewItem .articleImage
        {
            width: 100%;
            max-width: 100%;
            display: block;
            float: none;
            margin: 0px 0px;
        }

 

[viper357]

Thanks Bob, great info.