Daily Lucky Numbers:
8
11
19
29
40
42

Add Child Boards to PHP Block (vertical/line break layout)

Started by Aaron, May 23, 2023, 04:37:30 PM

Previous topic - Next topic

Aaron

Hello, to make navigation on my site a little easier, I have two blocks in which I manually have a list of Child Boards (from certain Parent Boards) as a list, but it would be much easier to have it automatically change when I add/remove/change the Child Boards. I'd like them as two separate blocks (block 1 = parent board 1, block 2 = parent board 2):

Parent Board 1
[] Child Board 1
[] Child Board 2
[] Child Board 3
[] Child Board 4

Parent Board 2
[] Child Board 1
[] Child Board 2
[] Child Board 3
[] Child Board 4

I also would like the icon of each child board to be present, indicated by the []. The IDs for the two parent boards are 6 and 7. This would make things a lot easier for me, thanks for help.

Chen Zhen


Welcome to WebDev.

I'll look into your request when I have some time this weekend.


Chen Zhen

I'll have to make an environment like that to develop & test something for you.

I've spent time updating EhPortal as of late but I will get to your request.

Chen Zhen

I apologize for the delay.

Here is a bit of code for you to use in a PHP block or page.
Make sure you edit the $include_boards array to include the specific boards you want displayed in the block.
It will figure out the category name & link for the boards.
Let me know if it works as you expected.

// select the required board ID's
$include_boards = array(1,3,4,5,6,7,8,9);

ehPortal_selectBoards($include_boards, 'echo');
function ehPortal_selectBoards($board_ids, $output_method = 'echo')
{
global $txt, $scripturl, $user_info, $modSettings, $smcFunc;

$request = $smcFunc['db_query']('', '
SELECT
b.id_cat, b.name, b.num_topics, b.num_posts, b.id_board,
cat.name AS cat_name
FROM {db_prefix}boards AS b
LEFT JOIN {db_prefix}categories AS cat ON (cat.id_cat = b.id_cat)
WHERE {query_wanna_see_board} AND b.id_board IN ({array_int:include_boards})
ORDER BY b.id_cat ASC, b.id_board ASC',
array(
'include_boards' => $board_ids,
)
);
list($cats, $boards) = array(array(), array());
while ($row = $smcFunc['db_fetch_assoc']($request)) {
$boards[] = array(
'id_cat' => $row['id_cat'],
'cat_name' => $row['cat_name'],
'id' => $row['id_board'],
'num_posts' => $row['num_posts'],
'num_topics' => $row['num_topics'],
'name' => $row['name'],
'href' => $scripturl . '?board=' . $row['id_board'] . '.0',
'link' => '<a href="' . $scripturl . '?board=' . $row['id_board'] . '.0" title="' . $row['name'] . '">' . $row['name'] . '</a>',
'cat_href' => $scripturl . '?action=unread;c=' . $row['id_cat'],
'cat_link' => '<a href="' . $scripturl . '?action=unread;c=' . $row['id_cat'] . '" title="' . $row['cat_name'] . '">' . $row['cat_name'] . '</a>'
);
}
$smcFunc['db_free_result']($request);

if ($output_method != 'echo' || empty($boards))
return $boards;


echo '
<div style="display: table;position: relative;" class="ssi_table">';


foreach ($boards as $sBoard) {
if (!in_array($sBoard['id_cat'], $cats)) {
$cats[] = $sBoard['id_cat'];
if (count($cats) > 1) {
echo '
<div style="display: flex;width: inherit;min-height: 1.5rem !important;">
<div><span></span></div>
</div>';
}
echo '
<div style="display: table-row;">
<div style="display: table-cell;text-align: left;text-decoration: underline;cursor: pointer;">', $sBoard['cat_link'], '</div>
<div style="display: table-cell;text-align: left;padding-left: 2rem;">', $txt['board_topics'], '</div>
<div style="display: table-cell;text-align: left;padding-left: 2rem;">', $txt['posts'], '</div>
</div>';
}
echo '
<div style="display: table-row;">
<div style="display: table-cell;">', $sBoard['link'], '</div>
<div style="display: table-cell;text-align: right;padding-left: 2rem;">', comma_format($sBoard['num_topics']), '</div>
<div style="display: table-cell;text-align: right;padding-left: 2rem;">', comma_format($sBoard['num_posts']), '</div>
</div>';
}

echo '
</div>';
}

Aaron

Hi this works great thanks, I have individual board icons so I changed this and it works as expected

