mirror of
https://github.com/kremalicious/blog.git
synced 2024-09-24 01:58:50 +02:00
commit
932def802f
2
Gemfile
2
Gemfile
@ -7,6 +7,7 @@ group :development do
|
|||||||
gem 'jekyll-sitemap'
|
gem 'jekyll-sitemap'
|
||||||
gem 'jekyll-redirect-from'
|
gem 'jekyll-redirect-from'
|
||||||
gem 'jekyll-picture-tag'
|
gem 'jekyll-picture-tag'
|
||||||
|
gem 'jekyll-archives'
|
||||||
gem 'rouge'
|
gem 'rouge'
|
||||||
gem 'mini_magick'
|
gem 'mini_magick'
|
||||||
gem 'fileutils'
|
gem 'fileutils'
|
||||||
@ -17,4 +18,3 @@ group :development do
|
|||||||
gem 'gsl', :git => "https://github.com/tonyarnold/rb-gsl"
|
gem 'gsl', :git => "https://github.com/tonyarnold/rb-gsl"
|
||||||
|
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|||||||
15
_config.yml
15
_config.yml
@ -55,6 +55,21 @@ gems:
|
|||||||
- jekyll-sitemap
|
- jekyll-sitemap
|
||||||
- jekyll-redirect-from
|
- jekyll-redirect-from
|
||||||
- jekyll-picture-tag
|
- jekyll-picture-tag
|
||||||
|
- jekyll-archives
|
||||||
|
|
||||||
|
|
||||||
|
# jekyll-archives
|
||||||
|
# --------------------
|
||||||
|
|
||||||
|
jekyll-archives:
|
||||||
|
enabled:
|
||||||
|
- categories
|
||||||
|
- tags
|
||||||
|
layout: 'archive'
|
||||||
|
permalinks:
|
||||||
|
tag: '/tag/:name/'
|
||||||
|
category: '/:name/'
|
||||||
|
|
||||||
|
|
||||||
# jekyll-picture-tag
|
# jekyll-picture-tag
|
||||||
# --------------------
|
# --------------------
|
||||||
|
|||||||
@ -81,7 +81,7 @@
|
|||||||
|
|
||||||
.byline,
|
.byline,
|
||||||
time,
|
time,
|
||||||
.categories
|
.tags
|
||||||
@extend .textcenter
|
@extend .textcenter
|
||||||
|
|
||||||
.byline,
|
.byline,
|
||||||
@ -99,9 +99,19 @@ time
|
|||||||
display: block
|
display: block
|
||||||
color: $text-color-dimmed
|
color: $text-color-dimmed
|
||||||
|
|
||||||
.categories
|
.tags
|
||||||
margin-top: $line-height-computed
|
margin-top: $line-height-computed
|
||||||
|
|
||||||
|
.tag
|
||||||
|
color: $text-color-dimmed
|
||||||
|
margin-right: 5px
|
||||||
|
|
||||||
|
&:before
|
||||||
|
content: '#'
|
||||||
|
color: darken($page-bg, 15%)
|
||||||
|
margin-right: 2px
|
||||||
|
|
||||||
|
|
||||||
.avatar
|
.avatar
|
||||||
width: 80px
|
width: 80px
|
||||||
height: 80px
|
height: 80px
|
||||||
|
|||||||
@ -15,4 +15,10 @@
|
|||||||
<time is="time-ago" class="updated" datetime="{{ page.updated | date_to_xmlschema }}">Updated {{ page.updated | date_to_string }}</time>
|
<time is="time-ago" class="updated" datetime="{{ page.updated | date_to_xmlschema }}">Updated {{ page.updated | date_to_string }}</time>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
<p class="tags">
|
||||||
|
{% for tag in page.tags %}
|
||||||
|
<a class="tag" href="/tag/{{ tag }}">{{ tag }}</a>
|
||||||
|
{% endfor %}
|
||||||
|
</p>
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
29
_src/_layouts/archive.html
Normal file
29
_src/_layouts/archive.html
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
---
|
||||||
|
layout: base
|
||||||
|
---
|
||||||
|
|
||||||
|
<section role="main" id="main" class="row">
|
||||||
|
|
||||||
|
{% if page.type == 'category' %}
|
||||||
|
<h1 class="page-title icon icon-{{ page.title }}">{{ page.title }}</h1>
|
||||||
|
{% else %}
|
||||||
|
<h1 class="page-title">{{ page.type }} archive for {{ page.title }}</h1>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if page.title == 'photos' %}
|
||||||
|
<div class="masonry">
|
||||||
|
<div class="grid-sizer"></div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% for post in page.posts %}
|
||||||
|
{% include articles.html %}
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{% if page.title == 'photos' %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{% include paginator.html %}
|
||||||
@ -1,24 +1,24 @@
|
|||||||
|
|
||||||
{% include head.html %}
|
{% include head.html %}
|
||||||
|
|
||||||
{% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %}
|
{% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %}
|
||||||
|
|
||||||
<body class="page-{{ id }}">
|
<body class="page-{{ id | remove:'-' }}">
|
||||||
|
|
||||||
{% include header.html %}
|
{% include header.html %}
|
||||||
|
|
||||||
<section role="document" class="document container">
|
<section role="document" class="document container">
|
||||||
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="popover container hide">
|
<div class="popover container hide">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="search-results"></div>
|
<div class="search-results"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
{% include footer.html %}
|
{% include footer.html %}
|
||||||
|
|||||||
@ -8,6 +8,8 @@ date: 2008-03-30 19:24:21+00:00
|
|||||||
wordpress_id: 14
|
wordpress_id: 14
|
||||||
categories:
|
categories:
|
||||||
- personal
|
- personal
|
||||||
|
tags:
|
||||||
|
- wordpress
|
||||||
---
|
---
|
||||||
|
|
||||||
A fresh start of my website under the new domain www.kremalicious.com and with [Wordpress](http://www.wordpress.org) under the hood. My former website under [www.jpberlin.de/krema](http://www.jpberlin.de/krema) will no longer be updated and will be deleted soon. I just implemented a few posts from the old weblog.
|
A fresh start of my website under the new domain www.kremalicious.com and with [Wordpress](http://www.wordpress.org) under the hood. My former website under [www.jpberlin.de/krema](http://www.jpberlin.de/krema) will no longer be updated and will be deleted soon. I just implemented a few posts from the old weblog.
|
||||||
|
|||||||
@ -8,6 +8,8 @@ date: 2008-07-01 16:39:02+00:00
|
|||||||
wordpress_id: 80
|
wordpress_id: 80
|
||||||
categories:
|
categories:
|
||||||
- personal
|
- personal
|
||||||
|
tags:
|
||||||
|
- wordpress
|
||||||
---
|
---
|
||||||
|
|
||||||
As you may have noticed, kremalicious.com was a bit screwed in the last week and some of you have asked me via mail and twitter what exactly was wrong. So to satisfy the curious geek in you I will provide some informations about it.
|
As you may have noticed, kremalicious.com was a bit screwed in the last week and some of you have asked me via mail and twitter what exactly was wrong. So to satisfy the curious geek in you I will provide some informations about it.
|
||||||
|
|||||||
@ -8,6 +8,8 @@ date: 2008-07-11 00:20:22+00:00
|
|||||||
wordpress_id: 85
|
wordpress_id: 85
|
||||||
categories:
|
categories:
|
||||||
- personal
|
- personal
|
||||||
|
tags:
|
||||||
|
- wordpress
|
||||||
---
|
---
|
||||||
|
|
||||||
I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets?
|
I'm thrilled to announce that kremalicious.com now uses an iPhone optimized theme. When you browse this website with your iPhone everything will automagically switch to the new kremalicious iPhone theme which is simply called kremalicious{iPhone}. See those hip brackets?
|
||||||
@ -53,20 +55,20 @@ And finally many thanks to [cschock](http://www.cschock.de) for continuously tes
|
|||||||
# Resources for you to do the same and even more
|
# Resources for you to do the same and even more
|
||||||
|
|
||||||
* [iWPhone by ContentRobot](http://iwphone.contentrobot.com/): The plug-in I use for kremalicious.iPhone. It detects an iPhone or iPod Touch and switches to another simple theme. You can easily adjust the plugin to point it to your own theme.
|
* [iWPhone by ContentRobot](http://iwphone.contentrobot.com/): The plug-in I use for kremalicious.iPhone. It detects an iPhone or iPod Touch and switches to another simple theme. You can easily adjust the plugin to point it to your own theme.
|
||||||
|
|
||||||
* [WPTouch - Wordpress iPhonified](http://www.bravenewcode.com/wptouch/): If you don't want to digg into html, css and iPhone specific properties this plug-in will help you. Once activated it automatically switches to an iPhone like theme with lots of eyecandy. You can customize some colors and a lot of different icons all from the Wordpress admin panel
|
* [WPTouch - Wordpress iPhonified](http://www.bravenewcode.com/wptouch/): If you don't want to digg into html, css and iPhone specific properties this plug-in will help you. Once activated it automatically switches to an iPhone like theme with lots of eyecandy. You can customize some colors and a lot of different icons all from the Wordpress admin panel
|
||||||
|
|
||||||
* [Tutorial: Building a website for the iPhone](http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/): Amazing tutorial for changing content based on the orientation of the iPhone or iPod Touch. Just browse their website with your iPhone or iPod Touch to see it in action.
|
* [Tutorial: Building a website for the iPhone](http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/): Amazing tutorial for changing content based on the orientation of the iPhone or iPod Touch. Just browse their website with your iPhone or iPod Touch to see it in action.
|
||||||
|
|
||||||
* [iPhone Native Looking Skin](http://ajaxian.com/archives/iphone-native-looking-skin): Sort of a template based on css and javascript which simulates the iPhone UI. ([Final look](http://joehewitt.com/files/iphone/navigation.html))
|
* [iPhone Native Looking Skin](http://ajaxian.com/archives/iphone-native-looking-skin): Sort of a template based on css and javascript which simulates the iPhone UI. ([Final look](http://joehewitt.com/files/iphone/navigation.html))
|
||||||
|
|
||||||
* [Touching and Gesturing on the iPhone](http://ajaxian.com/archives/iphone-native-looking-skin): Build your websites with some touch gesture features! Here's the javascript code for it.
|
* [Touching and Gesturing on the iPhone](http://ajaxian.com/archives/iphone-native-looking-skin): Build your websites with some touch gesture features! Here's the javascript code for it.
|
||||||
|
|
||||||
|
|
||||||
## THE Apple resources for iPhone & Web Content
|
## THE Apple resources for iPhone & Web Content
|
||||||
|
|
||||||
* [Safari Web Content Guide for iPhone](http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/Introduction/chapter_1_section_1.html)
|
* [Safari Web Content Guide for iPhone](http://developer.apple.com/documentation/AppleApplications/Reference/SafariWebContent/Introduction/chapter_1_section_1.html)
|
||||||
|
|
||||||
* [iPhone Human Interface Guidelines for Web Applications](http://developer.apple.com/documentation/iPhone/Conceptual/iPhoneHIG/Introduction/chapter_1_section_1.html)
|
* [iPhone Human Interface Guidelines for Web Applications](http://developer.apple.com/documentation/iPhone/Conceptual/iPhoneHIG/Introduction/chapter_1_section_1.html)
|
||||||
|
|
||||||
* [iPhone Human Interface Guidelines](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/chapter_1_section_1.html) (free developer account required)
|
* [iPhone Human Interface Guidelines](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/chapter_1_section_1.html) (free developer account required)
|
||||||
|
|||||||
@ -6,10 +6,12 @@ author: Matthias Kretschmann
|
|||||||
|
|
||||||
date: 2008-07-15 14:04:46+00:00
|
date: 2008-07-15 14:04:46+00:00
|
||||||
wordpress_id: 87
|
wordpress_id: 87
|
||||||
|
|
||||||
categories:
|
categories:
|
||||||
- design
|
- design
|
||||||
tags:
|
tags:
|
||||||
- tutorial
|
- tutorial
|
||||||
|
- wordpress
|
||||||
---
|
---
|
||||||
|
|
||||||
Since Wordpress 2.5 it was nearly impossible for me to log into Wordpress and quickly head over to the write tab. The Dashboard always wants to load a bunch of things in it but this always seemed to fail in my setup and slow things down. And not enough the Dashboard just locks everything up while loading which can take more than one minute.
|
Since Wordpress 2.5 it was nearly impossible for me to log into Wordpress and quickly head over to the write tab. The Dashboard always wants to load a bunch of things in it but this always seemed to fail in my setup and slow things down. And not enough the Dashboard just locks everything up while loading which can take more than one minute.
|
||||||
@ -52,23 +54,23 @@ Now just uncomment the lines so it looks like this (every line with two leading
|
|||||||
// require_once (ABSPATH . WPINC . '/rss.php');
|
// require_once (ABSPATH . WPINC . '/rss.php');
|
||||||
@header('Content-Type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));
|
@header('Content-Type: ' . get_option('html_type') . '; charset=' . get_option('blog_charset'));
|
||||||
// switch ( $_GET['jax'] ) {
|
// switch ( $_GET['jax'] ) {
|
||||||
//
|
//
|
||||||
// case 'incominglinks' :
|
// case 'incominglinks' :
|
||||||
// wp_dashboard_incoming_links_output();
|
// wp_dashboard_incoming_links_output();
|
||||||
// break;
|
// break;
|
||||||
//
|
//
|
||||||
// case 'devnews' :
|
// case 'devnews' :
|
||||||
// wp_dashboard_rss_output( 'dashboard_primary' );
|
// wp_dashboard_rss_output( 'dashboard_primary' );
|
||||||
// break;
|
// break;
|
||||||
//
|
//
|
||||||
// case 'planetnews' :
|
// case 'planetnews' :
|
||||||
// wp_dashboard_secondary_output();
|
// wp_dashboard_secondary_output();
|
||||||
// break;
|
// break;
|
||||||
//
|
//
|
||||||
// case 'plugins' :
|
// case 'plugins' :
|
||||||
// wp_dashboard_plugins_output();
|
// wp_dashboard_plugins_output();
|
||||||
// break;
|
// break;
|
||||||
//
|
//
|
||||||
// }
|
// }
|
||||||
?>
|
?>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
@ -76,5 +78,3 @@ Now just uncomment the lines so it looks like this (every line with two leading
|
|||||||
And that's it. Save the file on your server, log in to your Wordpress backend and you should see your Dashboard with everything intact. It just won't search for incoming links and all those other RSS sources anymore.
|
And that's it. Save the file on your server, log in to your Wordpress backend and you should see your Dashboard with everything intact. It just won't search for incoming links and all those other RSS sources anymore.
|
||||||
|
|
||||||
Remember that every update of Wordpress will overwrite this file.
|
Remember that every update of Wordpress will overwrite this file.
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -6,10 +6,12 @@ author: Matthias Kretschmann
|
|||||||
|
|
||||||
date: 2008-12-11 22:59:06+00:00
|
date: 2008-12-11 22:59:06+00:00
|
||||||
wordpress_id: 344
|
wordpress_id: 344
|
||||||
|
|
||||||
categories:
|
categories:
|
||||||
- design
|
- design
|
||||||
tags:
|
tags:
|
||||||
- tutorial
|
- tutorial
|
||||||
|
- wordpress
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
@ -18,14 +20,14 @@ Sure enough I've upgraded immediately when [Wordpress 2.7 was released](http://w
|
|||||||
Before Wordpress 2.7 I achieved a custom gravatar image on kremalicious.com with this code placed in the comments.php template file:
|
Before Wordpress 2.7 I achieved a custom gravatar image on kremalicious.com with this code placed in the comments.php template file:
|
||||||
|
|
||||||
{% highlight php %}
|
{% highlight php %}
|
||||||
<?php
|
<?php
|
||||||
if(function_exists('get_avatar')) {
|
if(function_exists('get_avatar')) {
|
||||||
echo get_avatar(
|
echo get_avatar(
|
||||||
$comment,
|
$comment,
|
||||||
$size = '70',
|
$size = '70',
|
||||||
$default = '<?php bloginfo('template_directory'); ?>/images/gravatar.png'
|
$default = '<?php bloginfo('template_directory'); ?>/images/gravatar.png'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
@ -40,7 +42,7 @@ But we can use the functions.php file in your template directory and add some li
|
|||||||
$avatar_defaults[$myavatar] = 'GRAVATAR NAME DISPLAYED IN WORDPRESS';
|
$avatar_defaults[$myavatar] = 'GRAVATAR NAME DISPLAYED IN WORDPRESS';
|
||||||
return $avatar_defaults;
|
return $avatar_defaults;
|
||||||
}
|
}
|
||||||
add_filter( 'avatar_defaults', 'my_own_gravatar' );
|
add_filter( 'avatar_defaults', 'my_own_gravatar' );
|
||||||
?>
|
?>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
@ -59,4 +61,4 @@ And you can adjust the displayed size of the gravatar image by adding a paramete
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
And that's it. As you would guess I pretty much prefer this way to adjust the gravatar image. But you're free to [write your custom comment callback function](http://clarktech.no-ip.com/wordpress/wordpress-27-comment-callback-function) to exactly define the output of the comments. But it's definitely too much if you just want to change the gravatar stuff.
|
And that's it. As you would guess I pretty much prefer this way to adjust the gravatar image. But you're free to [write your custom comment callback function](http://clarktech.no-ip.com/wordpress/wordpress-27-comment-callback-function) to exactly define the output of the comments. But it's definitely too much if you just want to change the gravatar stuff.
|
||||||
|
|||||||
@ -6,10 +6,12 @@ author: Matthias Kretschmann
|
|||||||
|
|
||||||
date: 2008-12-13 16:47:43+00:00
|
date: 2008-12-13 16:47:43+00:00
|
||||||
wordpress_id: 360
|
wordpress_id: 360
|
||||||
|
|
||||||
categories:
|
categories:
|
||||||
- design
|
- design
|
||||||
tags:
|
tags:
|
||||||
- tutorial
|
- tutorial
|
||||||
|
- wordpress
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
@ -19,23 +21,23 @@ Let's start by looking at the code to achieve styling of author comments prior t
|
|||||||
|
|
||||||
{% highlight php %}
|
{% highlight php %}
|
||||||
<li class="
|
<li class="
|
||||||
<?php
|
<?php
|
||||||
if ($comment->comment_author_url == "http://www.kremalicious.com")
|
if ($comment->comment_author_url == "http://www.kremalicious.com")
|
||||||
echo 'author';
|
echo 'author';
|
||||||
else echo $oddcomment;
|
else echo $oddcomment;
|
||||||
?>
|
?>
|
||||||
item" id="comment-<?php comment_ID() ?>">
|
item" id="comment-<?php comment_ID() ?>">
|
||||||
<em>other comments code</em>
|
<em>other comments code</em>
|
||||||
</li>
|
</li>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
So with some php stuff we were able to check for the author name or, as I did it, for the URL of the comment author. If one of these were detected Wordpress added a new class 'author' to the `<li>` tag which we were able to style by adding a li.author to our css file:
|
So with some php stuff we were able to check for the author name or, as I did it, for the URL of the comment author. If one of these were detected Wordpress added a new class 'author' to the `<li>` tag which we were able to style by adding a li.author to our css file:
|
||||||
|
|
||||||
{% highlight css %}li.author { css comes in here }{% endhighlight %}
|
{% highlight css %}li.author { css comes in here }{% endhighlight %}
|
||||||
|
|
||||||
But with Wordpress 2.7 these steps are needless because of the [new function `<?php wp_list_comments(); ?>`](http://codex.wordpress.org/Template_Tags/wp_list_comments) which adds a class on author comments for itself!
|
But with Wordpress 2.7 these steps are needless because of the [new function `<?php wp_list_comments(); ?>`](http://codex.wordpress.org/Template_Tags/wp_list_comments) which adds a class on author comments for itself!
|
||||||
|
|
||||||
If a comment from the author of an article is posted under this article, **Wordpress automatically adds the class 'bypostauthor' to the surrounding `<li>` tag.** So all you have to do is adding a css style of `li.bypostauthor` to your css file or just renaming your old `li.author` class or whatever you used for this:
|
If a comment from the author of an article is posted under this article, **Wordpress automatically adds the class 'bypostauthor' to the surrounding `<li>` tag.** So all you have to do is adding a css style of `li.bypostauthor` to your css file or just renaming your old `li.author` class or whatever you used for this:
|
||||||
|
|
||||||
{% highlight css %}li.bypostauthor { css comes in here }{% endhighlight %}
|
{% highlight css %}li.bypostauthor { css comes in here }{% endhighlight %}
|
||||||
|
|
||||||
@ -47,4 +49,4 @@ Wordpress also has a special class for registered users of your site so you're a
|
|||||||
|
|
||||||
{% highlight css %}li.byuser { css comes in here }{% endhighlight %}
|
{% highlight css %}li.byuser { css comes in here }{% endhighlight %}
|
||||||
|
|
||||||
All the various classes Wordpress adds to comments are listed [in the Codex page for enhanced comments display](http://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#CSS_Styling). And [here's a very nice grahical overview about everything Wordpress 2.7 adds to comments](http://www.wp-fun.co.uk/2008/12/10/27-comment-classes/).
|
All the various classes Wordpress adds to comments are listed [in the Codex page for enhanced comments display](http://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#CSS_Styling). And [here's a very nice grahical overview about everything Wordpress 2.7 adds to comments](http://www.wp-fun.co.uk/2008/12/10/27-comment-classes/).
|
||||||
|
|||||||
@ -7,10 +7,12 @@ author: Matthias Kretschmann
|
|||||||
|
|
||||||
date: 2009-03-29 23:12:15+00:00
|
date: 2009-03-29 23:12:15+00:00
|
||||||
wordpress_id: 576
|
wordpress_id: 576
|
||||||
|
|
||||||
categories:
|
categories:
|
||||||
- design
|
- design
|
||||||
tags:
|
tags:
|
||||||
- tutorial
|
- tutorial
|
||||||
|
- wordpress
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
@ -677,4 +679,4 @@ If you ever wanted or had to include such sharing links manually in your sites a
|
|||||||
|
|
||||||
And that's it. If you think there should be another site added feel free to post them in the comments or shoot me a note [via my contact form](http://www.kremalicious.com/about/contact). Also possible errors or any additions are much appreciated. If useful I will add your additions or more site links to the codaclips files and will update the article.
|
And that's it. If you think there should be another site added feel free to post them in the comments or shoot me a note [via my contact form](http://www.kremalicious.com/about/contact). Also possible errors or any additions are much appreciated. If useful I will add your additions or more site links to the codaclips files and will update the article.
|
||||||
|
|
||||||
Also I would like to provide these links as [Espresso](http://macrabbit.com/espresso/) snippets probably as part of the HTML-(or PHP?)-Sugar but this seems to be rather complicated at the moment. As soon as this becomes more straightforward I will add these to this article. But if you're already advanced in creating Espresso sugars and would like to help me with this [please contact me!](http://www.kremalicious.com/about/contact)
|
Also I would like to provide these links as [Espresso](http://macrabbit.com/espresso/) snippets probably as part of the HTML-(or PHP?)-Sugar but this seems to be rather complicated at the moment. As soon as this becomes more straightforward I will add these to this article. But if you're already advanced in creating Espresso sugars and would like to help me with this [please contact me!](http://www.kremalicious.com/about/contact)
|
||||||
|
|||||||
@ -6,10 +6,12 @@ author: Matthias Kretschmann
|
|||||||
|
|
||||||
date: 2009-12-17 04:00:21+00:00
|
date: 2009-12-17 04:00:21+00:00
|
||||||
wordpress_id: 959
|
wordpress_id: 959
|
||||||
|
|
||||||
categories:
|
categories:
|
||||||
- design
|
- design
|
||||||
tags:
|
tags:
|
||||||
- tutorial
|
- tutorial
|
||||||
|
- wordpress
|
||||||
---
|
---
|
||||||
|
|
||||||
WordPress 2.9 added a new feature which allows you to assign an image to an article to make it the post image like it's often used in magazine style themes. This new feature along with a new template tag makes all the custom field hacks usually used for this functionality in the past obsolete. So here's a quick walkthrough to make use of the new post thumbnail feature and of course how to make it backwards compatible.
|
WordPress 2.9 added a new feature which allows you to assign an image to an article to make it the post image like it's often used in magazine style themes. This new feature along with a new template tag makes all the custom field hacks usually used for this functionality in the past obsolete. So here's a quick walkthrough to make use of the new post thumbnail feature and of course how to make it backwards compatible.
|
||||||
@ -21,8 +23,8 @@ tags:
|
|||||||
So just open up your theme's _functions.php_ file in your favorite editor or create it if there's no such file in your theme folder. Add this little code snippet to this file:
|
So just open up your theme's _functions.php_ file in your favorite editor or create it if there's no such file in your theme folder. Add this little code snippet to this file:
|
||||||
|
|
||||||
{% highlight php %}
|
{% highlight php %}
|
||||||
<?php
|
<?php
|
||||||
add_theme_support('post-thumbnails');
|
add_theme_support('post-thumbnails');
|
||||||
?>
|
?>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
@ -30,7 +32,7 @@ For backwards compatibility you should wrap this inside a function check for the
|
|||||||
|
|
||||||
{% highlight php %}
|
{% highlight php %}
|
||||||
<?php
|
<?php
|
||||||
if ( function_exists( 'add_theme_support' ) )
|
if ( function_exists( 'add_theme_support' ) )
|
||||||
add_theme_support( 'post-thumbnails' );
|
add_theme_support( 'post-thumbnails' );
|
||||||
?>
|
?>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
@ -62,9 +64,9 @@ This template tag will display the thumbnail sized post thumbnail by default and
|
|||||||
|
|
||||||
But of course you can grab the other sizes WordPress automatically creates when you upload an image:
|
But of course you can grab the other sizes WordPress automatically creates when you upload an image:
|
||||||
|
|
||||||
{% highlight php %}<?php
|
{% highlight php %}<?php
|
||||||
the_post_thumbnail('medium');
|
the_post_thumbnail('medium');
|
||||||
the_post_thumbnail('large');
|
the_post_thumbnail('large');
|
||||||
?>{% endhighlight %}
|
?>{% endhighlight %}
|
||||||
_(Note: Matt [left a comment on WP Engineer](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/#comment-3053) stating he wouldn't recommend using these named arguments but provided no explanation for it yet.)_
|
_(Note: Matt [left a comment on WP Engineer](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/#comment-3053) stating he wouldn't recommend using these named arguments but provided no explanation for it yet.)_
|
||||||
|
|
||||||
@ -100,21 +102,21 @@ As for the title attribute this will be grabbed automatically from the entry you
|
|||||||
|
|
||||||
Finally if you want to respect the custom sizes you or your users have set under Settings > Media you can first grab those sizes with [get_option function](http://codex.wordpress.org/Function_Reference/get_option) and then put it in the array:
|
Finally if you want to respect the custom sizes you or your users have set under Settings > Media you can first grab those sizes with [get_option function](http://codex.wordpress.org/Function_Reference/get_option) and then put it in the array:
|
||||||
|
|
||||||
{% highlight php %}<?php
|
{% highlight php %}<?php
|
||||||
$width = get_option('thumbnail_size_w'); // get the width of the thumbnail setting
|
$width = get_option('thumbnail_size_w'); // get the width of the thumbnail setting
|
||||||
$height = get_option('thumbnail_size_h'); // get the height of the thumbnail setting
|
$height = get_option('thumbnail_size_h'); // get the height of the thumbnail setting
|
||||||
|
|
||||||
the_post_thumbnail(array($width, $height), array('class' => 'alignleft'));
|
the_post_thumbnail(array($width, $height), array('class' => 'alignleft'));
|
||||||
?>{% endhighlight %}
|
?>{% endhighlight %}
|
||||||
|
|
||||||
You can also detect the Media settings for the other sizes and whether the crop setting is active or not:
|
You can also detect the Media settings for the other sizes and whether the crop setting is active or not:
|
||||||
|
|
||||||
{% highlight php %}<?php
|
{% highlight php %}<?php
|
||||||
get_option('medium_size_w'); // Width of the medium size
|
get_option('medium_size_w'); // Width of the medium size
|
||||||
get_option('medium_size_h'); // Height of the medium size
|
get_option('medium_size_h'); // Height of the medium size
|
||||||
get_option('large_size_w'); // Width of the large size
|
get_option('large_size_w'); // Width of the large size
|
||||||
get_option('large_size_h'); // Height of the large size
|
get_option('large_size_h'); // Height of the large size
|
||||||
get_option('thumbnail_crop'); // Check for crop, On=1, Off=0
|
get_option('thumbnail_crop'); // Check for crop, On=1, Off=0
|
||||||
?>{% endhighlight %}
|
?>{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
@ -126,11 +128,11 @@ With the check in your functions.php at the beginning there's already ensured ol
|
|||||||
|
|
||||||
So it's a pretty good idea to make this backwards compatible with some quick if else voodoo, code shamelessly [adapted from WP-Recipes](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility):
|
So it's a pretty good idea to make this backwards compatible with some quick if else voodoo, code shamelessly [adapted from WP-Recipes](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility):
|
||||||
|
|
||||||
{% highlight php %}if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) {
|
{% highlight php %}if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) {
|
||||||
the_post_thumbnail();
|
the_post_thumbnail();
|
||||||
} else {
|
} else {
|
||||||
$postimage = get_post_meta($post->ID, 'post-image', true);
|
$postimage = get_post_meta($post->ID, 'post-image', true);
|
||||||
if ($postimage) {
|
if ($postimage) {
|
||||||
echo '<img src="'.$postimage.'" alt="" />';
|
echo '<img src="'.$postimage.'" alt="" />';
|
||||||
}
|
}
|
||||||
}{% endhighlight %}
|
}{% endhighlight %}
|
||||||
@ -144,22 +146,22 @@ This first checks if the feature exists and if a post thumbnail was addd with th
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
* WP Engineer: [About WordPress Post Thumbnail](http://wpengineer.com/about-wordpress-post-thumbnail/)
|
* WP Engineer: [About WordPress Post Thumbnail](http://wpengineer.com/about-wordpress-post-thumbnail/)
|
||||||
|
|
||||||
|
|
||||||
* WP Engineer: [The Ultimative Guide For the_post_thumbnail In WordPress 2.9](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/)
|
* WP Engineer: [The Ultimative Guide For the_post_thumbnail In WordPress 2.9](http://wpengineer.com/the-ultimative-guide-for-the_post_thumbnail-in-wordpress-2-9/)
|
||||||
|
|
||||||
|
|
||||||
* WP Recipes: [WordPress 2.9 : Display post image with backward compatibility](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility)
|
* WP Recipes: [WordPress 2.9 : Display post image with backward compatibility](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility)
|
||||||
|
|
||||||
|
|
||||||
* Justin Tadlock: [Everything you need to know about WordPress 2.9’s post image feature](http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature)
|
* Justin Tadlock: [Everything you need to know about WordPress 2.9’s post image feature](http://justintadlock.com/archives/2009/11/16/everything-you-need-to-know-about-wordpress-2-9s-post-image-feature)
|
||||||
|
|
||||||
|
|
||||||
* Chris Harrison: [Post Thumbnails in RSS Feeds](http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/)
|
* Chris Harrison: [Post Thumbnails in RSS Feeds](http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/)
|
||||||
|
|
||||||
|
|
||||||
* Technosailor: [10 Things You Need to Know About WordPress 2.9](http://technosailor.com/2009/11/11/10-things-you-need-to-know-about-wordpress-2-9/)
|
* Technosailor: [10 Things You Need to Know About WordPress 2.9](http://technosailor.com/2009/11/11/10-things-you-need-to-know-about-wordpress-2-9/)
|
||||||
|
|
||||||
|
|
||||||
@ -182,5 +184,3 @@ As always: before making your next coffee you should share this article on your
|
|||||||
12/20/2009 function check for add_theme_support at the beginning
|
12/20/2009 function check for add_theme_support at the beginning
|
||||||
12/20/2009 corrected the size array code under Custom Output
|
12/20/2009 corrected the size array code under Custom Output
|
||||||
12/17/2009 Added some code examples to respect the media settings
|
12/17/2009 Added some code examples to respect the media settings
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -9,8 +9,11 @@ featured: true
|
|||||||
|
|
||||||
date: 2011-12-15 07:56:46+00:00
|
date: 2011-12-15 07:56:46+00:00
|
||||||
wordpress_id: 1468
|
wordpress_id: 1468
|
||||||
|
|
||||||
categories:
|
categories:
|
||||||
- goodies
|
- goodies
|
||||||
|
tags:
|
||||||
|
- wordpress
|
||||||
---
|
---
|
||||||
|
|
||||||
Made a quick WordPress plugin which transforms the standard WordPress update & comment notification badges into iOS-styled ones.
|
Made a quick WordPress plugin which transforms the standard WordPress update & comment notification badges into iOS-styled ones.
|
||||||
@ -96,4 +99,3 @@ If you find any problems you can [open an issue on GitHub](https://github.com/kr
|
|||||||
**v0.1**
|
**v0.1**
|
||||||
|
|
||||||
* initial alpha release
|
* initial alpha release
|
||||||
|
|
||||||
|
|||||||
@ -6,8 +6,11 @@ layout: post
|
|||||||
slug: android-tab-conundrum
|
slug: android-tab-conundrum
|
||||||
title: The Android Tab Bar Conundrum. Again.
|
title: The Android Tab Bar Conundrum. Again.
|
||||||
wordpress_id: 1556
|
wordpress_id: 1556
|
||||||
|
|
||||||
categories:
|
categories:
|
||||||
- design
|
- design
|
||||||
|
tags:
|
||||||
|
- android
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -7,8 +7,11 @@ author: Matthias Kretschmann
|
|||||||
|
|
||||||
date: 2012-05-14 19:33:22+00:00
|
date: 2012-05-14 19:33:22+00:00
|
||||||
wordpress_id: 1920
|
wordpress_id: 1920
|
||||||
|
|
||||||
categories:
|
categories:
|
||||||
- personal
|
- personal
|
||||||
|
tags:
|
||||||
|
- wordpress
|
||||||
---
|
---
|
||||||
|
|
||||||
It finally happened. After so many rejected revisions, so many pauses, so much coffee: kremalicious2 is here.
|
It finally happened. After so many rejected revisions, so many pauses, so much coffee: kremalicious2 is here.
|
||||||
|
|||||||
@ -7,13 +7,14 @@ author: Matthias Kretschmann
|
|||||||
|
|
||||||
date: 2012-05-15 16:00:44+00:00
|
date: 2012-05-15 16:00:44+00:00
|
||||||
wordpress_id: 2043
|
wordpress_id: 2043
|
||||||
|
|
||||||
categories:
|
categories:
|
||||||
- design
|
- design
|
||||||
- goodies
|
- goodies
|
||||||
tags:
|
tags:
|
||||||
- boilerplate
|
- boilerplate
|
||||||
- tutorial
|
- tutorial
|
||||||
- wordpress
|
- wordpress
|
||||||
---
|
---
|
||||||
|
|
||||||
Here’s a template for designing your own icons for the admin area of WordPress including icons ready for Retina screens and some recommendations for the workflow of implementing these.
|
Here’s a template for designing your own icons for the admin area of WordPress including icons ready for Retina screens and some recommendations for the workflow of implementing these.
|
||||||
@ -214,4 +215,4 @@ But if you’re super cool and want to catch some karma you place a link back to
|
|||||||
|
|
||||||
If you need some inspiration for nicely consistent icons you should check out [these great admin icons from Laura Kalbag](http://laurakalbag.com/wordpress-admin-icons/).
|
If you need some inspiration for nicely consistent icons you should check out [these great admin icons from Laura Kalbag](http://laurakalbag.com/wordpress-admin-icons/).
|
||||||
|
|
||||||
And Julien Chaumond wrote a great piece, in his own words "less about the sizes, more about the style". It's a must-read: [How to design a good native-looking WordPress Admin icon](http://julien-c.fr/2012/07/wordpress-admin-icons/)
|
And Julien Chaumond wrote a great piece, in his own words "less about the sizes, more about the style". It's a must-read: [How to design a good native-looking WordPress Admin icon](http://julien-c.fr/2012/07/wordpress-admin-icons/)
|
||||||
|
|||||||
@ -6,13 +6,14 @@ author: Matthias Kretschmann
|
|||||||
|
|
||||||
date: 2012-06-13 19:01:20+00:00
|
date: 2012-06-13 19:01:20+00:00
|
||||||
wordpress_id: 2195
|
wordpress_id: 2195
|
||||||
|
|
||||||
categories:
|
categories:
|
||||||
- design
|
- design
|
||||||
tags:
|
tags:
|
||||||
- wordpress
|
- wordpress
|
||||||
---
|
---
|
||||||
|
|
||||||
Apart from a nicely responsive admin area, WordPress 3.4 now [includes retina assets](http://core.trac.wordpress.org/ticket/20293) for all the icons in the admin area to make them look crisp on devices with high-dpi screens like the iPhone or iPad 3, most flagship Android devices and of course the new ÜberMacBookPro.
|
Apart from a nicely responsive admin area, WordPress 3.4 now [includes retina assets](http://core.trac.wordpress.org/ticket/20293) for all the icons in the admin area to make them look crisp on devices with high-dpi screens like the iPhone or iPad 3, most flagship Android devices and of course the new ÜberMacBookPro.
|
||||||
|
|
||||||
And it looks gorgeous. Here's a detail screenshot of the admin area in 3.4 in full scale, taken on the iPad 3:
|
And it looks gorgeous. Here's a detail screenshot of the admin area in 3.4 in full scale, taken on the iPad 3:
|
||||||
|
|
||||||
@ -22,7 +23,7 @@ And it looks gorgeous. Here's a detail screenshot of the admin area in 3.4 in fu
|
|||||||
|
|
||||||
So if you're a plugin developer you absolutely want to make sure to include retina assets for your plugin, like a double sized admin menu icon.
|
So if you're a plugin developer you absolutely want to make sure to include retina assets for your plugin, like a double sized admin menu icon.
|
||||||
|
|
||||||
There's just one problem: WordPress doesn't include anything to make this easy for developers. The functions `register_post_type()` and `add_menu_page()` only allow you to define one image as menu icon which then gets inserted as `img` tag.
|
There's just one problem: WordPress doesn't include anything to make this easy for developers. The functions `register_post_type()` and `add_menu_page()` only allow you to define one image as menu icon which then gets inserted as `img` tag.
|
||||||
|
|
||||||
[](/wp-icons-template/)If you want to include retina assets, you have to do it via CSS and media queries. Have a look at the code examples in my [WordPress icons template post](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved.
|
[](/wp-icons-template/)If you want to include retina assets, you have to do it via CSS and media queries. Have a look at the code examples in my [WordPress icons template post](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved.
|
||||||
|
|
||||||
|
|||||||
@ -1,21 +0,0 @@
|
|||||||
---
|
|
||||||
layout: base
|
|
||||||
title: Design
|
|
||||||
description: All the design related articles, mostly about web/ui design & front-end development
|
|
||||||
category: design
|
|
||||||
redirect_from:
|
|
||||||
- /topics/design-articles/
|
|
||||||
- /design-articles/
|
|
||||||
---
|
|
||||||
|
|
||||||
<section role="main" id="main" class="row">
|
|
||||||
|
|
||||||
<h1 class="page-title icon icon-{{ page.category }}">{{ page.category }}</h1>
|
|
||||||
|
|
||||||
{% for post in site.categories.design %}
|
|
||||||
{% include articles.html %}
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% include paginator.html %}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
---
|
|
||||||
layout: base
|
|
||||||
title: Goodies
|
|
||||||
description: All the goodies I've released for you to download. Those are all free for your personal use only, licensed under CC BY NC SA 3.0. Please contact me if you want to use them commercially.
|
|
||||||
category: goodies
|
|
||||||
redirect_from:
|
|
||||||
- /goodies/icon/
|
|
||||||
- /goodies/other/
|
|
||||||
- /goodies/wallpaper/
|
|
||||||
- /topics/goodies/
|
|
||||||
---
|
|
||||||
|
|
||||||
<section role="main" id="main" class="row">
|
|
||||||
|
|
||||||
<h1 class="page-title icon icon-{{ page.category }}">{{ page.category }}</h1>
|
|
||||||
|
|
||||||
{% for post in site.categories.goodies %}
|
|
||||||
{% include articles.html %}
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% include paginator.html %}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
---
|
|
||||||
layout: base
|
|
||||||
title: Personal
|
|
||||||
category: personal
|
|
||||||
---
|
|
||||||
|
|
||||||
<section role="main" id="main" class="row">
|
|
||||||
|
|
||||||
<h1 class="page-title icon icon-{{ page.category }}">{{ page.category }}</h1>
|
|
||||||
|
|
||||||
{% for post in site.categories.personal %}
|
|
||||||
{% include articles.html %}
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% include paginator.html %}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
---
|
|
||||||
layout: base
|
|
||||||
title: Photography
|
|
||||||
category: photography
|
|
||||||
---
|
|
||||||
|
|
||||||
<section role="main" id="main" class="row">
|
|
||||||
|
|
||||||
<h1 class="page-title icon icon-{{ page.category }}">{{ page.category }}</h1>
|
|
||||||
|
|
||||||
{% for post in site.categories.photography %}
|
|
||||||
{% include articles.html %}
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% include paginator.html %}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
---
|
|
||||||
layout: base
|
|
||||||
title: Photos
|
|
||||||
description: My photo posts aggregated from various sources. You can find more of my photography on 500px and Flickr.
|
|
||||||
category: photos
|
|
||||||
---
|
|
||||||
|
|
||||||
<section role="main" id="main" class="row">
|
|
||||||
|
|
||||||
<h1 class="page-title icon icon-photos">photos</h1>
|
|
||||||
|
|
||||||
<div class="masonry">
|
|
||||||
<div class="grid-sizer"></div>
|
|
||||||
|
|
||||||
{% for post in site.categories.photos %}
|
|
||||||
{% include articles.html %}
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% include paginator.html %}
|
|
||||||
@ -5,5 +5,6 @@ User-agent: *
|
|||||||
Disallow: /search/
|
Disallow: /search/
|
||||||
Disallow: /page/
|
Disallow: /page/
|
||||||
Disallow: /*/page/
|
Disallow: /*/page/
|
||||||
|
Disallow: /tag/
|
||||||
|
|
||||||
Sitemap: {{ site.url }}/sitemap.xml
|
Sitemap: {{ site.url }}/sitemap.xml
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user