SimplePortal
Customization => Blocks and Modifications => Topic started 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
-
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.
-
I was hoping for a mod.. I just dont have the knowledge to do it.
-
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.
-
I have looked fella, sadly nothing appears to fit the bill.
:'(
-
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.
-
Yes please? :nervous-happy:
-
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.
-
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?
-
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.
-
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?
-
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.
-
could this look any better?
(http://i45.tinypic.com/2lkwcrc.png)
-
That looks pretty good.
-
(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
-
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.
-
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.
-
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....
-
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.
-
looks good. are you going to share the code when its done
-
I'm also interested, pls share it ;)
-
Would like something like this.
sorry for reviving old post
-
Yeah is this possible?
-
Yes is posible, look my web: http://www.aplicacionesmart.com/index.php
Although it looks different, the principle is the same, only div & css
-
Wow, would you be willing to share or help me out please?
my site is www.retrovideogamer.co.uk
-
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! :)
-
I followed that and crashed the site, the English is broken so i am slightly worried i did it wrong.
-
It is possible, although not very difficult to adapt to portalblocks.php
I recommend you do it there, and not in the SSI
-
I am lost, could you do a guide please?
-
Anyone willing to help me out please?
-
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
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
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
.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.
-
How does it look now then?
-
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.
-
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.
-
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
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
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>';
}
}
-
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.
-
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.
-
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)
-
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,
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.
-
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?
-
Finally i fix my issue, thanks to all the tried helping out.