'link' => '<a href="' . $scripturl . '?board=' . $row['id_board'] . '.0" title="' . $row['name'] . '"><div class="child_icons" style="background-image: url(/images/' . $row['id_board'] . '.png);"></div></a> <span><a href="' . $scripturl . '?board=' . $row['id_board'] . '.0" title="' . $row['name'] . '">' . $row['name'] . '</a></span>',
I'm not sure if there's a way to have it "implode" children from a specified parent board (how boardindex does it)? That would make it easier than editing the php block with specific boards.

Example; I specify "General Talk" as Board 1, which has 3 child boards: "TV", "Sports", "Clothes", 2,3,4 respectively. If I specify Board 1, then some code later to implode the list of children:

// select the required board ID's
$include_boards = array(1);

echo '
<div id="board_', $board['id'], '_children" class="children">
', implode(' ', $children), '
</div>';
}

instead of

// select the required board ID's
$include_boards = array(1,2,3,4);

Is this somehow possible?

Chen Zhen

Just so I understand correctly and to be clear. You are referring to boatd categories and their child boards?

You want to only specify the board categories and have it list their child boards? If I am correct do you want all child boards for each category or just 4 max as your first post implies?

Aaron

Quote from: Chen Zhen on June 25, 2023, 04:54:39 PMJust so I understand correctly and to be clear. You are referring to boatd categories and their child boards?

You want to only specify the board categories and have it list their child boards? If I am correct do you want all child boards for each category or just 4 max as your first post implies?

Yes correct, all of the child boards.

Chen Zhen

I'm assuming the board images are uniform with any opted theme therefore this only uses the default theme images path for those icons.

// select the required board category ID's
$board_category_ids = array(1,2);

ehPortal_selectBoards($board_category_ids, true, 'echo');
function ehPortal_selectBoards($cat_ids, $boardImage, $output_method = 'echo')
{
    global $txt, $scripturl, $user_info, $modSettings, $settings, $smcFunc;

    $request = $smcFunc['db_query']('', '
        SELECT
            b.id_cat, b.name, b.num_topics, b.num_posts, b.id_board,
            cat.name AS cat_name
        FROM {db_prefix}boards AS b
            LEFT JOIN {db_prefix}categories AS cat ON (cat.id_cat = b.id_cat)
        WHERE {query_wanna_see_board} AND b.id_cat IN ({array_int:include_cats})' . (!empty($modSettings['recycle_enable']) && !empty($modSettings['recycle_board']) ? '
            AND b.id_board != {int:recycle_board}' : '') . '
        ORDER BY b.id_cat ASC, b.id_board ASC',
        array(
            'include_cats' => $cat_ids,
            'recycle_board' => !empty($modSettings['recycle_board']) ? (int) $modSettings['recycle_board'] : null,
        )
    );
    list($cats, $boards) = array(array(), array());
    while ($row = $smcFunc['db_fetch_assoc']($request)) {
        $image = !empty($boardImage) ? '<div class="child_icons" style="display: inline;background-image: url(' . $settings['default_theme_url'] . '/images/' . $row['id_board'] . '.png);"></div>' : $row['name'];
        $boards[] = array(
            'id_cat' => $row['id_cat'],
            'cat_name' => $row['cat_name'],
            'id' => $row['id_board'],
            'num_posts' => $row['num_posts'],
            'num_topics' => $row['num_topics'],
            'name' => $row['name'],
            'href' => $scripturl . '?board=' . $row['id_board'] . '.0',
            'link' => '<a href="' . $scripturl . '?board=' . $row['id_board'] . '.0" title="' . $row['name'] . '">' . $image . '</a>',
            'cat_href' => $scripturl . '?action=unread;c=' . $row['id_cat'],
            'cat_link' => '<a href="' . $scripturl . '?action=unread;c=' . $row['id_cat'] . '" title="' . $row['cat_name'] . '">' . $row['cat_name'] . '</a>'
        );
    }
    $smcFunc['db_free_result']($request);

    if ($output_method != 'echo' || empty($boards))
        return $boards;


    echo '
        <div style="display: table;position: relative;" class="ssi_table">';


    foreach ($boards as $sBoard) {
        if (!in_array($sBoard['id_cat'], $cats)) {
            $cats[] = $sBoard['id_cat'];
            if (count($cats) > 1) {
                echo '
            <div style="display: flex;width: inherit;min-height: 1.5rem !important;">
                <div><span></span></div>
            </div>';
            }
            echo '
            <div style="display: table-row;">
                <div style="display: table-cell;text-align: left;text-decoration: underline;cursor: pointer;">', $sBoard['cat_link'], '</div>
                <div style="display: table-cell;text-align: left;padding-left: 2rem;">', $txt['board_topics'], '</div>
                <div style="display: table-cell;text-align: left;padding-left: 2rem;">', $txt['posts'], '</div>
            </div>';
        }
        echo '
            <div style="display: table-row;">
                <div style="display: table-cell;">', $sBoard['link'], '</div>
                <div style="display: table-cell;text-align: right;padding-left: 2rem;">', comma_format($sBoard['num_topics']), '</div>
                <div style="display: table-cell;text-align: right;padding-left: 2rem;">', comma_format($sBoard['num_posts']), '</div>
            </div>';
    }

    echo '
        </div>';
}

