completed replace module images in skin

Developer Networks
Developer Networks
@developer-networks
8 years ago
566 posts
I was wondering if there was a way to swap out images in modules like I can do with templates? If so how would I properly do this? I have custom images needed for skin development and would like to use them. Currently the only way I can see properly doing this would be to create a template that replecates the module template and rename the images I guess. I was thinking there might be a better way like naming the image to override the image used in the module.
updated by @developer-networks: 07/10/16 01:15:35PM
paul
@paul
8 years ago
4,326 posts
Yes - From the ACP goto the module and click on its Images tab. You can upload alternative images there.
hth


--
Paul Asher - JR Developer and System Import Specialist
Developer Networks
Developer Networks
@developer-networks
8 years ago
566 posts
I was looking for a way that I can develop this functionality in to the skin. Like I can do with a template override. Is that possible with images?
michael
@michael
8 years ago
7,715 posts
got an example of an image you'd like to swap out?
Developer Networks
Developer Networks
@developer-networks
8 years ago
566 posts
Using the JrLike module as the example here. My skin is using these new like buttons. (see attached)

Currently I have added these images to the jrLike module and call them in the templates overrides from there. However I know this would not be the best practice. When ever they updated it would require me to go in and add the images again to the clients website.

I tried to figure out a way to place these images in the skin directory so they could replace and override the module images just like the jrCore does a template override does but was unsuccessful.

*** If Jamroom dosent have this functionality it would be a nice feature for skin developers.



Currently I have the template being overridden jrLike_button.tpl in my templates.
{if $action == 'like'}

    <div id="{$module_url}_{$item._item_id}_{$action}" class="like_button_box">

        {if $like_status == 'like'}

            {* this user can "like" the item *}
            {jrCore_lang module="jrLike" id="4" default="Like" assign="title"}
            {if $_conf.jrLike_require_login == 'on' && !jrUser_is_logged_in()}
                {jrCore_module_url module="jrUser" assign="uurl"}
                <a href="{$jamroom_url}/{$uurl}/login">{jrCore_image module="jrLike" image="like.png" width="24" height="24" class="like_button_img" alt=$title title=$title}</a>
            {else}
                <a onclick="jrLike_action('{$module_url}', '{$item._item_id}', 'like', '{$unique_id}');">{jrCore_image module="jrLike" image="like.png" width="24" height="24" class="like_button_img" alt=$title title=$title}</a>
            {/if}


        {elseif $like_status == 'liked'}

            {* user already liked this *}
            {jrCore_lang module="jrLike" id="6" default="You Liked This!" assign="title"}
            {if $_conf.jrLike_require_login == 'on' && !jrUser_is_logged_in()}
                {jrCore_module_url module="jrUser" assign="uurl"}
                <a href="{$jamroom_url}/{$uurl}/login">{jrCore_image module="jrLike" image="liked.png" width="24" height="24" class="like_button_img" alt=$title title=$title}</a>
            {else}
                <a onclick="jrLike_action('{$module_url}', '{$item._item_id}', 'like', '{$unique_id}');">{jrCore_image module="jrLike" image="liked.png" width="24" height="24" class="like_button_img" alt=$title title=$title}</a>
            {/if}

        {else}

            {* user not allowed liked this *}
            {jrCore_lang module="jrLike" id="4" default="Like" assign="title"}
            <a onclick="jrLike_action('{$module_url}', '{$item._item_id}', 'like', '{$unique_id}');">{jrCore_image module="jrLike" image="`$like_status`.png" width="24" height="24" class="like_button_img" alt=$title title=$title}</a>
        {/if}

        <span class="like_count" title=""><a onclick="jrLike_get_like_users(this, '{$module}', '{$item._item_id}', 'like', '{$unique_id}');">{$like_count|default:0|number_format}</a></span>

    </div>

{elseif $action == 'dislike'}

    <div id="{$module_url}_{$item._item_id}_{$action}" class="dislike_button_box">

        {if $dislike_status == 'dislike'}

            {* this user is allowed to dislike this *}
            {jrCore_lang module="jrLike" id="5" default="Dislike" assign="title"}
            {if $_conf.jrLike_require_login == 'on' && !jrUser_is_logged_in()}
                {jrCore_module_url module="jrUser" assign="uurl"}
                <a href="{$jamroom_url}/{$uurl}/login">{jrCore_image module="jrLike" image="`$dislike_status`.png" width="24" height="24" class="dislike_button_img" alt=$title title=$title}</a>
            {else}
                <a onclick="jrLike_action('{$module_url}', '{$item._item_id}', 'dislike', '{$unique_id}');">{jrCore_image module="jrLike" image="`$dislike_status`.png" width="24" height="24" class="dislike_button_img" alt=$title title=$title}</a>
            {/if}

        {elseif $dislike_status == 'disliked'}

            {* user already disliked this *}
            {jrCore_lang module="jrLike" id="7" default="You Disliked This!" assign="title"}
            {if $_conf.jrLike_require_login == 'on' && !jrUser_is_logged_in()}
                {jrCore_module_url module="jrUser" assign="uurl"}
                <a href="{$jamroom_url}/{$uurl}/login">{jrCore_image module="jrLike" image="`$dislike_status`.png" width="24" height="24" class="dislike_button_img" alt=$title title=$title}</a>
            {else}
                <a onclick="jrLike_action('{$module_url}', '{$item._item_id}', 'dislike', '{$unique_id}');">{jrCore_image module="jrLike" image="`$dislike_status`.png" width="24" height="24" class="dislike_button_img" alt=$title title=$title}</a>
            {/if}

        {else}

            {* user not allowed to dislike *}
            {jrCore_lang module="jrLike" id="5" default="Dislike" assign="title"}
            <a onclick="jrLike_action('{$module_url}', '{$item._item_id}', 'dislike', '{$unique_id}');">{jrCore_image module="jrLike" image="`$dislike_status`.png" width="24" height="24" class="dislike_button_img" alt=$title title=$title}</a>
        {/if}

        <span id="{$module_url}_{$item._item_id}_{$action}_dislike_count" class="dislike_count" title=""><a onclick="jrLike_get_like_users(this, '{$module}', '{$item._item_id}', 'dislike', '{$unique_id}');">{$dislike_count|default:0|number_format}</a></span>

    </div>
{/if}

<div id="likers-{$unique_id}" class="search_box likers_box">
    <div style="float:right;clear:both;margin-top:3px;">
        <a class="simplemodal-close">{jrCore_icon icon="close" size="16"}</a>
    </div>
    <div id="liker_list_{$unique_id}" class="liker_list"></div>
    <div class="clear"></div>
</div>
<div id="like-state-{$unique_id}" style="display:none"></div>

Currently this template would be in my skin directory jrLike_button.tpl

Now if I want to swap out the image like.png with liked-icon.png how would i over ride the modules like.png file?

I was hoping I could add the image to my skin /img/ directory or the skin root directory and the jrCore router would catch the name of jrLike_like.png and it would override the jrLike like.png image in the jrLike module.

like.png
like.png  •  873B

liked-icon.png
liked-icon.png  •  4KB


updated by @developer-networks: 04/08/16 06:57:24AM
michael
@michael
8 years ago
7,715 posts
currently module image over-ride naming convention doesn't exist. I have made a note of it for future development though. Nice idea.
brian
@brian
8 years ago
10,148 posts
This has been added for the next core release.

Thanks for the suggestion!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Tags