Adding a banner to the install dialogue of a custom plugin

Question

Adding a banner to the install dialogue of a custom plugin

Robin K

2019年9月16日 06:16

I wrote a custom plugin for a client and another one for myself. The one for my client is being used on 9 of their wordpress sites and I have zero drive to manually upload new versions 9 times. Hence I created some sort of custom repository.

Everything is working fine, there is just this one thing:

How can I place an image into the modal header as one is used to see from plugins hosted at the Wordpress repository? It it possible at all?

Do I have the change the plugin info response in any way? Looking at the response from http://api.wordpress.org/plugins/info/1.0 didn't really give me helpful input.

Topic plugin-repository automatic-updates Wordpress

Category Web

Robin K · Accepted Answer · 2018年6月1日 14:02

Since no one was able to answer my question, I will do so myself since I found the answer this morning.

When executing the API call for fetching plugin information, the response object must contain a banners array:

$response->banners = [
    'low' => 'http://yourdomain.com/banner_772x250.png',
    'high' => 'http://yourdomain.com/banner_1544x500.png',
];

Images need to be called "low" (exactly 772x250 pixels) and/or "high" (1544x500 pixels). Only one of both needs to be set. I recommend the "low" one, since the "high" one seems to be only needed for retina displays (can't find source anymore).

I found the answer to this question early in the morning today by looking at the file

wp-admin/include/plugin-install.php

lines 526+ (WP version 4.9.6):

if ( ! empty( $api->banners ) && ( ! empty( $api->banners['low'] ) || ! empty( $api->banners['high'] ) ) ) {
    $_with_banner = 'with-banner';
    $low  = empty( $api->banners['low'] ) ? $api->banners['high'] : $api->banners['low'];
    $high = empty( $api->banners['high'] ) ? $api->banners['low'] : $api->banners['high'];
    ?>
    <style type="text/css">
        #plugin-information-title.with-banner {
            background-image: url( <?php echo esc_url( $low ); ?> );
        }
        @media only screen and ( -webkit-min-device-pixel-ratio: 1.5 ) {
            #plugin-information-title.with-banner {
                background-image: url( <?php echo esc_url( $high ); ?> );
            }
        }
    </style>
    <?php
}

I hope this is helpful to somebody. It certainly was for me.

Adding a banner to the install dialogue of a custom plugin

About