Is that a mod that adds those board icons or is it something you're doing manually?
IMO it should be using a sub-directory because a simple numbered file name may conflict with some other mod at some point.


Chen Zhen


Oops, I forgot about the name showing after the icon.

Try this:
// select the required board category ID's
$board_category_ids = array(1,2);

ehPortal_selectBoards($board_category_ids, true, 'echo');
function ehPortal_selectBoards($cat_ids, $boardImage, $output_method = 'echo')
{
global $txt, $scripturl, $user_info, $modSettings, $settings, $smcFunc;

$request = $smcFunc['db_query']('', '
SELECT
b.id_cat, b.name, b.num_topics, b.num_posts, b.id_board,
cat.name AS cat_name
FROM {db_prefix}boards AS b
LEFT JOIN {db_prefix}categories AS cat ON (cat.id_cat = b.id_cat)
WHERE {query_wanna_see_board} AND b.id_cat IN ({array_int:include_cats})' . (!empty($modSettings['recycle_enable']) && !empty($modSettings['recycle_board']) ? '
AND b.id_board != {int:recycle_board}' : '') . '
ORDER BY b.id_cat ASC, b.id_board ASC',
array(
'include_cats' => $cat_ids,
'recycle_board' => !empty($modSettings['recycle_board']) ? (int) $modSettings['recycle_board'] : null,
)
);
list($cats, $boards) = array(array(), array());
while ($row = $smcFunc['db_fetch_assoc']($request)) {
$boards[] = array(
'id_cat' => $row['id_cat'],
'cat_name' => $row['cat_name'],
'id' => $row['id_board'],
'num_posts' => $row['num_posts'],
'num_topics' => $row['num_topics'],
'name' => $row['name'],
'href' => $scripturl . '?board=' . $row['id_board'] . '.0',
'link' => !empty($boardImage) ? '<a href="' . $scripturl . '?board=' . $row['id_board'] . '.0" title="' . $row['name'] . '"><div class="child_icons" style="background-image: url(\'' . $settings['default_theme_url'] . '/images/' . $row['id_board'] . '.png\');background-size: cover;"></div></a><div style="display: inline;padding-left: 1rem;"><a href="' . $scripturl . '?board=' . $row['id_board'] . '.0" title="' . $row['name'] . '">' . $row['name'] . '</a></div>' : ('<a href="' . $scripturl . '?board=' . $row['id_board'] . '.0" title="' . $row['name'] . '">' . $row['name'] . '</a>'),
'cat_href' => $scripturl . '?action=unread;c=' . $row['id_cat'],
'cat_link' => '<a href="' . $scripturl . '?action=unread;c=' . $row['id_cat'] . '" title="' . $row['cat_name'] . '">' . $row['cat_name'] . '</a>'
);
}
$smcFunc['db_free_result']($request);

if ($output_method != 'echo' || empty($boards))
return $boards;


echo '
<div style="display: table;position: relative;" class="ssi_table">';


foreach ($boards as $sBoard) {
if (!in_array($sBoard['id_cat'], $cats)) {
$cats[] = $sBoard['id_cat'];
if (count($cats) > 1) {
echo '
<div style="display: flex;width: inherit;min-height: 1.5rem !important;">
<div><span></span></div>
</div>';
}
echo '
<div style="display: table-row;">
<div style="display: table-cell;text-align: left;text-decoration: underline;cursor: pointer;">', $sBoard['cat_link'], '</div>
<div style="display: table-cell;text-align: left;padding-left: 2rem;">', $txt['board_topics'], '</div>
<div style="display: table-cell;text-align: left;padding-left: 2rem;">', $txt['posts'], '</div>
</div>';
}
echo '
<div style="display: table-row;">
<div style="display: table-cell;">', $sBoard['link'], '</div>
<div style="display: table-cell;text-align: right;padding-left: 2rem;">', comma_format($sBoard['num_topics']), '</div>
<div style="display: table-cell;text-align: right;padding-left: 2rem;">', comma_format($sBoard['num_posts']), '</div>
</div>';
}

echo '
</div>';
}



