Skip to content
This repository was archived by the owner on Aug 30, 2018. It is now read-only.

article.image support + a few fixes #495

Merged
carolineschnapp merged 2 commits into from
Jan 5, 2016
Merged

article.image support + a few fixes #495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9de0ce6
Few fixes to theme settings content + fixes to social meta tags
carolineschnapp Jan 5, 2016
0889c9f
Add article.image support to blog.liquid
carolineschnapp Jan 5, 2016
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
33 changes: 14 additions & 19 deletions config/settings_schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
"label": "Custom logo",
"max-width": 450,
"max-height": 200,
"info": "Maximum logo dimensions are 450px wide by 200px high. The uploaded file will be resized to fit within those constraints."
"info": "450 x 200px .png"
},
{
"type": "text",
Expand All @@ -131,9 +131,10 @@
{
"type": "image",
"id": "favicon.png",
"label": "16 x 16px png",
"max-width": 16,
"max-height": 16
"label": "Icon",
"max-width": 32,
"max-height": 32,
"info": "32 x 32px .png required"
}
]
},
Expand All @@ -145,18 +146,6 @@
"id": "footer_social_enable",
"label": "Show social media icons"
},
{
"type": "text",
"id": "social_twitter_link",
"label": "Twitter URL",
"info": "Example: https://twitter.com/shopify"
},
{
"type": "text",
"id": "social_facebook_link",
"label": "Facebook URL",
"info": "Example: https://www.facebook.com/shopify"
},
{
"type": "checkbox",
"id": "footer_newsletter_enable",
Expand Down Expand Up @@ -205,9 +194,15 @@
"settings": [
{
"type": "text",
"id": "twittercard_handle",
"label": "Twitter handle",
"info": "Example: @shopify"
"id": "social_twitter_link",
"label": "Twitter URL",
"info": "https://twitter.com/shopify"
},
{
"type": "text",
"id": "social_facebook_link",
"label": "Facebook URL",
"info": "https://www.facebook.com/shopify"
}
]
}
Expand Down
103 changes: 39 additions & 64 deletions snippets/social-meta-tags.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,64 @@
<!-- /snippets/social-meta-tags.liquid -->
{% comment %}
Add Facebook and Pinterest Open Graph meta tags to product pages
for friendly Facebook sharing and Pinterest pinning.

More info Open Graph meta tags
- https://developers.facebook.com/docs/opengraph/using-objects/
- https://developers.pinterest.com/rich_pins/

Use the Facebook Open Graph Debugger for validation (and cache clearing)
- http://developers.facebook.com/tools/debug

Validate your Pinterest rich pins
- https://developers.pinterest.com/rich_pins/validator/
Open graph tags
{% endcomment %}
{% if template contains 'product' %}
{% if template == 'index' %}
<meta property="og:type" content="website">
<meta property="og:title" content="{{ page_title }}">
<meta property="og:description" content="{{ page_description }}">
{% elsif template contains 'product' %}
<meta property="og:type" content="product">
<meta property="og:title" content="{{ product.title | strip_html | escape }}">
{% for image in product.images limit:3 %}
<meta property="og:image" content="http:{{ image.src | img_url: 'grande' }}">
<meta property="og:image:secure_url" content="https:{{ image.src | img_url: 'grande' }}">
{% for image in product.images reversed limit:3 %}
<meta property="og:image" content="http:{{ image | img_url: 'grande' }}">
<meta property="og:image:secure_url" content="https:{{ image | img_url: 'grande' }}">
{% endfor %}
<meta property="og:description" content="{{ product.description | strip_html | escape }}">
<meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html | escape }}">
<meta property="og:price:currency" content="{{ shop.currency }}">
{% elsif template contains 'article' %}
<meta property="og:type" content="article">
<meta property="og:title" content="{{ article.title | strip_html | escape }}">
{% assign img_tag = '<' | append: 'img' %}
{% if article.content contains img_tag %}
{% assign src = article.content | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
{% if src %}
<meta property="og:image" content="http:{{ src }}">
<meta property="og:image:secure_url" content="https:{{ src }}">
{% endif %}
{% if article.image %}
<meta property="og:image" content="http:{{ article | img_url: '1024x1024' }}">
<meta property="og:image:secure_url" content="https:{{ article | img_url: '1024x1024' }}">
{% endif %}
<meta property="og:description" content="{{ article.excerpt_or_content | strip_html | escape }}">
{% else %}
<meta property="og:type" content="website">
<meta property="og:title" content="{{ page_title | escape }}">
{% if settings.logo_use_image %}
<meta property="og:image" content="http:{{ 'logo.png' | asset_url }}">
<meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}">
<meta property="og:image" content="http:{{ 'logo.png' | asset_url }}">
<meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}">
{% endif %}
{% endif %}
{% if page_description %}
<meta property="og:description" content="{{ page_description | escape }}">
{% endif %}
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:site_name" content="{{ shop.name }}">

{% comment %}
This snippet renders meta data needed to create a Twitter card
for products and articles.

Your cards must be approved by Twitter to be activated
- https://dev.twitter.com/docs/cards/validation/validator

More information:
- https://dev.twitter.com/cards/types/summary
Twitter card
{% endcomment %}

