Real Geeks Docs

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
#redirect https://support.realgeeks.com/hc/en-us/articles/360043154134
===== Getting Started =====

This is a brief tutorial on how to setup your landscape images and logos with a piece of free online software called "Pixlr Express".  For the majority of this tutorial, we'll be focussed on the landscape images; however, both procedures are nearly identical, so you may simply repeat these steps for the logo.  To get started, you'll need two pieces of information:

  - The name of the template you're using: **Miranda**, **Miranda Thin** or **Molly**.  A list of all Real Geeks templates is available at http://www.realgeeks.com/designs/.


Now we simply need to determine the dimensions of our landscape image.  Please see [[:image_requirements|Landscape Image Minimum Requirements]] to find this information specific to the template you are using.

===== Using Pixlr X =====

Navigate to http://pixlr.com/x to get started.  You'll be presented with a splash page like the one below.

{{:screencasts:pxlrxrar1.jpg?700|}}

Click on "Open Image" in the top left to upload an image from your computer.  Make sure the image you have is **at least** the size of your required landscape [[http://docs.realgeeks.com/image_requirements|image requirements]]. 

To resize your image, you'll use any combination of these two tools.


==== Resize ====

Resizing is like what a photographer does when they give you multiple sizes of the same image.  They're proportioned the same, but are bigger or smaller than the original.

Click the cross arrowed symbol in the toolbar.

{{:undefined:pxlrxrar2-resize.jpg?700|}}

Click "Resize Image" button.

{{:undefined:pxlrxrar3.jpg?700|}}

Here, adjust the width of the image. Depending on the site template you chose, you can change it to the coorelating length. For this example, we will go along with the Miranda dimensions. We change the width to 1100. Then click "Apply".

{{:screencasts:pxlrxrar4.jpg?700|}}

After adjusting the width, we now want to change the height without warping the image. We will now move on to cropping. 

==== Crop ====

Click the crop symbol, which is below the arrow crossed symbol. Change the height to 720, click "Apply" and then "Save". 

{{:undefined:pxlrxrar5_1_.jpg?700|}}

==== Saving the Image ====

For saving, you will want to keep the image as a JPG, keep the resolution as HIGH. Click "Download". 

{{:undefined:pxlrxrar6.jpg?700|}}


===== Uploading the Landscape Image =====

Navigate to your site backend, which is at **<nowiki>http://yourdomain.com/admin</nowiki>** (ie. <nowiki>http://www.adrhi.com/admin</nowiki>) and login.

Scroll down to "Site Settings".

{{ :screencasts:sitesettings.png?400 |}}

Go to the "Template Options" tab and scroll down to "Header Image".

{{:screencasts:screen_shot_2019-06-11_at_5.30.51_pm.png?700|}}

Scroll down until you find the "Header Image" setting and click on the icon to the right of the file-path.

Upload your file, by clicking "Upload" at the top-right of the pop-up window.  Select the file by clicking "Browse", then click on "Upload" in the bottom-right of the pop-up window.  When it's finished, simply click on "File Browser" in the top-left of the pop-up.  Your new file should appear at the top of the list.  Click on the "Select" icon at the far-left of the image.  Once you're done, the window should close and you should see a small preview of your image in the settings page.  Click "Save" at the bottom of the page and you're done!


===== Uploading the Logo =====

Click [[http://docs.realgeeks.com/uploading_your_logo|here]] to learn how to create/add a logo.
Real Geeks Docs

User Tools

Site Tools

Page Tools