On my localhost the background image will not show for the div.
Does it have to be a background image or can it be a vertically centered img tag with specific width & height ?

Chen Zhen

#10
The div background images are not working for me at the moment. I'm sure it's something simple that's awry but I'll figure it out later.

Here is a block using img tags with the same requested outcome.
I added some JQuery + CSS to give the images and categories some effect to show they're links.
Board image icons are limited to 1 square character width*height.

// select the required board category ID's
$board_category_ids = array(1,2);

ehPortal_selectBoards($board_category_ids, true, 'echo');
function ehPortal_selectBoards($cat_ids, $boardImage, $output_method = 'echo')
{
    global $context, $txt, $scripturl, $user_info, $modSettings, $settings, $smcFunc;

    $context['html_headers'] .= '
        <script>
            $( document ).ready(function() {
                $(".customAaronBlockImg").hover(
                    function() {
                        $(this).css({"cursor" : "pointer", "filter" : "invert(1)"});
                    }, function() {
                        $(this).css({"cursor" : "normal", "filter" : "invert(0)"});
                    }
                );
                $(".customAaronBlockCatId").hover(
                    function() {
                        $(this).css({"cursor" : "pointer", "mix-blend-mode" : "difference"});
                    }, function() {
                        $(this).css({"cursor" : "normal", "mix-blend-mode" : "normal"});
                    }
                );
            });

        </script>';

    $request = $smcFunc['db_query']('', '
        SELECT
            b.id_cat, b.name, b.num_topics, b.num_posts, b.id_board,
            cat.name AS cat_name
        FROM {db_prefix}boards AS b
            LEFT JOIN {db_prefix}categories AS cat ON (cat.id_cat = b.id_cat)
        WHERE {query_wanna_see_board} AND b.id_cat IN ({array_int:include_cats})' . (!empty($modSettings['recycle_enable']) && !empty($modSettings['recycle_board']) ? '
            AND b.id_board != {int:recycle_board}' : '') . '
        ORDER BY b.id_cat ASC, b.id_board ASC',
        array(
            'include_cats' => $cat_ids,
            'recycle_board' => !empty($modSettings['recycle_board']) ? (int) $modSettings['recycle_board'] : null,
        )
    );
    list($cats, $boards) = array(array(), array());
    while ($row = $smcFunc['db_fetch_assoc']($request)) {
        $boards[] = array(
            'id_cat' => $row['id_cat'],
            'cat_name' => $row['cat_name'],
            'id' => $row['id_board'],
            'num_posts' => $row['num_posts'],
            'num_topics' => $row['num_topics'],
            'name' => $row['name'],
            'href' => $scripturl . '?board=' . $row['id_board'] . '.0',
            'link' => !empty($boardImage) ? '<div style="display: inline-flex;vertical-align: middle;width: 1.5rem;max-width: 1.5rem;" class="centertext"><img onclick="location.href = \'' . $scripturl . '?board=' . $row['id_board'] . '.0\';" style="vertical-align: middle;max-width: 1rem;max-height: 1rem;" class="customAaronBlockImg centertext" title="' . $row['name'] . '" src="' . $settings['default_theme_url'] . '/images/' . $row['id_board'] . '.png" alt="->" /></div><div style="display: inline;padding-left: 0.5rem;vertical-align: middle;"><a href="' . $scripturl . '?board=' . $row['id_board'] . '.0" title="' . $row['name'] . '">' . $row['name'] . '</a></div>' : ('<a href="' . $scripturl . '?board=' . $row['id_board'] . '.0" title="' . $row['name'] . '">' . $row['name'] . '</a>'),
            'cat_href' => $scripturl . '?action=unread;c=' . $row['id_cat'],
            'cat_link' => '<a href="' . $scripturl . '?action=unread;c=' . $row['id_cat'] . '" title="' . $row['cat_name'] . '">' . $row['cat_name'] . '</a>',
            'image_path' => $settings['default_theme_url'] . '/images/' . $row['id_board'] . '.png',
            'image' => '<div style="display: inline-flex;vertical-align: middle;width: 1.5rem;max-width: 1.5rem;"><img style="vertical-align: middle;max-width: 1rem;max-height: 1rem;" title="' . $row['name'] . '" src="' . $settings['default_theme_url'] . '/images/' . $row['id_board'] . '.png" alt="->" /></div>',
        );
    }
    $smcFunc['db_free_result']($request);

    if ($output_method != 'echo' || empty($boards))
        return $boards;


    echo '
        <div style="display: table;position: relative;" class="ssi_table">';


    foreach ($boards as $sBoard) {
        if (!in_array($sBoard['id_cat'], $cats)) {
            $cats[] = $sBoard['id_cat'];
            if (count($cats) > 1) {
                echo '
            <div style="display: flex;width: inherit;min-height: 1.5rem !important;">
                <div><span></span></div>
            </div>';
            }
            echo '
            <div style="display: table-row;padding-bottom: 0.15rem;">
                <div class="customAaronBlockCatId" style="display: table-cell;text-align: left;text-decoration: underline;">', $sBoard['cat_link'], '</div>
                <div style="display: table-cell;text-align: left;padding-left: 2rem;text-decoration: underline;">', $txt['board_topics'], '</div>
                <div style="display: table-cell;text-align: left;padding-left: 2rem;text-decoration: underline;">', $txt['posts'], '</div>
            </div>';
        }
        echo '
            <div style="display: table-row;padding-bottom: 0.33rem;">
                <div style="display: table-cell;">', $sBoard['link'], '</div>
                <div style="display: table-cell;text-align: right;padding-left: 2rem;">', comma_format($sBoard['num_topics']), '</div>
                <div style="display: table-cell;text-align: right;padding-left: 2rem;">', comma_format($sBoard['num_posts']), '</div>
            </div>';
    }

    echo '
        </div>';
}

