e107inc / e107

e107 Bootstrap CMS (Content Management System) v2 with PHP, MySQL, HTML5, jQuery and Twitter Bootstrap. Issue Discussion Room: https://gitter.im/e107inc/e107
https://e107.org
GNU General Public License v3.0
322 stars 214 forks source link

[question] How to use container class (col-md-) conditionally in template files? #1691

Closed lonalore closed 2 years ago

lonalore commented 8 years ago

Just a simple example:

Suppose that I have a template file, which contains something like this:

<div class="row">
    <div class="col-md-4">
        {NEWSIMAGE}
    </div>
    <div class="col-md-8">
        {NEWSBODY}
    </div>
</div>

But what if I want to use col-md-12 for news-body if no image? How can I achive this?

So, if no image for news item, the layout would be this:

<div class="row">
    <div class="col-md-12">
        {NEWSBODY}
    </div>
</div>

Only solution I know is overriding news_schortcodes.php (I copy e107_core/shortcodes/batch/news_shortcodes.php file into e107_core/override/shortcodes/batch folder) and modifying it according to my custom needs. For example I create new shortcode methods (sc_newsimage_class() and sc_newsbody_class()) to get CSS class depending on whether or not the image exists.

Finally, template would be this:

<div class="row">
    <div class="{NEWSIMAGE_CLASS}">
        {NEWSIMAGE}
    </div>
    <div class="{NEWSBODY_CLASS}">
        {NEWSBODY}
    </div>
</div>

If no image, {NEWSIMAGE_CLASS} would return with 'hidden', and {NEWSBODY_CLASS} with 'col-md-12'.

However, this is not a good solution, because the whole shortcode class (file) will be overrided, and it's hard to keep track of changes with each (core) update.

The best solution would be that:

What would be the best solution to achive this?

Jimmi08 commented 8 years ago

I am using this: https://github.com/Jimmi08/e107_snippets/issues/8

lonalore commented 8 years ago

Ohh thank you! So I can retrieve the current news item in a theme shorcode with using $sc->getScVar('news_item');. Good to know! :D Thank you! I always thought that I could retrieve current news item only inside news_shortcodes() class. :)

lonalore commented 8 years ago

So, all I have to do is placing these shortcode methods into my theme_shortcodes.php file:

  function sc_newsimage_class()
  {
    $sc = e107::getScBatch('news');
    $data = $sc->getScVar('news_item');

    if(empty($data['news_thumbnail']))
    {
      return 'hidden';
    }

    return 'col-md-4';
  }

  function sc_newsbody_class()
  {
    $sc = e107::getScBatch('news');
    $data = $sc->getScVar('news_item');

    if(empty($data['news_thumbnail']))
    {
      return 'col-md-12';
    }

    return 'col-md-8';
  }

...then I can use this in my template file(?):

<div class="row">
    <div class="{NEWSIMAGE_CLASS}">
        {NEWSIMAGE}
    </div>
    <div class="{NEWSBODY_CLASS}">
        {NEWSBODY}
    </div>
</div>
Jimmi08 commented 8 years ago

Yes, and you can override original core shortcode too (batch version), look here (look f.e. for news_summary): https://github.com/rica-carv/e107_theme-selospt_v2/blob/master/theme_shortcodes.php just not forget $override variable set true.

There were big changes with shortcodes, Cameron really did a lot of work, and good work. You can do the same with plugin global shortcodes (I know you use batch version with your plugins, but if you put some shortcodes to e_shortcodes, they can be overridden by theme or you can use them in other theme templates, And I think that with global plugin shortcodes you can override core shortcodes too). Somewhere is explanation to this... it was discussed on 3 different places, but I will look for it. It's absolutelly amazing and people don't know about this.

Jimmi08 commented 8 years ago

I found it: (look for Cam. explanations from 30. April) https://github.com/e107inc/e107/issues/1484

I feel stupid now becaue he already answer there my other issue (how use it with page). I just forget.

lonalore commented 8 years ago

just not forget $override variable set true.

I updated my comment. Thank you! As soon as I have time I will try it. :)

Jimmi08 commented 8 years ago

No, you need that variable only if you use the same name as core shortcodes.

By the way. With your template you get empty div if there is no image. I would do something like this:

$NEWS_WRAPPER['your template']['NEWSIMAGE'] = '<div class="col-md-4">{---}</div>';
<div class="row">
        {NEWSIMAGE} 
    <div class="{NEWSBODY_CLASS}">
        {NEWSBODY}
    </div>
</div>
lonalore commented 8 years ago

Okay, I removed it from my comment... :D

Well, I tried it out, and it works. I printed CSS class out in body: kepernyokep - 2016-06-08 - 16 02 24

So, it works! Thank you! :D

Jimmi08 commented 8 years ago

You are welcome. I like your solution better than mine, there is no missing opening div in template. By the way, next example:
https://github.com/Jimmi08/e107_snippets/issues/9

rica-carv commented 8 years ago

@Jimmi08 Well, my solution was before i know how to make news wrapper working....

Anyway, with the news wrapper solution or mine solution there's also no need for shortcode replacement, is just plain & simple templating.....

Jimmi08 commented 8 years ago

@rica-carv you will see that you need it to change class with body text (second column). I tried this before too. But maybe you find it, I am curious.

rica-carv commented 8 years ago

@Jimmi08 Now i see, with my approach & wrapper, it won't really work.... So, i'll stick to my template approach, since it's working like a charm, no whistles or bells.... Frankly, i can't see why you need a bootstrap class for a full page width div...... Wrapping all line with a precendent div with class row row-fluid will simply adjust the div width to the max permited on the screen.... Items inside the div adapts automatically to the div inner space..... Is semantically wrong? Maybe, but for me gets the job donne without to much assle....

Moc commented 6 years ago

Is this issue still relevant?

Jimmi08 commented 2 years ago

@Moc this could be closed.