Squished Avatars, Missing Blocks, & Emojis

[Senkusha]

Link to my forum: http://www.animerpgs.com/forum/
SMF version: 2.1.4
TP version: 3.0.1
Default Forum Language: English
Theme name and version: Reseller (2.0.10)
Browser Name and Version: FireFox (136.0.1 (64-bit)), Chrome (134.0.6998.90 (Official Build) (64-bit))
Mods installed: Activity Bar (2.0.1), Alternate User Posting (2.1.2), Awesome Post Ratings (2.0.4b), Badge Awards (2.6.2b), Battle (1.17.9.4), Battle Image Expansion 1 (1.2), Battle Image Expansion 2 (1.1), Battle Image Expansion 3 (1.1), Battle Image Expansion 4 (1.1), Board Sorting Method (1.0.1), Country Flags (3.0), Curve2 Color Changer (1.4.2), Custom Board Icons (2.0.0), Dice Roller BBCode (2.0), Downloads Pro Addon - Display Credits (1.0), Downloads System Pro (6.2.2), Emoji Pro (2.1a), Message Bookmarks (0.9.5), More Spiders (1.3.1), Optimus (3.0 RC3), SMF Arcade (2.7.0.6), SMF Classifieds (5.1.10), SMF Gallery Pro (10.2.2a), SMF Post Prefix 4.3.4), SMF Store (5.0.1), ST Shop (4.1.13), Similar Topics (1.3.1), Simple Referrals (1.4.7), SimpleDesk - Integrated Helpdesk for Simple Machines Forum (2.1.3), Spolier (0.3.2), Stop Forum Spam (1.5.6), TinyPortal (3.0.1), Topic Solved (1.1.3)
Related Error messages: No error messages.

I've noticed three issues.  The first one is my Avatars on my Members Online seem to be squished, and they appear to be smaller than I remember, however, I could just be misremembering, because I'm old  .  I've attempted to override the height setting (up to 400) in both Top and Center panels (I've tried both placements sequentially.  The block did not increase in size.
You cannot view this attachment.

Another issue I have is that I have a block of text that I only want to appear on the Board Index.  The option is checked for only the Board Index, yet the block does not appear, unless Front Page is also checked.
You cannot view this attachment.

One final issue I've noticed is that Emojis don't seem to work when using them in HTML blocks:
You cannot view this attachment.

[[chrisB]]

@Senkusha:

To fix the avatar sizing issue, you should change your CSS.

index.css

Code Select Expand

img.avatar {
    max-width: 150px !important;
    max-height: 150px !important;
}
Remove the "max" and just stick with width and height as standard.

Code Select Expand

