Bit of a strange request but is there a way for having a block collapsed by default rather than expanded?

Perfect thank you.

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

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

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

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 ?

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.

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.

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?

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?