SimplePortal

Customization => Blocks and Modifications => Topic started by: zapiy on February 28, 2012, 12:56:00 PM

Title: BoardNews for Frontpage block
Post by: zapiy on February 28, 2012, 12:56:00 PM
Is there a block that would display or topics like this?

(http://i940.photobucket.com/albums/ad242/zapiy/Articles.jpg)

Cheers
Title: Re: Frontpage block
Post by: andy on February 28, 2012, 02:36:15 PM
This is a Joomla website ... a recent posts block will do the same for smf/sportal but not sure about resized article/topic images displayed.
Might be a mod for that ...

Blocweb  templates did exactly the same but recently shut down.
Title: Re: Frontpage block
Post by: zapiy on February 28, 2012, 02:56:41 PM
I was hoping for a mod.. I just dont have the knowledge to do it.
Title: Re: Frontpage block
Post by: andy on February 29, 2012, 02:06:24 AM
Look around ... smf and here - recent posts with images.
At least you can just do the same without the images using recent posts block. It will show the users avatar if that is useful.
Title: Re: Frontpage block
Post by: zapiy on February 29, 2012, 06:04:52 AM
I have looked fella, sadly nothing appears to fit the bill.

 :'(
Title: Re: Frontpage block
Post by: AngelinaBelle on February 29, 2012, 09:56:14 AM
It should be possible to do the same to articles, or to sp_articles block or a boardnews block.

If you are interested, this is a customization project, involving mostly HTML and CSS. Very little PHP knowledge will be required.
Title: Re: Frontpage block
Post by: zapiy on February 29, 2012, 03:34:00 PM
Yes please? :nervous-happy:
Title: Re: Frontpage block
Post by: andy on February 29, 2012, 11:50:38 PM
Would be a nice addition to have a recent topics/select board with preview image, ... or same for article block.
Does it select the first image in an article or allow selection of any image, or uploaded image...? And the resize image?

Its a popular style of display for Joomla K2 content management, Drupal CCK, and blogs.
Title: Re: Frontpage block
Post by: AngelinaBelle on March 01, 2012, 08:07:10 AM
OK.  I have moved this to customization.

Actually, I would not promise the images and the image layout. Because that would almost certainly require changes on the database. And I am not so confident in doing that.  I have never packaged a mod, myself.

Here is what I would propose to help you with:
1) Begin with BoardNews, because it is already closest to what you wish to achieve
2) Change the style for the heading

If you want the picture layout to be like that, you will have to find another way. You can use a bbc table, or you can use HTML to create a floating img, or you can use the AEVA Media mod, for example (the caveat with AEVA Media is that its author will not be updating it for future versions of SMF).

I am not an awesome coder. So I will get you started and you will wind up learning quite a bit.
Ready?
Title: Re: BoardNews for Frontpage block
Post by: andy on March 01, 2012, 10:26:29 AM
The image makes the difference so without it the current blocks are fine. As its such a hassle ... probably not worth it (for me).
Maybe this year I will start learning php ... maybe. But it seems like a big leap to being able to understand where to get information in SMF and use it.
After Japan I will go back to civil engineering or perhaps back to school to do IT or computer science - again ...
Might specialize in web programming if it looks like I can make a decent living out of it, and the projects look interesting.
Title: Re: Frontpage block
Post by: zapiy on March 01, 2012, 07:01:43 PM
OK.  I have moved this to customization.

Actually, I would not promise the images and the image layout. Because that would almost certainly require changes on the database. And I am not so confident in doing that.  I have never packaged a mod, myself.

Here is what I would propose to help you with:
1) Begin with BoardNews, because it is already closest to what you wish to achieve
2) Change the style for the heading

If you want the picture layout to be like that, you will have to find another way. You can use a bbc table, or you can use HTML to create a floating img, or you can use the AEVA Media mod, for example (the caveat with AEVA Media is that its author will not be updating it for future versions of SMF).

I am not an awesome coder. So I will get you started and you will wind up learning quite a bit.
Ready?

Thanks, usless i can get the block to do whats in that image i would not want to waste your time?
Title: Re: BoardNews for Frontpage block
Post by: AngelinaBelle on March 01, 2012, 07:19:39 PM
I think you can get the block to do what's in the image.
It would mean, I think, that the image that goes with each post would be left-floated even when you look at it.

Here's mod for a a bbcode float tag: http://custom.simplemachines.org/mods/index.php?mod=2305