img.avatar {
    width: 150px !important;
    height: 150px !important;
Reduce the 150px to whatever size you want.

-Edit-

Just use this actually:

Code Select Expand

img.avatar {
    width: var(--avatar-size) !important;
    height: var(--avatar-size) !important;
}
I'm sorry I can't help with the block.

-Edit-

Allowing the location of the CSS would help with figuring out what's going on with the CSS, but the above change would fix your size issue. If you wanted it to be bigger, then it could cause issues to your forum index within the post area.

-Edit-
It seems that there may be some conflicting styles in your CSS.

Can you please disable the setting to minimize CSS and Javascript? This would help the TinyPortal team too.

If you don't know where the setting is, search CSS and then click on this. Disabling it will allow the file location to be found much easier, instead of it being minified.


See, I noticed you also have this within your CSS.

Code Select Expand

img.avatar {
    border-radius: var(--avatar-border-radius);
    height: var(--avatar-size);
    width: var(--avatar-size);
}
If you change and use 150px, the avatars will be huge, and any px size will cause issues with the forum index. Use the recommended CSS.

[Senkusha]

Okay, I disabled the Minimize CSS and JavaScript files setting.  Thank you for pointing that out. 

[[chrisB]]

@Senkusha: Sorry, it shows the code is in your index.php file - this is where you should look to edit.



Changing to the above doesn't cause any issues elsewhere from what I could see.



If you want the avatars to be bigger than in the screenshot, it would mean making the classes in the code custom and adding those custom classes to your file. If the size is fine, simply use.

Code Select Expand

img.avatar {
    width: var(--avatar-size) !important;
    height: var(--avatar-size) !important;
}
I wished I could be of more help with the block error, but this would be something the TinyPortal team would be best handling. If you have any CSS problems, I can suss out a lot of them. I hope this helps.

PS. Prior to turning off the Minimize CSS and JavaScript, it would just say "index" so I assumed it would be index.css - once all your problems are resolved with CSS you turn it back on. 👍🏻

[Senkusha]

I added the following to my /css/custom_edits.css file:

Code Select Expand

img.avatar {
   width: var(--avatar-size) !important;
   height: var(--avatar-size) !important;
}

And it seems to be working good!

You cannot view this attachment.

[@rjen]

Another issue I have is that I have a block of text that I only want to appear on the Board Index.  The option is checked for only the Board Index, yet the block does not appear, unless Front Page is also checked.

Just checked on a test forum and it is working fine for me: I created a block in the Center Panel and set it to show on the Board Index only, and it work as it should.

Perhaps you have a different setup. Please specify how you defined the block exactly:
- what type of block
- what panel is it in
- all the block settings...

[@rjen]

One final issue I've noticed is that Emojis don't seem to work when using them in HTML blocks:

Can you please insert such an emoji here?

[Senkusha]

Okay, here's some screen shots of my setup:  (Note it's the Notices block that isn't appearing)

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

[Senkusha]

One final issue I've noticed is that Emojis don't seem to work when using them in HTML blocks:

Can you please insert such an emoji here?

When writing an HTML article, I attempted to put this in:

Code Select Expand

🔑

Which should give this:  🔑  (And upon previewing it, the BBC system won't process it.)

[@rjen]

Works fine for me with those settings in the top panel.

Do you have any special settings for the top panel itself?

[Senkusha]

Nothing stands out to me:

You cannot view this attachment.

[@rjen]

One final issue I've noticed is that Emojis don't seem to work when using them in HTML blocks:

Can you please insert such an emoji here?

When writing an HTML article, I attempted to put this in:

Code Select Expand

🔑

Which should give this:  🔑  (And upon previewing it, the BBC system won't process it.)

I can add the emoji code in the article when in 'code' view. When in WSIWYG mode I get the same error.

[@rjen]

Nothing stands out to me:

You cannot view this attachment.

Not to me either.

Since I cannot reproduce it I cannot help you.
Perhals you can try updating TinyPortal to version 3.0.2. Thats the version I tested on...

[Senkusha]

Everything else works in that panel.

You cannot view this attachment.

[@rjen]

Is there another page that this Notices Block is showing?

[@rjen]

Perhaps I can see something in you forum settings. If you are willing to share an admin user via PM I can look at it tomorrow

[Senkusha]

Is there another page that this Notices Block is showing?

No, But if I change the setting to Display on All Pages and sections, it will display.

I've also ruled out a theme issue.  It doesn't display using the Default Curve theme, and I've looked at this with a test user, and using Firefox, Chrome, and Edge browsers.

I can create an admin user for you if you'd like?

Update:  If I turn on Frontpage as well as Board Index, it appears to work fine.

[@rjen]

I think I see the issue.

You are using TPstandalone, and the URL for the boardindex is not what the code is expecting..
Need to setup a test forum with TPStandalone to troubleshoot..

[Senkusha]

Yes.  I think there may be something else going on here because, after reviewing my settings, the topics aren't displaying either:

You cannot view this attachment.

[@rjen]

Managed to reproduce it: the 'Forum' menu option is directing to this address: https://forum.animerpgs.com/index.php

The expected link for the boardindex address is : https://forum.animerpgs.com/index.php?action=forum
That is the address we expect for the board index and because the action= forum is missing that is why the block is not showing on the board index.

Checking how to fix it

[@rjen]

I have a fix, it is actually rewriting the 'Forum' address correctly when using TPStandalone

In the file Integrate.php you need to update this one line

From this

Code Select Expand

// Add the forum button
$buttons = array_merge(
array_slice($buttons, 0, array_search('home', array_keys($buttons), true) + 1),
[
'forum' => [
'title' => isset($txt['tp-forum']) ? $txt['tp-forum'] : 'Forum',
'href' => ($context['TPortal']['front_placement'] == 'boardindex') ? $scripturl . '?action=forum' : $scripturl,
'show' => true,
'icon' => 'menu_tpforum',
],
],
$buttons
To this

Code Select Expand

// Add the forum button
$buttons = array_merge(
array_slice($buttons, 0, array_search('home', array_keys($buttons), true) + 1),
[
'forum' => [
'title' => isset($txt['tp-forum']) ? $txt['tp-forum'] : 'Forum',
'href' => ($context['TPortal']['front_placement'] == 'boardindex' || 'standalone') ? $scripturl . '?action=forum' : $scripturl,
'show' => true,
'icon' => 'menu_tpforum',
],
],
$buttons

[@rjen]

Yes.  I think there may be something else going on here because, after reviewing my settings, the topics aren't displaying either:

You cannot view this attachment.

That is not due to this issue: if you want forum topics to show, you should select one of these two options for the frontpage

[Senkusha]

Okay.  I did some things.

I upgraded my TP to 3.0.2.
I replaced the code you suggested above.
I altered my forum menu button link to read:  https://forum.animerpgscom/index.php?action=forum.

But, when clicking on the breadcrumb, I still experience the error.  That link still reads https://forum.animerpgs.com/index.php

You cannot view this attachment.

[@rjen]

I did not check the breadcrumbs, did you check the standard menu option (the one in your theme)? That should work now.

[@rjen]

Fixes in attached files

Integrate.php goes in \TinyPortal
TPortal.php goes in \Sources

[@rjen]

I found a problem with the menu button highlighting, so I replaced the attachments with updated versions

This will fix the Home menu not being highlighted when using TPStandalone.

[Senkusha]

Thank you!  Updated!

[@rjen]

I see it is working now 

Then I noticed something else that is happening on you site, but not on any of mine... on TinyPortal pages the linktree seems to be missing?

Is that on purpose?

[Senkusha]

Thank you!

I didn't even notice that I had turned off the Breadcrumb Navigation.
You cannot view this attachment.