Aaron

Hi thanks for taking the time, I really appreciate it, this works great, I made one small change here to get the same board order from the database:

ORDER BY b.board_order',
I think instead of specifying the category, the parent board might work better for my layout but I'm not sure if you can differentiate parents from children with something like this:

$board_category_ids = array(1,2);
to

$parent_board_ids = array(1,2);
(basically go "one level deeper" and omit the parent boards from being shown).

From this:

to this:

(Manually naming the block as the parent board of course).

Chen Zhen

I'm not sure if I got the HTML behavior correct but try this out:

// select the required parent board ID's
$board_parent_ids = array(1,3);

ehPortal_selectParentBoards($board_parent_ids, true, 'echo');
function ehPortal_selectParentBoards($board_ids, $boardImage, $output_method = 'echo')
{
global $context, $txt, $scripturl, $user_info, $modSettings, $settings, $smcFunc;

$context['html_headers'] .= '
<script>
$(document).ready(function() {
$(".customAaronBlockImg").hover(
function() {
$(this).css({"cursor" : "pointer", "filter" : "invert(1)"});
}, function() {
$(this).css({"cursor" : "normal", "filter" : "invert(0)"});
}
);
$(".customAaronBlockLink").hover(
function() {
$(this).css({"cursor" : "pointer", "mix-blend-mode" : "difference"});
}, function() {
$(this).css({"cursor" : "normal", "mix-blend-mode" : "normal"});
}
);
});

</script>';


$request = $smcFunc['db_query']('', '
SELECT
b.id_cat, b.name, b.num_topics, b.num_posts, b.id_board, b.child_level, b.id_parent, b.board_order, cat.cat_order,
cat.name AS cat_name
FROM {db_prefix}boards AS b
LEFT JOIN {db_prefix}categories AS cat ON (cat.id_cat = b.id_cat)
WHERE {query_wanna_see_board} AND (b.id_parent IN ({array_int:include_parent_boards}) OR b.id_board IN ({array_int:include_parent_boards}))' . (!empty($modSettings['recycle_enable']) && !empty($modSettings['recycle_board']) ? '
AND b.id_board != {int:recycle_board}' : '') . ' AND b.child_level <= {int:child_lvl}
ORDER BY cat.cat_order ASC, b.board_order ASC',
array(
'include_parent_boards' => $board_ids,
'recycle_board' => !empty($modSettings['recycle_board']) ? (int) $modSettings['recycle_board'] : null,
'child_lvl' => 1,
)
);
list($parents, $boards, $count) = array(array(), array(), 0);
while ($row = $smcFunc['db_fetch_assoc']($request)) {
$boards[] = array(
'id_cat' => $row['id_cat'],
'id_parent' => $row['id_parent'],
'cat_name' => $row['cat_name'],
'id' => $row['id_board'],
'child_lvl' => $row['child_level'],
'num_posts' => $row['num_posts'],
'num_topics' => $row['num_topics'],
'name' => $row['name'],
'href' => $scripturl . '?board=' . $row['id_board'] . '.0',
'link' => !empty($boardImage) ? '<div style="display: inline-flex;vertical-align: middle;width: 1.5rem;max-width: 1.5rem;" class="centertext"><img onclick="location.href = \'' . $scripturl . '?board=' . $row['id_board'] . '.0\';" style="vertical-align: middle;max-width: 1rem;max-height: 1rem;" class="customAaronBlockImg centertext" title="' . $row['name'] . '" src="' . $settings['default_theme_url'] . '/images/' . $row['id_board'] . '.png" alt="->" /></div><div title="' . $row['name'] . '" onclick="location.href = \'' . $scripturl . '?board=' . $row['id_board'] . '.0\';" class="customAaronBlockLink" style="display: inline;padding-left: 0.5rem;vertical-align: middle;">' . $row['name'] . '</div>' : ('<div title="' . $row['name'] . '" onclick="location.href = \'' . $scripturl . '?board=' . $row['id_board'] . '.0\';" class="customAaronBlockLink" style="display: inline;padding-left: 0.05rem;vertical-align: middle;">' . $row['name'] . '</div>'),
'cat_href' => $scripturl . '?action=unread;c=' . $row['id_cat'],
'cat_link' => '<a href="' . $scripturl . '?action=unread;c=' . $row['id_cat'] . '" title="' . $row['cat_name'] . '">' . $row['cat_name'] . '</a>',
'parent_link' => '<div title="' . $row['name'] . '" onclick="location.href = \'' . $scripturl . '?board=' . $row['id_board'] . '.0\';" class="customAaronBlockLink" style="display: inline;padding-left: 0.05rem;vertical-align: middle;">' . $row['name'] . '</div>',
'image_path' => $settings['default_theme_url'] . '/images/' . $row['id_board'] . '.png',
'image' => '<div style="display: inline-flex;vertical-align: middle;width: 1.5rem;max-width: 1.5rem;"><img style="vertical-align: middle;max-width: 1rem;max-height: 1rem;" title="' . $row['name'] . '" src="' . $settings['default_theme_url'] . '/images/' . $row['id_board'] . '.png" alt="->" /></div>',
);
}
$smcFunc['db_free_result']($request);

if ($output_method != 'echo' || empty($boards))
return $boards;


echo '
<div style="display: flex;position: relative;">';


foreach ($boards as $sBoard) {

if (empty($sBoard['child_lvl']) && !in_array($sBoard['id'], $parents)) {
$parents[] = $sBoard['id'];
if (count($parents) > $count) {
echo '
</div>
</div>
<div style="width: inherit;min-height: 1.5rem !important;">
<div><span></span></div>
</div>';
}
$count++;
echo '
<div class="tborder">
<div class="cat_bar">
<h3 class="catbg">', $sBoard['parent_link'], '</h3>
</div>
<div class="windowbg">';
}
elseif (!empty($sBoard['child_lvl']))
echo '
<div style="padding-bottom: 0.33rem;">
<div style="display: inline;">', $sBoard['link'], '</div>
</div>';
else
echo '
</div>
</div>';
}

echo '
</div>';
}

