Zoom In/Out with Google Sites
Table of Contents:
Making functionality to examine artworks! In this guide, I'll show you (1) the pages you'll need to make on your website, (2) how to edit Google Drive download settings to prevent easy pirating, (3) a step by step of how to put this together and (4) caveats with this system.
Is this specific function necessary?
Technically, no. Your portfolio needs to either (1) have images on the artwork work page large enough to examine without a zoom function or (2) a zoom feature so images can be examined.
I would recommend having this feature in the way I've created because it gives the option of zooming on desktop and accounts for mobile compatibility. See "Caveats of this System" for more information.
Webpages Needed for this Zoom Function
To make this system work, you need 2 pages per artwork.
1. Artwork Information Page.
Includes information about your artwork and a sizeable image of your work for viewers to see.
2. Zoom In/Out Page.
Only item on the page is the artwork that has the zoom function.
So, returning to my Family Relations Series as a example...
So, (1) Artwork Information Page would have the following info:
Title
Medium
Dimensions (cm / in)
Year
Artist Statement (if applicable)
The webpage includes:
A back button to the larger landing page
No header to maximize the artwork seen on page.
And (2) Zoom Page, would have:
The embedded google drive image which creates a Zoom Function
A Back Button which will get the viewer back to the Artwork Information
(Optional) Artwork Information again.
Like (1), the webpage includes:
A back button to the larger landing page
No header to maximize the artwork seen on page.
Editing Google Drive Download Settings
On the Zoom Page, there is a little "pop-out" button. This takes you to the Google Drive image webpage. This isn't a feature you can remove.
When you share a google drive image, typically, all sharing permissions are on, including downloading. We need to remove those permissions, so the artwork isn't easily stolen/downloaded. This is especially important if you have uploaded a 300 DPI to Google Drive image because people can then make quality, real-life copies with that image resolution. So don't make art theft easy.
This icon in the top right of embedded image links will take you to the Google Drive image.
Where you start: An image where all sharing settings are enabled. Viewed in normal browsing. Notice the comment, print, and download icons. If you own the image and are signed into your google account, you will see this regardless of the settings you have.
Where you end: An image where all sharing settings are disabled. Viewed in private/incognito mode browsing. Notice the greyed out print icon.
To view your image as a visitor would, use private browsing/incognito mode to view the image without a signed in Google Account.
How to Disable Sharing, Downloading, and Print Settings in Google Drive
Step 1. Go to your Google Drive.
Step 2. Go into the Folder with your High Resolution Images.
Note: If you haven't already organized your files for easy access, you should do so.
You'll see this status at the bottom right this status under "Details" for the image file. We are changing this.
Step 3. Select the file(s) you want to affect.
a) For all files without folders inside the folder:
Hit Ctrl+A on your keyboard to select all the files.
Note: If you select folders at the same time as individual files, it will not show you the right settings in the next step. Use B instead.
b) For multiple files generally:
Click on one file, then hold Shift and use the Arrow Keys to select other files you want to affect.
c) For selecting one file, just click on the one file.
Step 4. Go to Sharing Settings
Left Click the image, go to “Share.”
Step 5. Change Sharing Settings
a) A Box will appear.
b) Click Settings Gear Icon in top right corner, aka "Share with People Setting"
Step 6. Change "Share with people settings"
a) Unclick "Viewers & Commenters can see the option to download, print, and copy."
b) It will update to the second frame.
c) Go back to the previous frame by clicking the arrow.
Step 7. Change "Get Links"
a) Click "Change" under "Get Links."
b) Go to "Restricted" and change the permission to "Anyone with the link"
c) The change will be highlighted in green. Beneath each image there will be a green globe and message below confirming "anyone with the link can view."
Step 8.1 In Drive, check that the change has occurred.
Go to the image you have affected in Google Drive and check under "Details." At the bottom, the status should say:
This is one way to check that the change has happened.
Step 8.2 In image, check that the change has occurred
a) Go to the image you have affected in Google Drive.
b) Left Click and go to "Get Link"
c) Hit "Copy Link"
d) In a new private / incognito window, go to your web browser's URL address.
e) Paste the URL. Hit Enter.
f) See if the icons are missing or greyed out. If they are grey, settings are disabled. (see below)
f) Another way to check: Hit the 3 dotted icon. Head to Details. Scroll to the bottom and under "Download Permissions", see if downloads are disabled.
Where you start: An image where all sharing settings are enabled viewed in normal browsing. Notice the comment, print, and download icons.
If you own the image and are signed into your google account, you will see this regardless of the settings you have.
Where you end: An image where all sharing settings are disabled viewed in private / incognito mode browsing. Notice the greyed out print icon.
To view your image as a visitor would, use private browsing / incognito mode to view the image without a signed in Google Account.
Step 9 You did it!
Any image you link to from your Google Drive will not be downloadable by strangers unless you change the permissions.
Step by Step: Creating the Zoom Function
This step adds a Zoom In/ Out function by using the artwork image's Google Drive link as an embedded webpage on site. On desktop, this functions perfectly well as a Zoom In/ Out feature. This Zoom feature doesn't work on mobile. Instead, it appears as a link to click on. See the next section, "Caveats".
Step 1. Go to your Landing Page (Portfolio page) for your section.
In my case, I have sub divided my portfolio into Prints & Projects since I create both individual print works and larger installation or multi piece works.
Step 2. Create a subpage - the artwork information page.
a) Left click on the 3 dots to the right side of the page name.
b) Click "Add subpage".
Step 3. Name your subpage.
a) Make sure the name is something presentable and easily referenced for later use. You will need to search up page names to link to them as you build your website. b) Note: When a user goes to any subpage you create, the name you wrote here will be the webpage's name in the browser tab. Hence, name pages with clear, readable/presentable titles (no code names).
Step 4. Hide the subpage from the site navigation.
a) For a single page:
Click the 3 dots on the page you want to hide. Click on "Hide from navigation."
b) For multiple pages:
Click the 3 dots on the landing page your subpages are nestled under. In my example, I would click "Prints."
Click on "Hide from navigation." It will hide the landing page "Prints" and all other subpages listed underneath.
Click again on the 3 dots for the landing page. Select "Show in navigation." The landing page "Prints" will be put back into the navigation, but all the subpages will remain hidden.
Hidden vs. visible pages
Step 5. Create your artwork information page's layout.
You can make this page look however you want.
Why I made my layout as seen:
Text is to the left so it out of the viewer's way.
This layout is more computer friendly, a personal preference.
The image to be more centered on computer screen and noticeable. Less mobile friendly as image doesn't appear first, but an acceptable trade to me. Place the text on the right side if you want your image to appear first on mobile.
Step 6. Make a back button within the title header.
This keeps the back button as close to the top as possible making sure your artwork is front and center.
a) Delete the title header.
b) Switch the text type for "Title" to "Small".
c) Drag the box out to the farthest left.
d) Enter the back button text.
Ex. "<< Back to Prints"
e) Give the text italics.
f) Link the text back to the landing page. Here, that page is "Prints: The Real."
Step 7. Add the artwork image onto the page.
a) Resize it to your needs
For Landscape Sizes: Make the image a bit smaller than the full width of the page. Size the image until it is fully in view.
For Portrait Sizes: Make the image at most 1/2 the size of the page width wise. Size the image until it is fully in view. If it's too long on the page, size it down until it is viewable.
This is subjective depending on the size of your screen. So long as your screen or resolution isn't unusually large, you can use your screen as a point of reference.
Step 8. Add a text section & artwork information.
a) Make the text small.
b) Optional: Up the size of the font.
c) Add the artwork information.
Information such as:
Title
Medium
Dimensions (cm/in)
Edition Size, Edition #, Artist Proof, Variant Edition
Materials Used (sculpture always has this)
Year
Artist Statement (if applicable)
Step 9. Move the text section to whichever side for aesthetics.
Step 10. Create another subpage under this current page - the Zoom In/Out Page.
Again, keep in mind that the name you use needs to be legible for the tab header.
Ex. "Zoom: The Real", or "Detail: The Real"
Step 11. Repeat Step 6 - replace the header with a Back Button linking to the artwork information page.
a) Delete the title header.
b) Switch the text type for "Title" to "Small."
c) Drag the box out to the farthest left.
d) Enter the back button text and have it direct back to your landing page.
Ex. "<< Back to Prints"
e) Give the text italics.
f) Link the text back to the artwork information page.
Step 12. Locate the Shareable Link for your Artwork Image in Google Drive.
a) Open Google Drive
b) Locate the file.
c) Right click, click "Get Link."
d) Click on "Copy Link" in the new window.
In the previous step you should have made all your images non-downloadable off Google Drive. Make sure to do this at some point to lower the risk of theft and add professionality.
Step 13. Place the copied link onto your Google Site.
a) Return to Google Sites
b) Hit "Ctrl+V" on your keyboard.
c) Click "Insert"
You can also click the "Embed" option under "Insert" with any link for the same result. It just does it automatically with a pasted link on your computer's clipboard.
Step 14. Resize the embedded image.
a) Drag the section size to stretch across the screen. Height should be a bit below the size of your computer screen.
b) This will be slightly subjective, so it may take some trial and error of viewing your website after publishing to get the size right.
c) You want the section to not be too large - where it would overwhelm computer monitors, but not so small that the viewer can't truly see your full image from a distance.
Before Resizing.
After Resizing. The embedded link takes up the majority of my screen.
Step 15. Optional: Add some basic artwork information.
It's nice for users to have to reference at all times, although it isn't necessary. Just make sure you consistently include or don't include it across your whole website.
Step 16. Link images to the correct pages (Landing & Artwork Information)
This process will be done twice. See (d).
a) Return to the Landing Page/Artwork Information page.
b) Click on the artwork thumbnail/image you wish to link.
c) Click on the "Insert Link" button, middle of the options.
d) Search for the subpage you created.
For the Landing Page, you will link to the Artwork Information Page.
For the Artwork Information page, you will link to the Zoom Page.
Ex. "Prints" links to > "Prints: The Real". "Prints: The Real" links to > "Detail: The Real".
e) Click "Apply".
f) When the link is applied, you can confirm it's new route by clicking the image and seeing its destination on the Google Site preview, or on your website once the changes are published.
Click the insert link image.
Search your website for the page you want to link to. Click "Apply" or else change won't occur.
The change has occurred when you see the location below.
Step 17. Use "Duplicate Page" to use these webpage assets again in the future.
You don't want to remake assets over and over for similar pages. I would recommend making one page your "Standard Layout" for a kind of page (landing page, artwork information, zooming). Then, duplicate that page from here on out so you don't need to re-make assets / settings (font sizes, stylization, etc.).
a) Click the 3 dots beside any given header in the "Pages" tab.
b) Select "Duplicate Page."
c) Name the Page to the new artwork.
d) Alter the assets on your newly made duplicate page to reflect your new use. For an artwork page, you would replace all the aforementioned features (Back Button link, Artwork Information description, artwork image) with a different artwork.
Click the 3 dots beside the header of the webpage and select "Duplicate Page".
Rename the page. In my case, I would rename to
"Detail: <Artwork Name Here>"
Change the (1) Back Button Link, (2) Artwork image, (3) Artwork Description to match new artwork.
FAQ / Caveats of this System
Q: Why don't I just link the thumbnails to the Google Drive Image links?
A: Originally, I had just linked each of my thumbnails to my google drive images. Google Drive image links pop open as an extra browser tab. Because it pops open a new tab, your browser's back button doesn't work. This takes users off your website which could lead them to stop exploring your website altogether. Tabs are pretty well integrated as a feature now, but not all audiences will know to close a pop up tab to get to your site. It's just a weird thing Google does that I can't change.
Example 1: Linking to Google Drive Directly
Currently on one website tab. I click on "Ding Dong Head".
The Google Drive link I embedded into the image pops open a new tab leading me away from the first website tab.
Example 2: Linking to a Landing Page Instead
Currently on one website tab. I click on "Two Brothers".
I am lead to the "Two Brothers" Artwork Information page. I stay on the same tab, never leaving the website.
Q: Why not put the Google Drive Embedded Link on the artwork information page?
A: The issue is mobile compatibility. On mobile, Google Drive links do not appear like their Zoom In/Out cousin on desktop. It appears as a link you click on and you choose to open it either with Google Drive or your mobile Web Browser.
This doesn't look good on mobile and is clunky for the user experience. Images that are placed normally on Google Sites load just fine on mobile and actually automatically fit to the mobile screen size. So this is why you have to have an artwork page where the image is normally placed and not a google drive embedded link. Plus, on most mobile devices you can zoom in and out on webpages by pinching your fingers. You'll have to rely on this user behavior for zooming in and out on mobile instead. It isn't perfect, but hey, the google site system is cheap.
How the zoom page appears on mobile. You can't control the image preview or remove the google drive icon.
Q: Wait - is this Zoom Feature even necessary?
A: Technically no. So long as users can get a full feel of your artwork at size, you can do whatever.
I think it looks and feels a lot better to have it. You are the one putting your work up online and trying to sell it. You have one opportunity to hook customers - make it count. Many art websites don't have a feature like this. If you decide to make your artwork a full center page piece, chances are you don't need this. So long as people can your work at a large enough size, this part becomes optional. However, you have one opportunity to give users or potential customers information about your work. Make sure that there's nothing blocking them from wanting to buy it. I know from being a customer that I want to be able to examine an artwork or item in full before I purchase it.
Image from Open Studio Toronto's website. It's not that it's a bad thing to not have a Zoom, just preference.
I can't zoom in on the photo seen here. Unlike real life, I can't examine the work more before purchasing it.
If I can't make it to the gallery (COVID-19 or global customer), I can't see the quality of the work. I can trust it's a quality piece of work by artist reputation and gallery reputation, but I'd prefer to examine it up close.
Considering most small artists are going to be selling online, it becomes vital that people can fully examine an artwork before purchasing it. People's attention spans are fairly small, so any barrier to entry will stop them.
Essential Features Checklist
Do all of my artwork pages have a Zoom In/Out Page attached?
Are all of my "display images" linked to their corresponding Zoom In / Out page?
Is the embedded Zoom box proportionate to my webpage? If someone opened this webpage, would it go past the edges of their screen?
Have I disabled download permissions in Google Drive?
Have I named my paged & subpages with appropriate, legible titles?
Congratulations!
If you've followed this guide to the end, you should have all the tools you need to build a basic portfolio on Google Sites! Stay tuned for the extension of this guide, "How to Build an Online Webstore." Hope this has helped you on your artistic journey.
Sincerely,
Kaitlyn Hollander
If you have questions or comments about this guide, I might be able to assist.
Email me at printmakerslibrary@gmail.com