See if you like it.  The rest is going to be easy, and I can show you how to do it.
Title: Re: BoardNews for Frontpage block
Post by: katoon on June 08, 2012, 11:00:10 AM
could this look any better?

(http://i45.tinypic.com/2lkwcrc.png)
Title: Re: BoardNews for Frontpage block
Post by: AngelinaBelle on June 08, 2012, 11:41:12 AM
That looks pretty good.
Title: Re: BoardNews for Frontpage block
Post by: kimyaci on August 27, 2012, 06:45:46 PM
(http://img11.hostingpics.net/pics/220023ScreenShot026.png) (http://www.hostingpics.net/viewer.php?id=220023ScreenShot026.png)

How is this?

Demo: http://sanal.igo8navigation.com/Portal.php

user: demo
pass: demo
Title: Re: BoardNews for Frontpage block
Post by: andy on August 28, 2012, 06:03:04 AM
Nice...! Is the resizing of the article list image automated  -  a mod?  I saw the SMF float mod but would be nice if you gave the custom code for the rest. Looks more like Joomla and wordpres this way.
Title: Re: BoardNews for Frontpage block
Post by: kimyaci on August 28, 2012, 08:08:08 AM
Nice...! Is the resizing of the article list image automated  -  a mod?  I saw the SMF float mod but would be nice if you gave the custom code for the rest. Looks more like Joomla and wordpres this way.

Hi
Yes, there are resizing images.Thanks for the comment.
Title: Re: BoardNews for Frontpage block
Post by: FrizzleFried on August 29, 2012, 10:55:50 AM
Nice...! Is the resizing of the article list image automated  -  a mod?  I saw the SMF float mod but would be nice if you gave the custom code for the rest. Looks more like Joomla and wordpres this way.

Unfortunately this is how it looks in Firefox 14....

Title: Re: BoardNews for Frontpage block
Post by: AngelinaBelle on August 30, 2012, 07:46:56 AM
You have some xHTML errors.
The browsers are trying to figure out what you probably MEANT to have instead of what you do have.
These may be the cause of the problem.

Of course the marquee tag is nonstandard.  But most browsers deal with it pretty well.  So I assume the problems are related to HTML "syntax errors" like unclosed  tags, improper nesting (<table></center></tr>), etc.

Please fix these problems and see how it looks after that.
Title: Re: BoardNews for Frontpage block
Post by: velorooms on October 02, 2012, 07:56:16 PM
looks good. are you going to share the code when its done
Title: Re: BoardNews for Frontpage block
Post by: radu81 on July 03, 2013, 04:55:26 PM
I'm also interested, pls share it ;)
Title: Re: BoardNews for Frontpage block
Post by: pugsx on May 24, 2014, 10:36:18 AM
Would like something like this.

sorry for reviving old post
Title: Re: BoardNews for Frontpage block
Post by: zapiy on November 12, 2014, 07:10:28 PM
Yeah is this possible?
Title: Re: BoardNews for Frontpage block
Post by: langel on November 14, 2014, 02:01:07 AM
Yes is posible, look my web: http://www.aplicacionesmart.com/index.php

Although it looks different, the principle is the same, only div & css
Title: Re: BoardNews for Frontpage block
Post by: zapiy on November 14, 2014, 07:07:34 AM
Wow, would you be willing to share or help me out please?

my site is www.retrovideogamer.co.uk
Title: Re: BoardNews for Frontpage block
Post by: langel on November 14, 2014, 03:55:58 PM
Yeah sure! look this thread: http://www.simplemachines.org/community/index.php?topic=337240.0

You can do so from SSI or the PortalBlocks.php, everything else is div and css.

Regards! :)
Title: Re: BoardNews for Frontpage block
Post by: zapiy on November 14, 2014, 05:09:15 PM
I followed that and crashed the site, the English is broken so i am slightly worried i did it wrong.
Title: Re: BoardNews for Frontpage block
Post by: langel on November 14, 2014, 06:36:05 PM
It is possible, although not very difficult to adapt to portalblocks.php

I recommend you do it there, and not in the SSI
Title: Re: BoardNews for Frontpage block
Post by: zapiy on November 14, 2014, 06:37:05 PM
I am lost, could you do a guide please?
Title: Re: BoardNews for Frontpage block
Post by: zapiy on December 22, 2014, 10:43:42 AM
Anyone willing to help me out please?
Title: Re: BoardNews for Frontpage block
Post by: sub5 on December 25, 2014, 08:16:07 PM
Hello guys,
I too have been looking for a way to do this for a long time and after going through the tutorial from http://destek.smfmod.com/haber-blogu-t18235.0.htm i was able to do it but i had issues, it did not turn out excitedly like this
(http://img4.hostingpics.net/pics/583839ScreenShot063.png)

This is how it turned out to be
(http://destek.smfmod.com/18235.0/a17357/sk1.png;image)

Please i will appreciate any help on this.

Here is the code i used, for those that are interested in doing this on their site.
Locate your Sources/PortalBlocks.php

Find this
Code: [Select]
   if ($context['SPortal']['core_compat'])
   {
      foreach ($return as $news)
      {
         echo '
               <div class="tborder sp_article_content">
                  <table class="sp_block">
                     <tr class="catbg">
                        <td class="sp_middle">', $news['icon'], '</td>
                        <td class="sp_middle sp_regular_padding sp_fullwidth"><a href="', $news['href'], '" >', $news['subject'], '</a></td>
                     </tr>
                     <tr class="windowbg">
                        <td class="sp_regular_padding" colspan="2">';

         if ($avatars && $news['avatar']['name'] !== null && !empty($news['avatar']['href']))
            echo '
                           <a href="', $scripturl, '?action=profile;u=', $news['poster']['id'], '"><img src="', $news['avatar']['href'], '" alt="', $news['poster']['name'], '" width="30" style="float: right;" /></a>
                           <div class="middletext">', $news['time'], ' ', $txt['by'], ' ', $news['poster']['link'], '<br />', $txt['sp-articlesViews'], ': ', $news['views'], ' | ', $txt['sp-articlesComments'], ': ', $news['replies'], '</div>';
         else
            echo '
                           <div class="middletext">', $news['time'], ' ', $txt['by'], ' ', $news['poster']['link'], ' | ', $txt['sp-articlesViews'], ': ', $news['views'], ' | ', $txt['sp-articlesComments'], ': ', $news['replies'], '</div>';

         echo '
                           <div class="post"><hr />', $news['body'], '<br /><br /></div>
                        </td>
                     </tr>
                     <tr>
                        <td class="windowbg2" colspan="2">
                           <div class="sp_right sp_regular_padding">', $news['link'], ' ',  $news['new_comment'], '</div>
                        </td>
                     </tr>
                  </table>
               </div>';
      }
   }
   else
   {
      foreach ($return as $news)
      {
         echo '
               <div class="cat_bar">
                  <h3 class="catbg">
                     <span class="sp_float_left sp_article_icon">', $news['icon'], '</span><a href="', $news['href'], '" >', $news['subject'], '</a>
                  </h3>
               </div>
               <div class="windowbg sp_article_content">
                  <span class="topslice"><span></span></span>
                  <div class="sp_content_padding">';

         if ($avatars && $news['avatar']['name'] !== null && !empty($news['avatar']['href']))
            echo '
                     <a href="', $scripturl, '?action=profile;u=', $news['poster']['id'], '"><img src="', $news['avatar']['href'], '" alt="', $news['poster']['name'], '" width="30" class="sp_float_right" /></a>
                     <div class="middletext">', $news['time'], ' ', $txt['by'], ' ', $news['poster']['link'], '<br />', $txt['sp-articlesViews'], ': ', $news['views'], ' | ', $txt['sp-articlesComments'], ': ', $news['replies'], '</div>';
         else
            echo '
                     <div class="middletext">', $news['time'], ' ', $txt['by'], ' ', $news['poster']['link'], ' | ', $txt['sp-articlesViews'], ': ', $news['views'], ' | ', $txt['sp-articlesComments'], ': ', $news['replies'], '</div>';

         echo '
                     <div class="post"><hr />', $news['body'], '</div>
                     <div class="sp_right">', $news['link'], ' ',  $news['new_comment'], '</div>
                  </div>
                  <span class="botslice"><span></span></span>
               </div>';
      }   
   }
   if (!empty($per_page))
      echo '
               <div class="sp_page_index">', $txt['sp-articlesPages'], ': ', $page_index, '</div>';
}

Replace with this
Code: [Select]
   if ($context['SPortal']['core_compat'])
   {
      foreach ($return as $news)
      {
         echo '
               <div class="tborder sp_article_content">
                  <table class="sp_block">
                     <tr class="catbg">
                        <td class="sp_middle">', $news['icon'], '</td>
                        <td class="sp_middle sp_regular_padding sp_fullwidth"><a href="', $news['href'], '" >', $news['subject'], '</a></td>
                     </tr>
                     <tr class="roundframe">
                        <td class="sp_regular_padding" colspan="2">';

         if ($avatars && $news['avatar']['name'] !== null && !empty($news['avatar']['href']))
            echo '
                           <a href="', $scripturl, '?action=profile;u=', $news['poster']['id'], '"><img src="', $news['avatar']['href'], '" alt="', $news['poster']['name'], '" width="30" height="30" style="float: right;" /></a><br />
                           <div class="middletext">', $news['time'], ' | ', $txt['by'], ' ', $news['poster']['link'], '</div>';
         else
            echo '
                           <div class="middletext">', $news['time'], ' ', $txt['by'], ' ', $news['poster']['link'], '</div>';

   
                  echo '               
                           <div class="post"><hr /><div class="haberblog">', $news['body'], '<br /><br /></div></div>
                        </td>
                     </tr>
                     <tr>
                        <td class="windowbg2" colspan="2"><hr />
                             <div class="yorumbuton">
                       <div class="yorum">', $txt['sp-articlesViews'], ': ', $news['views'], ' | ', $txt['sp-articlesComments'], ': ', $news['replies'], '</div><div class="buton">', $news['link'], ' ',  $news['new_comment'], '</div></div>
                        </td>
                     </tr>
                  </table>
               </div>';
      }
   }
   else
   {
      foreach ($return as $news)
      {
         echo '
               <div class="cat_bar">
                  <h3 class="catbg">
                     <span class="sp_float_left sp_article_icon">', $news['icon'], '</span><a href="', $news['href'], '" >', $news['subject'], '</a>
                  </h3>
               </div>
               <div class="windowbg sp_article_content">
                  <span class="topslice"><span></span></span>
                  <div class="sp_content_padding">';

         if ($avatars && $news['avatar']['name'] !== null && !empty($news['avatar']['href']))
            echo '
                     <a href="', $scripturl, '?action=profile;u=', $news['poster']['id'], '"><img src="', $news['avatar']['href'], '" alt="', $news['poster']['name'], '" width="30" height="30" class="sp_float_right" /></a><br />
                     <div class="middletext">', $news['time'], ' | ', $txt['by'], ' ', $news['poster']['link'], '</div>';
         else
            echo '
                     <div class="middletext">', $news['time'], ' ', $txt['by'], ' ', $news['poster']['link'], '</div>';

         echo '
                     <div class="post"><hr /><div class="haberblog">', $news['body'], '</div></div><hr />
                       <div class="yorumbuton">
                       <div class="yorum">', $txt['sp-articlesViews'], ': ', $news['views'], ' | ', $txt['sp-articlesComments'], ': ', $news['replies'], '</div><div class="buton">', $news['link'], ' ',  $news['new_comment'], '</div></div>
                  </div>
                  <span class="botslice"><span></span></span>
               </div>';
      }   
   }
   if (!empty($modSettings['articleperpage']) && !empty($context['page_index']))
      echo '
               <div class="sp_page_index">', $txt['sp-articlesPages'], ': ', $page_index, '</div>';
}

Then go to your portal.css and add this code below at the end of it
Code: [Select]
.haberblog {
   
   overflow: auto;
    margin-top: -16px;
}
.haberblog  img
{
   border: 1px solid #5998A7;
   border-radius: 3px;
   -moz-border-radius: 3px;
   margin: 16px 10px 0px 10px;
   -webkit-border-radius: 3px;
    padding: 6px 6px 6px 6px;
    width: 142px;
    height: 85px;
}
.haberblog  li a img
{

   border-radius: 3px;
    width: 142px;
    height: 85px;
}
.yorumbuton
{
   border: 0px solid #5998A7;
   width: 100%;

   overflow: auto;

}
.yorum
{
   border-right: 0px solid #5998A7;
   width: 50%;
   float: left;
    overflow: auto;
    padding: 5px 10px 10px 10px;
}
.buton
{
   border: 0px solid #5998A7;
float: right;
overflow: auto;

cursor: pointer;
padding: 5px 10px 10px 10px;
background: #f7f7f7;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#f7f7f7));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f7f7f7',GradientType=0 );
border-radius: 5px;
}

Thats all. Please i need assistance in making it look the way it should.
Title: Re: BoardNews for Frontpage block
Post by: Infernus on December 26, 2014, 09:31:08 AM
How does it look now then?
Title: Re: BoardNews for Frontpage block
Post by: sub5 on December 26, 2014, 02:27:36 PM
How does it look now then?
It looks like this

(http://destek.smfmod.com/18235.0/a17357/sk1.png;image)

Instead of Like this

(http://img4.hostingpics.net/pics/583839ScreenShot063.png)

I cant seem to figure out what the problem is, thats why i have come for help from all of you. I will be glad if any one can help.
Title: Re: BoardNews for Frontpage block
Post by: Chen Zhen on December 26, 2014, 04:12:28 PM
You forgot an edit from the code you referenced and also it appears to be written for the SMF 1.1.X branch which is apparent from the second edit which you neglected to post.
Title: Re: BoardNews for Frontpage block
Post by: sub5 on December 26, 2014, 06:05:47 PM
You forgot an edit from the code you referenced and also it appears to be written for the SMF 1.1.X branch which is apparent from the second edit which you neglected to post.
Please can you help out, the second edit was found in the fist edit, the one i posted above, that was why i neglected it, and it was also not found in the PortalBlocks.php
Please can i adapt it to work with my 2.0.9 thanks

Here is the 2nd edit code
find this
Code: [Select]
         echo '
                           <div class="post"><hr />', $news['body'], '<br /><br /></div>
                        </td>
                     </tr>
                     <tr>
                        <td class="windowbg2" colspan="2">
                           <div class="sp_right sp_regular_padding">', $news['link'], ' ',  $news['new_comment'], '</div>
                        </td>
                     </tr>
                  </table>
               </div>';
      }
   }

Change to
Code: [Select]
                  echo '               
                           <div class="post"><hr /><div class="haberblog">', $news['body'], '<br /><br /></div></div>
                        </td>
                     </tr>
                     <tr>
                        <td class="windowbg2" colspan="2"><hr />
                             <div class="yorumbuton">
                       <div class="yorum">', $txt['sp-articlesViews'], ': ', $news['views'], ' | ', $txt['sp-articlesComments'], ': ', $news['replies'], '</div><div class="buton">', $news['link'], ' ',  $news['new_comment'], '</div></div>
                        </td>
                     </tr>
                  </table>
               </div>';
      }
   }