{% comment %}
Twitter user name of the site, based on theme settings
{% endcomment %}
{% if settings.twittercard_handle != blank %}
<meta name="twitter:site" content="{{ settings.twittercard_handle }}">
{% unless settings.social_twitter_link == blank %}
<meta name="twitter:site" content="@{{ settings.social_twitter_link | split: 'twitter.com/' | last }}">
{% endunless %}
{% if template contains 'article' and article.image %}
<meta name="twitter:card" content="summary_large_image">
{% else %}
<meta name="twitter:card" content="summary">
{% endif %}
<meta name="twitter:card" content="summary">
{% if template contains 'product' %}
<meta name="twitter:title" content="{{ product.title }}">
<meta name="twitter:description" content="{{ page_description | truncatewords: 140, '' | escape }}">
<meta name="twitter:image" content="https:{{ product.featured_image.src | img_url: 'medium' }}">
<meta name="twitter:image:width" content="240">
<meta name="twitter:image:height" content="240">
{% if template == 'index' %}
<meta name="twitter:title" content="{{ page_title }}">
<meta name="twitter:description" content="{{ page_description | escape }}">
{% elsif template contains 'product' %}
<meta name="twitter:title" content="{{ product.title | strip_html | escape }}">
<meta name="twitter:description" content="{{ product.description | strip_html | truncate: 200, '' | escape }}">
<meta name="twitter:image" content="https:{{ product | img_url: 'grande' }}">
<meta name="twitter:image:width" content="600">
<meta name="twitter:image:height" content="600">
{% elsif template contains 'article' %}
<meta name="twitter:title" content="{{ article.title }}">
<meta name="twitter:description" content="{{ page_description | truncatewords: 140, '' | escape }}">
{% comment %}
Check if content contains an image to add to the card
- Source: http://blog.viralica.com/2013/09/twitter-product-cards-on-shopify/
{% endcomment %}
{% if article.content contains "<img" %}
{% assign src = article.content | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:' %}
{% if src %}
<meta property="twitter:image" content="{{ src }}">
{% endif %}
<meta name="twitter:title" content="{{ article.title | strip_html | escape }}">
<meta name="twitter:description" content="{{ article.excerpt_or_content | strip_html | truncate: 200, '' | escape }}">
{% if article.image %}
<meta property="twitter:image" content="https:{{ article | img_url: '1024x1024' }}">
{% endif %}
{% endif %}
69 changes: 40 additions & 29 deletions templates/blog.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,39 +32,50 @@
{% endcomment %}

{% for article in blog.articles %}
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
{% capture author %}<strong>{{ article.author }}</strong>{% endcapture %}
{% capture date %}<time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
<p>{{ 'blogs.article.author_on_date_html' | t: author: author, date: date }}</p>

{% comment %}
Add a surrounding div with class 'rte' to anything that will come from the rich text editor.
Since this is just a listing page, you can either use the excerpt or truncate the full article.
{% endcomment %}
<div class="rte">
{% if article.excerpt.size > 0 %}
{{ article.excerpt }}
{% else %}
<p>{{ article.content | strip_html | truncatewords: 100 }}</p>
{% endif %}
</div>

{% comment %}
Show off meta information like number of comments and tags.
{% endcomment %}
<ul class="inline-list">
{% if blog.comments_enabled? %}
<li>
<a href="{{ article.url }}#comments">
{{ 'blogs.comments.comments_with_count' | t: count: article.comments_count }}
<div class="article">

<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
{% capture author %}<strong>{{ article.author }}</strong>{% endcapture %}
{% capture date %}<time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
<p>{{ 'blogs.article.author_on_date_html' | t: author: author, date: date }}</p>

{% if article.image %}
<a class="article__featured-image" href="{{ article.url }}">
{{ article | img_url: '1024x1024' | img_tag: article.title }}
</a>
</li>
{% endif %}

{% include 'tags-article' %}
</ul>
{% comment %}
Add a surrounding div with class 'rte' to anything that will come from the rich text editor.
Since this is just a listing page, you can either use the excerpt or truncate the full article.
{% endcomment %}
<div class="rte">
{% if article.excerpt.size > 0 %}
{{ article.excerpt }}
{% else %}
<p>{{ article.content | strip_html | truncatewords: 100 }}</p>
{% endif %}
</div>

{% comment %}
Show off meta information like number of comments and tags.
{% endcomment %}
<ul class="inline-list">
{% if blog.comments_enabled? %}
<li>
<a href="{{ article.url }}#comments">
{{ 'blogs.comments.comments_with_count' | t: count: article.comments_count }}
</a>
</li>
{% endif %}

{% include 'tags-article' %}
</ul>

<p><a href="{{ article.url }}">{{ 'blogs.article.read_more' | t }} &rarr;</a></p>

<p><a href="{{ article.url }}">{{ 'blogs.article.read_more' | t }} &rarr;</a></p>
</div>

{% unless forloop.last %}<hr>{% endunless %}

Expand All @@ -73,7 +84,7 @@
{% if paginate.pages > 1 %}
<hr>
<div class="pagination">
{{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
{{ paginate | default_pagination }}
</div>
{% endif %}

Expand Down