<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><style><!--
/* Font Definitions */
@font-face
{font-family:Helvetica;
panose-1:2 11 6 4 2 2 2 2 2 4;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:"Yu Gothic";
panose-1:2 11 4 0 0 0 0 0 0 0;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:"\@Yu Gothic";
panose-1:2 11 4 0 0 0 0 0 0 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
p.p1, li.p1, div.p1
{mso-style-name:p1;
margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
p.p2, li.p2, div.p2
{mso-style-name:p2;
margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
span.apple-converted-space
{mso-style-name:apple-converted-space;}
p.xmsonormal, li.xmsonormal, div.xmsonormal
{mso-style-name:x_msonormal;
margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
span.EmailStyle25
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-AU" link="blue" vlink="purple">
<div class="WordSection1">
<p class="MsoNormal">Hi Morten,<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Thank you very much for getting back.<o:p></o:p></p>
<p class="MsoNormal">I appreciate the detailed information provided.<o:p></o:p></p>
<p class="MsoNormal">We will send the necessary details to our graphic designers.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Again thanks.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Regards,<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Wayne. Asera<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><span lang="EN-US">From:</span></b><span lang="EN-US"> Hosted-Portals <hosted-portals-bounces@lists.gbif.org>
<b>On Behalf Of </b>Morten Høfft<br>
<b>Sent:</b> Friday, 5 February 2021 10:04 am<br>
<b>To:</b> hosted-portals@lists.gbif.org<br>
<b>Subject:</b> Re: [Hosted-Portals] Main background image Specifications<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<div>
<p class="p1"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">Hi Wayne<o:p></o:p></span></p>
<p class="p2" style="min-height:14px"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p> </o:p></span></p>
<p class="p1"><b><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">Short version</span></b><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p></o:p></span></p>
<p class="p1"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">A good starting point would be 1600w x 1000h in JPG. And choose a motive that looks nice when cropped.<span class="apple-converted-space"> If smaller it will look grained
on large devices. And if larger it will be too slow for some connections.</span><o:p></o:p></span></p>
<p class="p2" style="min-height:14px"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p> </o:p></span></p>
<p class="p1"><b><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">Long version</span></b><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p></o:p></span></p>
<p class="p1"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">It depends on the layout, device and bandwidth.<o:p></o:p></span></p>
<p class="p2" style="min-height:14px"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p> </o:p></span></p>
<p class="p1"><i><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">Image ratios and cropping</span></i><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p></o:p></span></p>
<p class="p1"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">For most images (except the post layout and images in markdown) the ratio is not fixed, as they adapt to the device/browser size. Just like you know it from the <a href="https://pacific-data.sprep.org/stories" title="https://pacific-data.sprep.org/stories">SPREP
website</a> when you resize your browser window.<o:p></o:p></span></p>
<p class="p2" style="min-height:14px"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">We do not have fixed image sizes on GBIF.org either. We manage to find images that work when cropped, but I'm certain that it can be difficult
at times.<o:p></o:p></span></p>
<p class="p2" style="min-height:14px"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p> </o:p></span></p>
<p class="p1"><i><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">Format</span></i><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p></o:p></span></p>
<p class="p1"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">If it isn’t an image, but graphics, then use SVG (instead of JPG) as that scales nicely and is small in terms of bytes. The image that you currently have (the light green
background with an arc) looks like a perfect candidate for an SVG.<o:p></o:p></span></p>
<p class="p2" style="min-height:14px"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p> </o:p></span></p>
<p class="p1"><i><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">Resolution</span></i><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p></o:p></span></p>
<p class="p1"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">Currently we serve one size for all devices. So, resolution is a compromise between download speed and crispness. Using an <a href="https://pacific-data.sprep.org/sites/all/themes/custom/inform_regional/assets/images/hero-image.jpg" title="https://pacific-data.sprep.org/sites/all/themes/custom/inform_regional/assets/images/hero-image.jpg">image
from the SPREP site</a> as an example, we see it is 1920x1500 pixels and 372kb. That would be perfectly suitable for a header image on this site as well<o:p></o:p></span></p>
<p class="p2" style="min-height:14px"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p> </o:p></span></p>
<p class="p1"><i><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">Coming changes</span></i><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p></o:p></span></p>
<p class="p1"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">I hope to address resolution and formats in the following days or weeks, in such a way that high resolution images are expected to be uploaded, and they will then be
scaled to more appropriate sizes and formats.<o:p></o:p></span></p>
<p class="p1" style="min-height:14px"><i><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">We can add more layout options</span></i><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p></o:p></span></p>
<p class="p1"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">If your designer has a specific layout in mind (e.g. with fixed ratios) and it has general use, then I'm happy to help implement it or discuss it. <o:p></o:p></span></p>
<p class="p2" style="min-height:14px"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p> </o:p></span></p>
<p class="p1"><i><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">References</span></i><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black"><o:p></o:p></span></p>
<div>
<p class="p1"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">The base theme that all these sites inherit from has some examples that you might find informative.<o:p></o:p></span></p>
<div>
<p class="MsoNormal"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">There are layout examples in the menu. E.g. a <a href="https://hp-base-theme.gbif-staging.org/layout/video" title="https://hp-base-theme.gbif-staging.org/layout/video">video
layout</a>.<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black">And an example showing <a href="https://hp-base-theme.gbif-staging.org/examples/images" title="https://hp-base-theme.gbif-staging.org/examples/images">image use</a>.<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black"><br>
</span><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black;background:white">I hope that helped</span><span style="font-size:12.0pt;color:black"><o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black"><o:p> </o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black;background:white">Best</span><span style="font-size:12.0pt;color:black"><o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black;background:white">Morten Høfft</span><span style="font-size:12.0pt;color:black"><o:p></o:p></span></p>
</div>
<p class="MsoNormal"><span style="font-size:9.0pt;font-family:"Helvetica",sans-serif;color:black;background:white">Web developer at GBIF.org</span><span style="font-size:12.0pt;color:black"><o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:12.0pt;color:black"><o:p> </o:p></span></p>
</div>
<div class="MsoNormal" align="center" style="text-align:center">
<hr size="2" width="98%" align="center">
</div>
<div id="divRplyFwdMsg">
<p class="MsoNormal"><b><span style="color:black">From:</span></b><span style="color:black"> Hosted-Portals <<a href="mailto:hosted-portals-bounces@lists.gbif.org">hosted-portals-bounces@lists.gbif.org</a>> on behalf of Wayne Asera <<a href="mailto:waynea@sprep.org">waynea@sprep.org</a>><br>
<b>Sent:</b> Wednesday, February 3, 2021 8:07 PM<br>
<b>To:</b> <a href="mailto:hosted-portals@lists.gbif.org">hosted-portals@lists.gbif.org</a> <<a href="mailto:hosted-portals@lists.gbif.org">hosted-portals@lists.gbif.org</a>><br>
<b>Subject:</b> [Hosted-Portals] Main background image Specifications</span> <o:p>
</o:p></p>
<div>
<p class="MsoNormal"> <o:p></o:p></p>
</div>
</div>
<div>
<div>
<p class="xmsonormal"><span lang="EN-NZ">Hi everyone,</span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ"> </span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ">My name is Wayne, I am working with Bradley Myer, David Moverly and others who are involved in the hosted portal from Secretariat of the Pacific Regional Environment Programme (SPREP) for Pacific Countries and Territories.</span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ"> </span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ">We are in the process of setting up our hosted portal same as everyone. Currently, we are trying to upload a banner or main background image that would represent all the Pacific countries and territories as a theme.</span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ">I would like to ask if there is any specific dimension of the banner or main background image that is required to be uploaded on to the portal?</span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ">Specifications that would help provide a better quality and resolution once it is uploaded so that, our graphic designers team can start.</span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ"> </span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ">Looking forward to hear from everyone.</span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ"> </span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ"> </span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ">regards,</span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ"> </span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ">Wayne. Asera</span><o:p></o:p></p>
<p class="xmsonormal"><span lang="EN-NZ"> </span><o:p></o:p></p>
</div>
</div>
</div>
</body>
</html>