Title: Re: BoardNews for Frontpage block
Post by: Infernus on December 27, 2014, 02:30:31 AM
Hoppe you like it, it's pure css. http://jsfiddle.net/17s1Ldjs/6/

Next improvement steps are:

Further you could tweak it up even more, based on what you want it to be.
Title: Re: BoardNews for Frontpage block
Post by: sub5 on December 27, 2014, 06:21:59 AM
Hoppe you like it, it's pure css. http://jsfiddle.net/17s1Ldjs/6/

Next improvement steps are:
  • Include the html code in PortalBlocks.php
  • Include css code in some css file (portal.css should be fine)
  • Load default image, if no image is found in topic.
  • Optimize/cache small images + avatars, instead of using huge ones. 

Further you could tweak it up even more, based on what you want it to be.
Thank you for responding. I am lost please, how do i implement this, which section on the portalblocks.php am i to add include the html code. i dont understand how to go about this also
Title: Re: BoardNews for Frontpage block
Post by: Infernus on December 27, 2014, 08:51:14 AM
You'll have to adapt HTML to PHP code. You showed us a working example above, now what you have to do is replace old HTML code with this one, so CSS rules matches.
Oh, and those steps are optional, I just thought they might be usefull.

Edit:
I think it's possible to create this as a custom block, so source code of portal won't be modified. (A giant block that contains other blocks  ;D, how awesome is that)
Title: Re: BoardNews for Frontpage block
Post by: sub5 on December 27, 2014, 12:55:27 PM
You'll have to adapt HTML to PHP code. You showed us a working example above, now what you have to do is replace old HTML code with this one, so CSS rules matches.
Oh, and those steps are optional, I just thought they might be usefull.
Ok thanks i will try and see if i will get it right,
Quote
Edit:
I think it's possible to create this as a custom block, so source code of portal won't be modified. (A giant block that contains other blocks  ;D, how awesome is that)
I would prefer to use custom block for it but my coding skill is little. if i can get the custom block code of it, i will appreciate.
Title: Re: BoardNews for Frontpage block
Post by: sub5 on December 27, 2014, 06:59:13 PM
I have been on it all day and i am not getting any where, i keeping getting error, there are link on you html code, which i dont understand why you are use those links, i was thinking the code will call up the news and the images just like the one in my first post.

Can you help out with a guide or custom block of the BoardNews for Frontpage?
Title: Re: BoardNews for Frontpage block
Post by: sub5 on February 14, 2015, 06:33:31 AM
Finally i fix my issue, thanks to all the tried helping out.