New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Enhancement: News Grid Menu (Beta) #1512

Closed
CaMer0n opened this Issue Apr 9, 2016 · 11 comments

Comments

3 participants
@CaMer0n
Member

CaMer0n commented Apr 9, 2016

Adds a grid of the latest news items to your website.

End Result:

news_grid_menu_1

Added to the theme layout via the Menu-Manager:

news_grid_menu_2

Configuring the News Grid Menu in the Menu Manager:

news_grid_menu_3

Leave the caption blank to skip using tablestyle().

@todo: LANs in e_menu.php

CaMer0n added a commit that referenced this issue Apr 9, 2016

@CaMer0n CaMer0n added this to the e107 v2.1.2 milestone Apr 10, 2016

@Alex-e107nl

This comment has been minimized.

Show comment
Hide comment
@Alex-e107nl

Alex-e107nl Apr 12, 2016

Hi Cameron, very nice feature again... one little thing, i cannot change the layout.. does it has something to do with line 54 in e_menu.php (plugin news)?

$fields['layout']       = array('title'=> "Layout", 'type'=>'method', 'writeParms'=>'');

Hi Cameron, very nice feature again... one little thing, i cannot change the layout.. does it has something to do with line 54 in e_menu.php (plugin news)?

$fields['layout']       = array('title'=> "Layout", 'type'=>'method', 'writeParms'=>'');
@Alex-e107nl

This comment has been minimized.

Show comment
Hide comment
@Alex-e107nl

Alex-e107nl Apr 14, 2016

Cameron, this change:

$text .= "<tr><td>".$this->radio('layout', $k, $curVal, array('label'=>$k))."</td><td>".str_replace('{STYLE}',"class='alert alert-info' style='margin-bottom:0;text-align:center' ",$v)."</td></tr>";
            $text .= "<tr><td>".$this->radio('layout', $k, ($curVal == $k), array('label'=>$k)."</td><td>".str_replace('{STYLE}',"class='alert alert-info' style='margin-bottom:0;text-align:center' ",$v)."</td></tr>";

gives this error :

Configure parameters

Parse error: syntax error, unexpected ';' in e107_plugins/news/e_menu.php on line 109

Cameron, this change:

$text .= "<tr><td>".$this->radio('layout', $k, $curVal, array('label'=>$k))."</td><td>".str_replace('{STYLE}',"class='alert alert-info' style='margin-bottom:0;text-align:center' ",$v)."</td></tr>";
            $text .= "<tr><td>".$this->radio('layout', $k, ($curVal == $k), array('label'=>$k)."</td><td>".str_replace('{STYLE}',"class='alert alert-info' style='margin-bottom:0;text-align:center' ",$v)."</td></tr>";

gives this error :

Configure parameters

Parse error: syntax error, unexpected ';' in e107_plugins/news/e_menu.php on line 109

CaMer0n added a commit that referenced this issue Apr 14, 2016

@CaMer0n

This comment has been minimized.

Show comment
Hide comment
@CaMer0n

CaMer0n Apr 14, 2016

Member

@Alex-e107nl Thank you!

Member

CaMer0n commented Apr 14, 2016

@Alex-e107nl Thank you!

@CaMer0n

This comment has been minimized.

Show comment
Hide comment
@CaMer0n

CaMer0n Apr 14, 2016

Member

"Source" option added in Menu Manager:

gridsource

Assigning the News item:

newsgrid_assigned_template

Member

CaMer0n commented Apr 14, 2016

"Source" option added in Menu Manager:

gridsource

Assigning the News item:

newsgrid_assigned_template

@CaMer0n CaMer0n closed this Oct 27, 2016

@rica-carv

This comment has been minimized.

Show comment
Hide comment
@rica-carv

rica-carv Oct 31, 2016

Contributor

@CaMer0n Good job, but this for me has a few drawbacks:

  • Missing pagination (or i'm missing something?)
  • Needs a extra menu area. Anyhow, how can it be setup to have news grid on the frontpage, like the option to have the news at the frontpage at the admin ui?

Anyway, i've "created" a little mock up to recreate a news grid system, in custom news_template.php, inside my theme:

// Grid Menu
$NEWS_TEMPLATE['list']['caption']   = ' ';
$NEWS_TEMPLATE['list']['start']    = '<div class="container-fluid"><div class="row">';
$NEWS_TEMPLATE['list']['item']      = '<div class="{NEWSGRID} col-sm-4">
                                                {NEWS_TITLE: link=1}<p>{SETIMAGE:w=250&h=250}{NEWSTHUMBNAIL}
                                                <p>{NEWS_SUMMARY: limit=250}                               
                                           </div>';
$NEWS_TEMPLATE['list']['end']      = '</div></div>';

After simply use the list instead of default (which by the way doesn't use ['default']['start'] & ['default']['end']...)
It's kind of crude (but simpler that to have extra template), but it works (with some persky bugs, which i'm trying to solve)....

Contributor

rica-carv commented Oct 31, 2016

@CaMer0n Good job, but this for me has a few drawbacks:

  • Missing pagination (or i'm missing something?)
  • Needs a extra menu area. Anyhow, how can it be setup to have news grid on the frontpage, like the option to have the news at the frontpage at the admin ui?

Anyway, i've "created" a little mock up to recreate a news grid system, in custom news_template.php, inside my theme:

// Grid Menu
$NEWS_TEMPLATE['list']['caption']   = ' ';
$NEWS_TEMPLATE['list']['start']    = '<div class="container-fluid"><div class="row">';
$NEWS_TEMPLATE['list']['item']      = '<div class="{NEWSGRID} col-sm-4">
                                                {NEWS_TITLE: link=1}<p>{SETIMAGE:w=250&h=250}{NEWSTHUMBNAIL}
                                                <p>{NEWS_SUMMARY: limit=250}                               
                                           </div>';
$NEWS_TEMPLATE['list']['end']      = '</div></div>';

After simply use the list instead of default (which by the way doesn't use ['default']['start'] & ['default']['end']...)
It's kind of crude (but simpler that to have extra template), but it works (with some persky bugs, which i'm trying to solve)....

@CaMer0n

This comment has been minimized.

Show comment
Hide comment
@CaMer0n

CaMer0n Oct 31, 2016

Member

@rica-carv It's not meant to have pagination, anymore than "latest news menu" is meant to have it.
The bootstrap home template has space to add the menu. It could also be hard-coded in the theme template if required.

Member

CaMer0n commented Oct 31, 2016

@rica-carv It's not meant to have pagination, anymore than "latest news menu" is meant to have it.
The bootstrap home template has space to add the menu. It could also be hard-coded in the theme template if required.

@rica-carv

This comment has been minimized.

Show comment
Hide comment
@rica-carv

rica-carv Nov 1, 2016

Contributor

@CaMer0n I know it's not meant to have pagination, since it's a menu, but if i want a similar thing on the news page itself, i can't....

Therefore, i'm trying another approach: make a similar thing for news as currently is at the bootstrap3 admin ui home page....

Contributor

rica-carv commented Nov 1, 2016

@CaMer0n I know it's not meant to have pagination, since it's a menu, but if i want a similar thing on the news page itself, i can't....

Therefore, i'm trying another approach: make a similar thing for news as currently is at the bootstrap3 admin ui home page....

@CaMer0n

This comment has been minimized.

Show comment
Hide comment
@CaMer0n

CaMer0n Nov 2, 2016

Member

@rica-carv Using the 'list' template as you have done is the right way to go about it.
Here's what I have used in the past to have a thumbnail view of the news.

$NEWS_TEMPLATE['list']['caption']   = '{NEWSCATEGORY}';
$NEWS_TEMPLATE['list']['start'] = '{SETIMAGE: w=400&h=350}';
$NEWS_TEMPLATE['list']['end']   = '';
$NEWS_TEMPLATE['list']['item']  = '

    <div class="row">
            <div class="span3 col-md-3">
               <div class="thumbnail news-list-thumbnail">
                    {NEWSTHUMBNAIL=placeholder}
                </div>
            </div>
            <div class="span9 col-md-9">
               <h3 class="media-heading">{NEWSTITLELINK}</h3>
                  <p>
                    {NEWSSUMMARY}
                </p>

            </div>
    </div>

';
Member

CaMer0n commented Nov 2, 2016

@rica-carv Using the 'list' template as you have done is the right way to go about it.
Here's what I have used in the past to have a thumbnail view of the news.

$NEWS_TEMPLATE['list']['caption']   = '{NEWSCATEGORY}';
$NEWS_TEMPLATE['list']['start'] = '{SETIMAGE: w=400&h=350}';
$NEWS_TEMPLATE['list']['end']   = '';
$NEWS_TEMPLATE['list']['item']  = '

    <div class="row">
            <div class="span3 col-md-3">
               <div class="thumbnail news-list-thumbnail">
                    {NEWSTHUMBNAIL=placeholder}
                </div>
            </div>
            <div class="span9 col-md-9">
               <h3 class="media-heading">{NEWSTITLELINK}</h3>
                  <p>
                    {NEWSSUMMARY}
                </p>

            </div>
    </div>

';
@rica-carv

This comment has been minimized.

Show comment
Hide comment
@rica-carv

rica-carv Nov 2, 2016

Contributor

@CaMer0n With that, you get a list view, with thumbnails on the left side:

[THUMBNAIL] [LINK + SUMMARY]
[THUMBNAIL] [LINK + SUMMARY]
[THUMBNAIL] [LINK + SUMMARY]
[THUMBNAIL] [LINK + SUMMARY]

What i'm trying to achieve is a "grid" view, with thumbnails of diferent news side by side, just like the admin ui main page:

[   THUMBNAIL  ]       [   THUMBNAIL  ]       [   THUMBNAIL  ]       [   THUMBNAIL  ]
[LINK + SUMMARY]       [LINK + SUMMARY]       [LINK + SUMMARY]       [LINK + SUMMARY]
Contributor

rica-carv commented Nov 2, 2016

@CaMer0n With that, you get a list view, with thumbnails on the left side:

[THUMBNAIL] [LINK + SUMMARY]
[THUMBNAIL] [LINK + SUMMARY]
[THUMBNAIL] [LINK + SUMMARY]
[THUMBNAIL] [LINK + SUMMARY]

What i'm trying to achieve is a "grid" view, with thumbnails of diferent news side by side, just like the admin ui main page:

[   THUMBNAIL  ]       [   THUMBNAIL  ]       [   THUMBNAIL  ]       [   THUMBNAIL  ]
[LINK + SUMMARY]       [LINK + SUMMARY]       [LINK + SUMMARY]       [LINK + SUMMARY]
@CaMer0n

This comment has been minimized.

Show comment
Hide comment
@CaMer0n

CaMer0n Nov 2, 2016

Member

Sorry, you're right. You can do that easily with bootstrap or use the grid template. (replacing the shortcodes)

Member

CaMer0n commented Nov 2, 2016

Sorry, you're right. You can do that easily with bootstrap or use the grid template. (replacing the shortcodes)

@rica-carv

This comment has been minimized.

Show comment
Hide comment
@rica-carv

rica-carv Nov 2, 2016

Contributor

@CaMer0n That's what i already did:

// Grid Menu
$NEWS_TEMPLATE['list']['caption']   = ' ';
$NEWS_TEMPLATE['list']['start']    = '<div class="container-fluid"><div class="row">';
$NEWS_TEMPLATE['list']['item']      = '<div class="{NEWSGRID} col-sm-4">
                                                {NEWS_TITLE: link=1}<p>{SETIMAGE:w=250&h=250}{NEWSTHUMBNAIL}
                                                <p>{NEWS_SUMMARY: limit=250}                               
                                           </div>';
$NEWS_TEMPLATE['list']['end']      = '</div></div>';

The issue is that the news blocks can be different heights, and sometimes the blocks doesn't align horizontally correct on the grid row....

Solved it with a little css....

Contributor

rica-carv commented Nov 2, 2016

@CaMer0n That's what i already did:

// Grid Menu
$NEWS_TEMPLATE['list']['caption']   = ' ';
$NEWS_TEMPLATE['list']['start']    = '<div class="container-fluid"><div class="row">';
$NEWS_TEMPLATE['list']['item']      = '<div class="{NEWSGRID} col-sm-4">
                                                {NEWS_TITLE: link=1}<p>{SETIMAGE:w=250&h=250}{NEWSTHUMBNAIL}
                                                <p>{NEWS_SUMMARY: limit=250}                               
                                           </div>';
$NEWS_TEMPLATE['list']['end']      = '</div></div>';

The issue is that the news blocks can be different heights, and sometimes the blocks doesn't align horizontally correct on the grid row....

Solved it with a little css....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment