Topic: Need some help with the header block arrangement

[mane-kun]

Well, I'm not completely sure if this post belongs here since is my first post in this community, but basicaly I need some help making my portal look like this guy's website: This website
He's got it like that for articles, I'd like to have the same thing for my blocks, the header block in specific, so whenever I create a new topic on the board I have set up to show in the portal, it will automaticaly rearrange like that on the main page while actually having more pictures and stuff like that on the original post... I don't know if I'm making myself clear.

If you take a look at that link I just posted, you'd see how there's a picture on the left and a small introduction to the post in text, and then you can clik on the post and see that there's more than one picture, but somehow his portal is only taking one of them for the main page (or article page on this case), I'd like to be able to do the same thing if possible, and since I don't have a great knowledge when it comes to something so intricate, I need somebody's help if possible.
My SMF version is 2.0.2 and my SP version is 2.3.5.
Thanks in advance for your answers :3

[mane-kun]

Okay, I've messing around with this, trying to solve it myself, I saw a couple of posts that wanted the same thing I do (http://simpleportal.net/index.php?topic=10766), but they didn't get any straight answer either, so now what i need is if anybody knows where can I get rid of the pictures on the ['body'] tag in PortalBlocks.php but only on the portal, not the whole site... I was thinking that maybe i can "make" another tag (ie: ['thumb']), and make it show the 1st picture from that particular post before the ['body'] tag, so it will basically show:

The content of the post in text only and a limitation of say 200 characters text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Now, when you acces the actual post, it should be displayed with more pictures and stuff, I don't know if I'm making myself clear.

So please, if anybody has any clue on how to do this by modifying maybe the portalblocks.php or something like that, I would really appreciate it.

[AngelinaBelle]

This could be done with some combination of php ( and maybe js.)
Just as portal resizing is now done, using php to "tag" images with class="<something>", and then javascript is used to resize that image when it appears in a portal block (articles or boardnews) or in the portal-page articles.
You want
1) Some specialty articles or boardnews block.  I'm not sure which you are using
2) Some class to use. Call it what you like. "sp_floatleft", for example.
3) Have your custom block apply the sp_floatleft to every image when it applies the posts. Or, if you are very clever with the regexp, only to the first img in the posts.
4) Use the [.cutoff.] tag before the second image in the post, show only 1 img shows on the portal page every time.
5) Use some CSS (you could add it to portal.css) to control how that tag will appear for that special new class -- use float:left; use width: and height;
6) If you run into problems with CSS precedence (your width settings are over-ruled by other width settings for bbc tags), you might have to use some js, like what Simple Portal uses for portal resize.  But DO NOT cross that bridge until you come to it.
 
That sounds like a plan to me.

[mane-kun]

Thanks for the reply, I've got almost everything figured out... I was able to apply the floatleft style for only the pictures in the portal, it's actually quite easy when you know how to do it... Now I'm just having a little bit of trouble with showing only the first picture of the post.
Here's how I managed to make the pictures float to the left:

PortalBlocks.php

Code: (find) [Select]

$return[] = array(
'id' => $row['id_topic'],
'message_id' => $row['id_msg'],
'icon' => '<img src="' . $settings[$icon_sources[$row['icon']]] . '/post/' . $row['icon'] . '.gif" align="middle" alt="' . $row['icon'] . '" border="0" />',
'subject' => $row['subject'],

Code: (add after) [Select]

'imagen' => '<div style="float: left; margin: .5ex 1ex 1ex 1ex;"><a href="', $news['image'], '"><img src="', $news['image'], '" alt="', $news['subject'], '" class="news_image" /></a></div>', (<a href="', $news['image'], '"></a>) This is just to fix a problem when displaying the portal in google chrome and internet explorer, which shows the icon for a missing picture before the actual post pictures...

After that I added this function before the ['body'] tag like so:

Code: (find) [Select]

<div class="post">', $news['body'], '</div>

Code: (replace with) [Select]

<div class="post">', $news['imagen'], ' ', $news['body'], '</div>
Any ideas on how can I add the ['cutoff'] tag into that?

[AngelinaBelle]

I would suggest applying the cutoff tag directly in the post itself.  That would be easiest.