apple startup image

Huh? “adasdasds”?

I don’t know what fontinyus.php is.

Ah! Sorry. Again:

https://i.hizliresim.com/mcgg37x.jpg

and functions.php file.

• This reply was modified 2 years, 10 months ago by Halil ESEN.
• This reply was modified 2 years, 10 months ago by Halil ESEN.
• This reply was modified 2 years, 10 months ago by Halil ESEN.

The change in 0.7.0 is to provide a filter to allow you to provide the images. Example usage: https://github.com/GoogleChromeLabs/pwa-wp/issues/586#issuecomment-1103950068

If you’re adding them yourself manually, you don’t need to do anything.

However, as of Safari 15.4, apparently icons are supported in the Web App Manifest now and you do not need to use apple-touch-icon at all.

From the Safari 15.4 release notes:

Added support for Web App Manifest icons, shown when no apple-touch-icon is provided and when either “purpose”: “any” is present or the “purpose” key isn’t present at all.

Thanks a lot for the information.

Well… It was too bad that only a picture of the code was taken. I had to write it myself and it was a coding language I was just getting familiar with. ??

add_filter(
    'apple_touch_startup_image',
    static function ( $images ) {
        $for_retina_portrait = array(
            'href' => '/wp-content/uploads/logo-retina-portrait-1170.png',
            'media' => '(device-width: 1170px) and (device-height: 2532px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)',
            );
        $for_retina_landscape = array(
            'href' => '/wp-content/uploads/retina-landscape-2532.png',
            'media' => '(device-width: 1170px) and (device-height: 2532px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)',
            );
        $images[] = $for_retina_portrait;
        $images[] = $for_retina_landscape;
        
        return $images;
    },
    10,
    3
);

But it didn’t work. First of all, I thought it might be related to the jpg type of the picture, so I made it again in png format. It didn’t happen again. I shortened the address, thinking maybe it should be just the path instead of the full link of the pictures. It didn’t happen again.

What am I doing wrong? By the way, is this true: the pictures I’m talking about here will be in the same proportion as the screen size of the phone. For example, the images in the code above are 1170x2532px.

Im use iOS version 15.4.1

If you are just adding the links to the head manually do the images work in that case?

There was no code in head when I did this.

In line with your answer, I deleted it and added the <link> code to header. It didn’t happen again. am i missing something?

Personally I have never used this feature since I don’t use iOS. It was added by a contributor in https://github.com/GoogleChromeLabs/pwa-wp/pull/595

It worked for them on iOS, so I’m not sure why it isn’t working for you.

Anyway, since Safari 15.4 is supposed to support reading icons from the Web App Manifest, I don’t think you need to do anything with apple_touch_startup_image.

In your code sample, I believe you are targeting iPhone 13 / 13 Pro with the 1170×2532 image, but the iPhone 13 display has a scale factor of 3 (-webkit-device-pixel-ratio: 3).

Is the plugin not generating the correct HTML, or you cannot see the startup image using (what should be) the correct HTML?

Yes, I noticed and fixed it later. Again it didn’t work.
Then I created the initial images for most models I could:

add_filter(
    'apple_touch_startup_image',
    static function ( $images ) {
        $for_retina_portrait = array(
            'href' => 'https://sitename.com/wp-content/uploads/logo-retina-portrait-1170.png',
            'media' => '(device-width: 1170px) and (device-height: 2532px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)',
            );
        $for_retina_landscape = array(
            'href' => 'https://sitename.com/wp-content/uploads/retina-landscape-2532.png',
            'media' => '(device-width: 1170px) and (device-height: 2532px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)',
            );
		$for_retina_portrait = array(
            'href' => 'https://sitename.com/wp-content/uploads/logo-retina-portrait-1284.png',
            'media' => '(device-width: 1284px) and (device-height: 2778px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)',
            );
        $for_retina_landscape = array(
            'href' => 'https://sitename.com/wp-content/uploads/retina-landscape-2778.png',
            'media' => '(device-width: 1284px) and (device-height: 2778px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)',
            );
		$for_retina_portrait = array(
            'href' => 'https://sitename.com/wp-content/uploads/logo-retina-portrait-1080.png',
            'media' => '(device-width: 1080px) and (device-height: 2340px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)',
            );
        $for_retina_landscape = array(
            'href' => 'https://sitename.com/wp-content/uploads/retina-landscape-2340.png',
            'media' => '(device-width: 1080px) and (device-height: 2340px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)',
            );
		$for_retina_portrait = array(
            'href' => 'https://sitename.com/wp-content/uploads/logo-retina-portrait-828.png',
            'media' => '(device-width: 828px) and (device-height: 1792px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)',
            );
        $for_retina_landscape = array(
            'href' => 'https://sitename.com/wp-content/uploads/retina-landscape-1792.png',
            'media' => '(device-width: 828px) and (device-height: 1792px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)',
            );
		$for_retina_portrait = array(
            'href' => 'https://sitename.com/wp-content/uploads/logo-retina-portrait-1125.png',
            'media' => '(device-width: 1125px) and (device-height: 2436px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)',
            );
        $for_retina_landscape = array(
            'href' => 'https://sitename.com/wp-content/uploads/retina-landscape-2436.png',
            'media' => '(device-width: 1125px) and (device-height: 2436px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)',
            );
		$for_retina_portrait = array(
            'href' => 'https://sitename.com/wp-content/uploads/logo-retina-portrait-1242.png',
            'media' => '(device-width: 1242px) and (device-height: 2688px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)',
            );
        $for_retina_landscape = array(
            'href' => 'https://sitename.com/wp-content/uploads/retina-landscape-2688.png',
            'media' => '(device-width: 1242px) and (device-height: 2688px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)',
            );
		$for_retina_portrait = array(
            'href' => 'https://sitename.com/wp-content/uploads/logo-retina-portrait-1080-20.png',
            'media' => '(device-width: 1080px) and (device-height: 1920px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)',
            );
        $for_retina_landscape = array(
            'href' => 'https://sitename.com/wp-content/uploads/retina-landscape-1920-80.png',
            'media' => '(device-width: 1080px) and (device-height: 1920px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)',
            );
		$for_retina_portrait = array(
            'href' => 'https://sitename.com/wp-content/uploads/logo-retina-portrait-750.png',
            'media' => '(device-width: 750px) and (device-height: 1334px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)',
            );
        $for_retina_landscape = array(
            'href' => 'https://sitename.com/wp-content/uploads/retina-landscape-1334.png',
            'media' => '(device-width: 750px) and (device-height: 1334px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)',
            );
        $images[] = $for_retina_portrait;
        $images[] = $for_retina_landscape;
        
        return $images;
    },
    10,
    3
);

As you can see it doesn’t work:

https://youtube.com/shorts/caKkiceaCss?feature=share

Your function overwrites $for_retina_portrait and $for_retina_landscape multiple times, and only saves the last two to images. Also your function is declared with the static keyword which I have only seen used for static class methods; I suggest removing the keyword.

I am still not certain your code is resulting in the correct HTML being generated. Please include the generated HTML.

Also, the filter only takes 1 argument, so your add_filter call only needs to be add_filter('apple_touch_startup_image', function ($images) {...}) (you included 3 as a last argument, that tells add_filter you expect 3 arguments for your function).

I understand. So I have to use separate filters for each. I will try. It didn’t work when I first did it, but I’ll try again.

It didn’t work. In fact, when I look at the sites of those who wrote about this feature, it does not work. I think it has to do with iOS. But I wonder how those who they do it when they Pull requests.