Menu Icon Install png

[mickjav]

Just added the menu for my mod but having issues with moving the image I wish to use to icons from my mods image folder

Code Select Expand

<require-file name="default/images/Pledges/pledges.png" destination="$imagesdir/icons" />
This is the complete file or relevant sections you can see where I tried using code above lol

Code Select Expand

<install for="2.1 - 2.1.99">
<!-- Templates, Languages and Images -->
<require-dir name="Themes" destination="$boarddir">Theme files</require-dir>
<!-- Source Files -->
<require-dir name="Sources" destination="$boarddir">Source files</require-dir>
<!--<require-file name="default/images/Pledges/pledges.png" destination="$imagesdir/icons" />
<!-- Hooks -->
<!--
This single hook pre-loads a function.
From that function/method, we can call
other hooks from within the file and
without adding them to the database.
-->
<hook hook="integrate_pre_load" function="Pledges\Integration::initialize" file="$sourcedir/Pledges/Integration.php" />
</install>

<uninstall for="2.1 - 2.1.99">
<!-- Hooks -->
<hook hook="integrate_pre_load" function="Pledges\Integration::initialize" file="$sourcedir/Pledges/Integration.php" reverse="true" />
<!-- Sources -->
<remove-dir name="$sourcedir/Pledges">Source files</remove-dir>
<!-- Templates -->
<remove-dir name="$themedir/Pledges">Template files</remove-dir>
<!-- Languages -->
<remove-dir name="$languagedir/Pledges">Language files</remove-dir>
</uninstall>
Any help would be appreciated

mick

[Diego Andrés]

It's not working because it's commented?
<!--<require-file name="default/images/Pledges/pledges.png" destination="$imagesdir/icons" />

Also if you're not moving the entire directory into the board, e.g.
<require-dir name="Themes" destination="$boarddir">Theme files</require-dir>

Then why are you putting the image inside all of these folders, just put it in the root:
<require-file name="pledges.png" destination="$imagesdir/icons" />

The reason some of us use #1 option is because we move everything at once and we just use default theme paths, that way people don't have to 'check' that they want to include these items in their custom themes even if they are not going to be used besides the default theme path.

[mickjav]

It's not working because it's commented?
<!--<require-file name="default/images/Pledges/pledges.png" destination="$imagesdir/icons" />

Also if you're not moving the entire directory into the board, e.g.
<require-dir name="Themes" destination="$boarddir">Theme files</require-dir>

Then why are you putting the image inside all of these folders, just put it in the root:
<require-file name="pledges.png" destination="$imagesdir/icons" />

The reason some of us use #1 option is because we move everything at once and we just use default theme paths, that way people don't have to 'check' that they want to include these items in their custom themes even if they are not going to be used besides the default theme path.

I commented out the line after getting a error when running the install

I need the image in that folder as I want to use it for a main menu button, correct me if I'm wrong but menu images have to be in that folder?.

Mick

[Diego Andrés]

Yes if you want to load using img.
CSS is recommended for better compatibility with other themes.

[mickjav]

Yes if you want to load using img.
CSS is recommended for better compatibility with other themes.

I'm worse at CSS than I am at Java at the moment, lol

[Diego Andrés]

You just load the CSS, usually inline since it's faster than adding or editing a file.
Can load it inside the menu hook.

Code Select Expand

global $settings;

// Add the icon using inline css
addInlineCss('
.main_icons.pledges::before {
background-position: 0;
background-image: url("' . $settings['default_images_url'] . '/icons/pledges.png");
background-size: contain;
}
');
For the menu you just use the class:
icon' => 'pledges',

Additionally, it's better loaded using a hook so it's properly available in all pages.
add_integration_function('integrate_pre_css_output', __CLASS__ . '::preCSS', false);

Code Select Expand

public static function preCSS() : void
{
global $settings;

// Add the icon using inline css
addInlineCss('
.main_icons.pledges::before {
background-position: 0;
background-image: url("' . $settings['default_images_url'] . '/icons/pledges.png");
background-size: contain;
}
');
}

[mickjav]

Thanks, Went with the hook can't seem to display the image

This is the full code for the menu

Code Select Expand

public static function menu_buttons(&$buttons)
{
global $scripturl, $txt, $modSettings;

// Language
loadLanguage('Pledges/Pledges');

// Menu Button
$buttons['pledges' ] = [
'title' => (!empty($modSettings['pledges_title']) ? $modSettings['pledges_title'] : $txt['pledges_button']),
'href' => $scripturl . '?action=pledge;area=pledge;sa=index',
'icon' => 'pledges',
'show' => (allowedTo('pledges_can_view_Pledges') && $modSettings['pledges_use_menu']),
];
}

public static function preCSS() : void
{
global $settings;

// Add the icon using inline css
addInlineCss('
.main_icons.pledges::before {
background-position: 0;
background-image: url("' .$settings['default_images_url'] . '/icons/pledges.png");
background-size: contain;
}
');
}
I have used ctr+F5

Have used my brain for once and figured I should add the icon folder to my images folder that way it will add the file to the icons folder on install lol

Thanks for your help again

All the best mick

[mickjav]

Just checked, and it works for the default them Only, so if I can set it to that themes icons folder It should always work?

Mick

[mickjav]

Just checked other themes and seems to work on most except Alien_Shades2.1.2b.

Sorry didn't think to check until after posting message #6.

mick