Author Topic: BoardNews for Frontpage block (Read 55469 times)

zapiy · « **on:** February 28, 2012, 12:56:00 PM »

Is there a block that would display or topics like this?

Cheers

andy · « **Reply #1 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.

zapiy · « **Reply #2 on:** February 28, 2012, 02:56:41 PM »

I was hoping for a mod.. I just dont have the knowledge to do it.

andy · « **Reply #3 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.

zapiy · « **Reply #4 on:** February 29, 2012, 06:04:52 AM »

I have looked fella, sadly nothing appears to fit the bill.

AngelinaBelle · « **Reply #5 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.

zapiy · « **Reply #6 on:** February 29, 2012, 03:34:00 PM »

Yes please?

andy · « **Reply #7 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.

AngelinaBelle · « **Reply #8 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?

andy · « **Reply #9 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.

zapiy · « **Reply #10 on:** March 01, 2012, 07:01:43 PM »

Quote from: 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?

Thanks, usless i can get the block to do whats in that image i would not want to waste your time?

AngelinaBelle · « **Reply #11 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.

katoon · « **Reply #12 on:** June 08, 2012, 11:00:10 AM »

could this look any better?

AngelinaBelle · « **Reply #13 on:** June 08, 2012, 11:41:12 AM »

That looks pretty good.

kimyaci · « **Reply #14 on:** August 27, 2012, 06:45:46 PM »

How is this?

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

user: demo
pass: demo

andy · « **Reply #15 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.

kimyaci · « **Reply #16 on:** August 28, 2012, 08:08:08 AM »

Quote from: igirisjin 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.

Hi
Yes, there are resizing images.Thanks for the comment.

FrizzleFried · « **Reply #17 on:** August 29, 2012, 10:55:50 AM »

Quote from: igirisjin 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.

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

AngelinaBelle · « **Reply #18 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.

velorooms · « **Reply #19 on:** October 02, 2012, 07:56:16 PM »

looks good. are you going to share the code when its done

radu81 · « **Reply #20 on:** July 03, 2013, 04:55:26 PM »

I'm also interested, pls share it

pugsx · « **Reply #21 on:** May 24, 2014, 10:36:18 AM »

Would like something like this.

sorry for reviving old post

zapiy · « **Reply #22 on:** November 12, 2014, 07:10:28 PM »

Yeah is this possible?

langel · « **Reply #23 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

zapiy · « **Reply #24 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

langel · « **Reply #25 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!

zapiy · « **Reply #26 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.

langel · « **Reply #27 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

zapiy · « **Reply #28 on:** November 14, 2014, 06:37:05 PM »

I am lost, could you do a guide please?

zapiy · « **Reply #29 on:** December 22, 2014, 10:43:42 AM »

Anyone willing to help me out please?

sub5 · « **Reply #30 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

This is how it turned out to be

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.

Infernus · « **Reply #31 on:** December 26, 2014, 09:31:08 AM »

How does it look now then?

sub5 · « **Reply #32 on:** December 26, 2014, 02:27:36 PM »

Quote from: Infernus on December 26, 2014, 09:31:08 AM

How does it look now then?

It looks like this

Instead of Like this

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.

Chen Zhen · « **Reply #33 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.

sub5 · « **Reply #34 on:** December 26, 2014, 06:05:47 PM »

Quote from: 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.

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>';
      }
   }

Infernus · « **Reply #35 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:

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.

sub5 · « **Reply #36 on:** December 27, 2014, 06:21:59 AM »

Quote from: 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:
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

Load default image, if no image is found in topic.
Optimize/cache small images + avatars, instead of using huge ones.

Infernus · « **Reply #37 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

, how awesome is that)

sub5 · « **Reply #38 on:** December 27, 2014, 12:55:27 PM »

Quote from: 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.

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

sub5 · « **Reply #39 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?

sub5 · « **Reply #40 on:** February 14, 2015, 06:33:31 AM »

Finally i fix my issue, thanks to all the tried helping out.

Simple Portal Archived Forum

User Info

Who's Online

Shoutbox

Team Blog

Recent Posts

Author Topic: BoardNews for Frontpage block (Read 55469 times)