Aaron


Chen Zhen

#14
Here is a revised block with both options:

// select the required parent board ID's or category ID's, the mode & a boolean for collapsed (by default)
$catBoards = array(6,7); // $catBoards = array(1,3);
$mode = 'parents';
$collapsed = true;
ehPortalBoardQuery($catBoards, $mode, true);

$ids = !empty($id) ? array($id) : array("0");
$ehPortalBlockToggleUp = function($collapsed = true) use ($ids){
global $context;

if (!empty($collapsed))
$context['html_headers'] .= '
<script>
$(document).ready(function() {
var blockIdArray = ' . json_encode($ids) . ';
for(i=0;i < blockIdArray.length; i++) {
if ($("#sp_collapse_" + blockIdArray[i]).length != 0 && $("#sp_collapse_" + blockIdArray[i]).hasClass("toggle_up")) {
sp_collapseBlock(String(blockIdArray[i]));
}
}
});
</script>';
};
$ehPortalBlockToggleUp($collapsed);

function ehPortalBoardQuery($catBoards, $mode, $boardImg)
{
if (stripos($mode, 'cat') !== FALSE)
ehPortal_selectBoards($catBoards, $boardImg, $mode, 'echo');
else
ehPortal_selectParentBoards($catBoards, $boardImg, $mode, 'echo');
}

