• Registered: 2019-12-29
  • Posts: 4

Topic: Phone Homepage Icon?

Hi

I've just bought the app and want to send links to a gallery that customers will save to their homescreens - is there any way of selecting the icon that it will be saved as?

Thanks,

Paul Adair

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Phone Homepage Icon?

You can specify an 'apple-touch-icon' within your gallery's web page (for both iOS and Android devices) so that, when the gallery's web page is saved to the user's home screen, the custom icon is used.
Please see these links for details:
https://www.computerhope.com/jargon/a/appletou.htm
https://stackoverflow.com/questions/117 … rtcut-icon

You might also want to set a 'shortcut icon' for Android devices.
As noted in the link below:

If you only specify the home screen icon, the web page will not display an icon next to the URL in the web browser.

Please see this link for details:
https://stackoverflow.com/questions/117 … rtcut-icon

I hope this points you in the right direction.

  • Registered: 2019-12-29
  • Posts: 4

Re: Phone Homepage Icon?

Is there a way of using a preset to do that each time i create a gallery?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Phone Homepage Icon?

A Juicebox-Pro 'Preset' handles only configuration options.
However, you could modify the template file that JuiceboxBuilder-Pro uses to generate the gallery's 'index.html' page and add your custom <link> tag to it. Try the following:

Open the following file in a plain text editor:
Mac: /Applications/JuiceboxBuilder-Pro.app/Contents/Resources/template/index.html
Windows: C:\Program Files (x86)\JuiceboxBuilder-Pro\template\index.html

Now, add your custom <link> tag somewhere between the <head> and </head> tags.
Just use the image's filename (essentially a relative path to the image in the gallery folder) in the <link> tag.

Each time a new gallery is created by JuiceboxBuilder-Pro, the gallery's index.html' file will include your custom code.

All you then need to do is copy the image into the gallery folder (alongside the 'index.html' file).

I hope this helps.

  • Registered: 2019-12-29
  • Posts: 4

Re: Phone Homepage Icon?

That sounds really good  & I think that would work - is there anywhere i can put the icon so it gets copied each time into the new template?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Phone Homepage Icon?

You could place your icon into the 'template/jbcore' folder, (JuiceboxBuilder-Pro copies the entire 'template/jbcore' folder across to the gallery folder), e.g.:
Mac: /Applications/JuiceboxBuilder-Pro.app/Contents/Resources/template/jbcore/icon.png
Windows: C:\Program Files (x86)\JuiceboxBuilder-Pro\template\jbcore\icon.png

Your <link> tag would then look something like this (with a relative path to the icon file within the gallery's 'jbcore' folder):

<link rel="apple-touch-icon" href="jbcore/icon.png"/>

Use a similar path for any other <link> tags you use.

  • Registered: 2019-12-29
  • Posts: 4

Re: Phone Homepage Icon?

That was spot on - i ended up using https://www.favicon-generator.org/ to create all the icons required and then adding the below to the template html head.

Now all i need to do is ask if we can have the first image in the slideshow set as the icon!

Thanks for the help - it worked really well.

Paul

    <link rel="apple-touch-icon" sizes="57x57" href="jbcore/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="jbcore/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="jbcore/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="jbcore/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="jbcore/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="jbcore/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="jbcore/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="jbcore/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="jbcore/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="jbcore/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="jbcore/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="jbcore/favicon-16x16.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="jbcore/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Phone Homepage Icon?

Now all i need to do is ask if we can have the first image in the slideshow set as the icon!

Unfortunately, as I'm sure you're already aware, there is no easy way to do this.
What you are doing is probably as automated as possible (using JuiceboxBuilder-Pro).
(With the Juicebox plugin for Lightroom, you could quite easily point towards the first image in the gallery but there would be no way to process the image to create multiple different sizes so you'd need to rely on the browser's algorithms to dynamically resize the image as and when required.)

Thanks for the help - it worked really well.

You're welcome!