Skip to content

Touch icons #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alexhardy wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Touch icons #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e44b4b2
touch icons solution
Sep 28, 2015
8c5e882
Changed Perch comments to HTML ones
Sep 28, 2015
6d34e3f
Indentation for code formatting
Sep 28, 2015
c6b38c6
Indentation for code formatting
Sep 28, 2015
e39e076
Typo
Sep 28, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion architecture/how-do-i-link-prev-next.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Tags: multiple item region, perch_content_custom

## When using a multiple item region, particularly with a list/detail display, it is sometimes useful to be able to link to the next or previous item in that region. This can be done with some simple filtering and ordering using `perch_content_custom()`

Here's the scenario; we have a multiple item region set up using the [list and detail](/architecture/how-do-i-create-list-detail-pages) approach. On the detail page, it would be great to be able to show links to the previous and next items in the list, with the user needing to navigate back to the list to find them.
Here's the scenario; we have a multiple item region set up using the [list and detail](/architecture/how-do-i-create-list-detail-pages) approach. On the detail page, it would be great to be able to show links to the previous and next items in the list, without the user needing to navigate back to the list to find them.

To do this we need three `perch_content_custom()` calls:

Expand Down
32 changes: 32 additions & 0 deletions templates/add-touch-icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
Created by: Alex Hardy
Created date: 2015-09-28
Last updated: 2015-09-28
Authors: Alex Hardy
Title: How do I add touch icons to my site?
Tags: templates

# How do I add touch icons to my site?

## You want to add touch icons, without uploading multiple image files for each size

You can use Perch's [image resize features](https://grabaperch.com/features/upload-crop-and-resize-images) tag to do that. Create a Perch editable region, using the code below as a template. You'll want to make the region shared, and place it in the head of your pages.

<!-- For Chrome for Android: -->
<link rel="icon" sizes="192x192" href="<perch:content id="icon" type="image" label="Image" bucket="touch-icon" width="192" height="192" help="Upload a 200 pixels square image" />" />
<!-- For iPhone 6 Plus with @3× display: -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="<perch:content id="icon" type="image" bucket="touch-icon" label="Image" width="180" height="180" help="Upload a 200 pixels square image" />" />
<!-- For iPad with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="<perch:content id="icon" type="image" bucket="touch-icon" label="Image" width="152" height="152" help="Upload a 200 pixels square image" />" />
<!-- For iPad with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<perch:content id="icon" type="image" bucket="touch-icon" label="Image" width="144" height="144" help="Upload a 200 pixels square image" />" />
<!-- For iPhone with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="<perch:content id="icon" type="image" bucket="touch-icon" label="Image" width="120" height="120" help="Upload a 200 pixels square image" />" />
<!-- For iPhone with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<perch:content id="icon" type="image" bucket="touch-icon" label="Image" width="114" height="114" help="Upload a 200 pixels square image" />" />
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="<perch:content id="icon" type="image" bucket="touch-icon" label="Image" width="76" height="76" help="Upload a 200 pixels square image" />" />
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<perch:content id="icon" type="image" bucket="touch-icon" label="Image" width="72" height="72" help="Upload a 200 pixels square image" />" />
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="<perch:content id="icon" type="image" label="Image" bucket="touch-icon" width="57" height="57" help="Upload a 200 pixels square image" />" /><!-- 57×57px -->
<perch:content type="image" id="icon" label="Image" bucket="touch-icon" width="200" height="200" suppress="true" help="Upload a 200 pixels square image" />