function ehPortal_selectParentBoards($board_ids, $boardImage, $mode, $output_method = 'echo')
{
global $context, $txt, $scripturl, $user_info, $modSettings, $settings, $smcFunc;

list($parents, $boards, $count) = array(array(), ehPortalQueryBoards($board_ids, $mode, $boardImage), 0);
if ($output_method != 'echo' || empty($boards))
return $boards;


echo '
<div class="ehPortalBlockToggleTarget" style="display: flex;position: relative;">';


foreach ($boards as $sBoard) {

if (empty($sBoard['child_lvl']) && !in_array($sBoard['id'], $parents)) {
$parents[] = $sBoard['id'];
if (count($parents) > $count) {
echo '
</div>
</div>
<div style="width: inherit;min-height: 1.5rem !important;">
<div><span></span></div>
</div>';
}
$count++;
echo '
<div class="tborder">
<div class="cat_bar">
<h3 class="catbg">', $sBoard['parent_link'], '</h3>
</div>
<div class="windowbg">';
}
elseif (!empty($sBoard['child_lvl']))
echo '
<div style="padding-bottom: 0.33rem;">
<div style="display: inline;">', $sBoard['link'], '</div>
</div>';
else
echo '
</div>
</div>';
}

echo '
</div>';
}

function ehPortal_selectBoards($cat_ids, $boardImage, $mode, $output_method = 'echo')
{
global $context, $txt, $scripturl, $user_info, $modSettings, $settings, $smcFunc;

list($cats, $boards, $html, $children) = array(array(), ehPortalQueryBoards($cat_ids, $mode, $boardImage), '', 0);
if ($output_method != 'echo' || empty($boards))
return $boards;

echo '
<div class="ehPortalBlockToggleTarget" style="display: table;position: relative;" class="ssi_table">';


foreach ($boards as $sBoard) {
if (!in_array($sBoard['id_cat'], $cats)) {
$cats[] = $sBoard['id_cat'];
if (count($cats) > 1) {
echo '
<div style="display: flex;width: inherit;min-height: 1.5rem !important;">
<div><span></span></div>
</div>';
}
echo '
<div style="display: table-row;padding-bottom: 0.15rem;">
<div class="customEhPortalBlockLink" style="display: table-cell;text-align: left;text-decoration: underline;">', $sBoard['cat_link'], '</div>
<div style="display: table-cell;text-align: left;padding-left: 2rem;text-decoration: underline;">', $txt['board_topics'], '</div>
<div style="display: table-cell;text-align: left;padding-left: 2rem;text-decoration: underline;">', $txt['posts'], '</div>
</div>';
}
if (!empty($sBoard['child_lvl'])) {
if (empty($children)) {
$html = '<span style="padding-right: 0.5rem;">&rarr;</span>' . $sBoard['link2'] . ',';
}
else {
$html .= '<span style="padding-left: 0.33rem;"></span>' . $sBoard['link2'] . ',';
}
$children++;
}
else {
$children = 0;
echo (!empty($html) ? '
<div style="display: inline-flex;padding-left: 0.66rem;font-size: 75%;position: relative;top: -0.5rem;">' . rtrim($html, ',') . '</div>' : ''), '
<div style="display: table-row;padding-top: 0.33rem;">
<div style="display: table-cell;">', $sBoard['link'], '</div>
<div style="display: table-cell;text-align: right;padding-left: 2rem;">', comma_format($sBoard['num_topics']), '</div>
<div style="display: table-cell;text-align: right;padding-left: 2rem;">', comma_format($sBoard['num_posts']), '</div>
</div>';
$html = '';
}
}

echo '
</div>';
}

function ehPortalQueryBoards($board_ids, $mode, $boardImage = false)
{
global $smcFunc, $scripturl, $settings, $context, $modSettings, $txt;

$boards = array();

$context['html_headers'] .= '
<script>
$(document).ready(function() {
$(".customEhPortalBlockImg").hover(
function() {
$(this).css({"cursor" : "pointer", "filter" : "invert(1)"});
}, function() {
$(this).css({"cursor" : "normal", "filter" : "invert(0)"});
}
);
$(".customEhPortalBlockLink").hover(
function() {
$(this).css({"cursor" : "pointer", "mix-blend-mode" : "difference"});
}, function() {
$(this).css({"cursor" : "normal", "mix-blend-mode" : "normal"});
}
);
});
</script>';

$request = $smcFunc['db_query']('', '
SELECT
b.id_cat, b.name, b.num_topics, b.num_posts, b.id_board, b.child_level, b.id_parent, b.board_order, cat.cat_order,
cat.name AS cat_name
FROM {db_prefix}boards AS b
LEFT JOIN {db_prefix}categories AS cat ON (cat.id_cat = b.id_cat)' . (stripos($mode, 'cat') === FALSE ? '
WHERE {query_wanna_see_board} AND (b.id_parent IN ({array_int:include_parent_boards}) OR b.id_board IN ({array_int:include_parent_boards}))' . (!empty($modSettings['recycle_enable']) && !empty($modSettings['recycle_board']) ? '
AND b.id_board != {int:recycle_board}' : '') . ' AND b.child_level <= {int:child_lvl}
ORDER BY cat.cat_order ASC, b.board_order ASC' : '
WHERE {query_wanna_see_board} AND b.id_cat IN ({array_int:include_cats})' . (!empty($modSettings['recycle_enable']) && !empty($modSettings['recycle_board']) ? '
            AND b.id_board != {int:recycle_board}' : '') . '
        ORDER BY COALESCE(b.board_order, b.id_cat, b.id_parent, b.child_level, b.id_board)'),
array(
'include_parent_boards' => $board_ids,
'include_cats' => $board_ids,
'recycle_board' => !empty($modSettings['recycle_board']) ? (int) $modSettings['recycle_board'] : null,
'child_lvl' => 1,
)
);

while ($row = $smcFunc['db_fetch_assoc']($request)) {
$boards[] = array(
'id_cat' => $row['id_cat'],
'id_parent' => $row['id_parent'],
'cat_name' => $row['cat_name'],
'id' => $row['id_board'],
'child_lvl' => $row['child_level'],
'num_posts' => $row['num_posts'],
'num_topics' => $row['num_topics'],
'name' => $row['name'],
'href' => $scripturl . '?board=' . $row['id_board'] . '.0',
'link' => !empty($boardImage) ? '<div style="display: inline-flex;vertical-align: middle;width: 1.5rem;max-width: 1.5rem;" class="centertext"><img onclick="location.href = \'' . $scripturl . '?board=' . $row['id_board'] . '.0\';" style="vertical-align: middle;max-width: 1rem;max-height: 1rem;" class="customEhPortalBlockImg centertext" title="' . $row['name'] . '" src="' . $settings['default_theme_url'] . '/images/' . $row['id_board'] . '.png" alt="->" /></div><div title="' . $row['name'] . '" onclick="location.href = \'' . $scripturl . '?board=' . $row['id_board'] . '.0\';" class="customEhPortalBlockLink" style="display: inline;padding-left: 0.5rem;vertical-align: middle;">' . $row['name'] . '</div>' : ('<div title="' . $row['name'] . '" onclick="location.href = \'' . $scripturl . '?board=' . $row['id_board'] . '.0\';" class="customEhPortalBlockLink" style="display: inline;padding-left: 0.05rem;vertical-align: middle;">' . $row['name'] . '</div>'),
'cat_href' => $scripturl . '?action=unread;c=' . $row['id_cat'],
'link2' => '<div title="' . $row['name'] . '" onclick="location.href = \'' . $scripturl . '?board=' . $row['id_board'] . '.0\';" class="customEhPortalBlockLink" style="display: inline;padding-left: 0.05rem;vertical-align: middle;">' . $row['name'] . '</div>',
'cat_link' => '<a href="' . $scripturl . '?action=unread;c=' . $row['id_cat'] . '" title="' . $row['cat_name'] . '">' . $row['cat_name'] . '</a>',
'parent_link' => '<div title="' . $row['name'] . '" onclick="location.href = \'' . $scripturl . '?board=' . $row['id_board'] . '.0\';" class="customEhPortalBlockLink" style="display: inline;padding-left: 0.05rem;vertical-align: middle;">' . $row['name'] . '</div>',
'image_path' => $settings['default_theme_url'] . '/images/' . $row['id_board'] . '.png',
'image' => '<div style="display: inline-flex;vertical-align: middle;width: 1.5rem;max-width: 1.5rem;"><img style="vertical-align: middle;max-width: 1rem;max-height: 1rem;" title="' . $row['name'] . '" src="' . $settings['default_theme_url'] . '/images/' . $row['id_board'] . '.png" alt="->" /></div>',
);
}
$smcFunc['db_free_result']($request);

return $boards;
}




The category option has parent + children listed in proper order but the children do not include the board images.
You can just use the parent option for what was requested here.
Your other request at collapsing the block by default has been included.