mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-13 16:45:14 +01:00
port over mixins, base post styling
This commit is contained in:
parent
7a51a4478d
commit
9246bf7ea8
GPG Key ID:
606EEEF3C479A91F
@ -5,7 +5,7 @@ title: Everything Back To Normal On Kremalicious.com (Almost)
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-07-01 16:39:02+00:00
|
||||
|
||||
|
||||
categories:
|
||||
- personal
|
||||
tags:
|
||||
@ -20,14 +20,14 @@ But more problems appeared. The display of the newest and latest posts and the n
|
||||
|
||||
Now it's clear something with my code must be wrong, I thought. For displaying the latest posts in Wordpress I use a pretty standard way which is [described in the Wordpress Codex](http://codex.wordpress.org/Template_Tags/get_posts):
|
||||
|
||||
{% highlight php %}
|
||||
```php
|
||||
<?php $postslist = get_posts('numberposts=5&order=DESC&orderby;=post_date');
|
||||
foreach ($postslist as $post) : setup_postdata($post); ?>
|
||||
<ul>
|
||||
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><span><?php the_date(); ?></span></li>
|
||||
</ul>
|
||||
<?php endforeach; ?>
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
This would get all recent posts sorted by their post_date entry in the (wp_posts) database table and style it as an unordered list with my preferred format. This code worked since the launch of kremalicious.com and I first used it to display the recent blog entries on my start page. But since i didn't change anything in the code this couldn't be caused by wrong code or something.
|
||||
|
||||
@ -39,7 +39,9 @@ This bug affects all versions of MySQL since 5.0.50 and it seems there is no sta
|
||||
|
||||
Thankfully [a commenter](http://wordpress.org/support/topic/185896#post-793417) in the Wordpress forums reminded me of a nice temporary solution to this mess until my host updates MySQL: using wp_get_archives for displaying the recent posts. But this won't let me display the dates anymore:
|
||||
|
||||
{% highlight php %}<?php wp_get_archives('type=postbypost&limit;=5'); ?>{% endhighlight %}
|
||||
```php
|
||||
<?php wp_get_archives('type=postbypost&limit;=5'); ?>
|
||||
```
|
||||
|
||||
Problem temporary solved!
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ title: Enjoy Kremalicious{iPhone}
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-07-11 00:20:22+00:00
|
||||
|
||||
|
||||
categories:
|
||||
- personal
|
||||
tags:
|
||||
@ -26,9 +26,9 @@ While Safari on iPhone will display all websites just fine it can happen that th
|
||||
|
||||
The viewport can be larger or smaller than the visible area but I wanted my content to exactly fit the width of the iPhone and the goal was to make the text legible on first load. So here's what I use for kremalicious{iPhone}:
|
||||
|
||||
{% highlight html %}
|
||||
```html
|
||||
<meta name="Viewport" content="maximum-scale=1.6,width=device-width" >
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
This code will let the user scale the content up to 1.6 times to the default view and the default width of the content is set to the width of the (iPhone) device.
|
||||
|
||||
@ -37,17 +37,17 @@ This code will let the user scale the content up to 1.6 times to the default vie
|
||||
|
||||
There's neither an active nor a hover state for links on the iPhone which makes sense on a touch interface although it would be much easier to just use a:active for the tap highlighting. Safari on the iPhone uses a special webkit property for that:
|
||||
|
||||
{% highlight css %}
|
||||
-webkit-tap-highlight-color: rgba(234,234,234,0.5);
|
||||
{% endhighlight %}
|
||||
```css
|
||||
-webkit-tap-highlight-color: rgba(234,234,234, .5);
|
||||
```
|
||||
|
||||
# Home Screen Icon
|
||||
|
||||
I've used a 147x147px icon so the icon looks crisp and sharp on the iPhone screen (because it's a 160dpi screen). You really should use a bigger size than [Apple's recommendation in their iPhone HIG](https://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/chapter_14_section_2.html). You have to provide a png icon without rounded corners and without the highlight shine since the iPhone will render that automatically on the icon. The icon has to be named apple-touch-icon.png and gets automatically detected when put in the root of your website. Additionally you can tell the iPhone the place where the icon is with this link tag in your head section:
|
||||
|
||||
{% highlight html %}
|
||||
```html
|
||||
<link rel="apple-touch-icon" href="/i/apple-touch-icon.png" />
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
And finally many thanks to [cschock](http://www.cschock.de) for continuously testing my code voodoo soup even at late hours.
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ title: 'Wordpress 2.5+: Get Rid of That Sluggish Dashboard'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-07-15 14:04:46+00:00
|
||||
|
||||
|
||||
|
||||
categories:
|
||||
- design
|
||||
@ -20,7 +20,7 @@ I've searched for a simple way of disabling those feeds, plugins etc. stuff the
|
||||
|
||||
So open your `/wp-admin/index-extra.php` file. It should look like this:
|
||||
|
||||
{% highlight php %}
|
||||
```php
|
||||
<?php
|
||||
require_once('admin.php');
|
||||
require( 'includes/dashboard.php' );
|
||||
@ -41,12 +41,12 @@ So open your `/wp-admin/index-extra.php` file. It should look like this:
|
||||
break;
|
||||
}
|
||||
?>
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
|
||||
Now just uncomment the lines so it looks like this (every line with two leading // is uncommented and therefore inactive):
|
||||
|
||||
{% highlight php %}
|
||||
```php
|
||||
<?php
|
||||
require_once('admin.php');
|
||||
require( 'includes/dashboard.php' );
|
||||
@ -72,7 +72,7 @@ Now just uncomment the lines so it looks like this (every line with two leading
|
||||
//
|
||||
// }
|
||||
?>
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ In MarsEdit main window right-click (or ctrl + click) in the sidebar on the blog
|
||||
Just copy and paste the following HTML and CSS into your Preview Template editor. If something goes wrong with the source formatting, I've also provided [a txt file with the code](../media/marsedit_kremalicious.txt):
|
||||
|
||||
|
||||
{% highlight html %}
|
||||
```html
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
@ -70,7 +70,7 @@ Just copy and paste the following HTML and CSS into your Preview Template editor
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
|
||||
Now click on Save Changes in the lower right corner of the window and there you have it.
|
||||
|
||||
@ -5,7 +5,7 @@ title: 'HowTo: Set A Custom Gravatar Image In Wordpress 2.7+'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-12-11 22:59:06+00:00
|
||||
|
||||
|
||||
|
||||
categories:
|
||||
- design
|
||||
@ -24,7 +24,7 @@ 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:
|
||||
|
||||
{% highlight php %}
|
||||
```php
|
||||
<?php
|
||||
if(function_exists('get_avatar')) {
|
||||
echo get_avatar(
|
||||
@ -34,13 +34,13 @@ Before Wordpress 2.7 I achieved a custom gravatar image on kremalicious.com with
|
||||
);
|
||||
}
|
||||
?>
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
So we were able to set a path to our image we wanted to use as the default gravatar image. But with Wordpress 2.7 we have the new function [`<?php wp_list_comments(); ?>`](http://codex.wordpress.org/Template_Tags/wp_list_comments) which pretty much simplifies writing comment template code. Although it has a parameter for the avatar size it doesn't have one for setting a custom image like before.
|
||||
|
||||
But we can use the functions.php file in your template directory and add some lines to it: (If you don't have a functions.php file just create one.)
|
||||
|
||||
{% highlight php %}
|
||||
```php
|
||||
<?php
|
||||
function my_own_gravatar( $avatar_defaults ) {
|
||||
$myavatar = get_bloginfo('template_directory') . '/images/gravatar.png';
|
||||
@ -49,7 +49,7 @@ But we can use the functions.php file in your template directory and add some li
|
||||
}
|
||||
add_filter( 'avatar_defaults', 'my_own_gravatar' );
|
||||
?>
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -60,9 +60,9 @@ Just set a name for your custom Gravatar image to show up beside the image in th
|
||||
And you can adjust the displayed size of the gravatar image by adding a parameter to `<?php wp_list_comments(); ?>` function in your comments.php file:
|
||||
|
||||
|
||||
{% highlight php %}
|
||||
```php
|
||||
<?php wp_list_comments(array('avatar_size'=>70, )); ?>
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ title: 'HowTo: Styling Author Comments With Wordpress 2.7+'
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2008-12-13 16:47:43+00:00
|
||||
|
||||
|
||||
|
||||
categories:
|
||||
- design
|
||||
@ -21,7 +21,7 @@ Since my update to Wordpress 2.7 I'm pretty much into all the new comments stuff
|
||||
|
||||
Let's start by looking at the code to achieve styling of author comments prior to Wordpress 2.7. On kremalicious.com I've used this code:
|
||||
|
||||
{% highlight php %}
|
||||
```php
|
||||
<li class="
|
||||
<?php
|
||||
if ($comment->comment_author_url == "http://www.kremalicious.com")
|
||||
@ -31,17 +31,21 @@ Let's start by looking at the code to achieve styling of author comments prior t
|
||||
item" id="comment-<?php comment_ID() ?>">
|
||||
<em>other comments code</em>
|
||||
</li>
|
||||
{% 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:
|
||||
|
||||
{% highlight css %}li.author { css comes in here }{% endhighlight %}
|
||||
```css
|
||||
li.author { /* css comes in here */ }
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
{% highlight css %}li.bypostauthor { css comes in here }{% endhighlight %}
|
||||
```css
|
||||
li.bypostauthor { /* css comes in here */ }
|
||||
```
|
||||
|
||||
And that's it for adding a different style to comments from the article author. Just add some css and there you go. Wonderful!
|
||||
|
||||
@ -49,6 +53,8 @@ And that's it for adding a different style to comments from the article author.
|
||||
|
||||
Wordpress also has a special class for registered users of your site so you're able to style their comments as well. For this just use the class 'byuser':
|
||||
|
||||
{% highlight css %}li.byuser { css comes in here }{% endhighlight %}
|
||||
```css
|
||||
li.byuser { /* css comes in here */ }
|
||||
```
|
||||
|
||||
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/).
|
||||
|
||||
@ -6,7 +6,7 @@ download: ../media/share-link-bonanza-coda-clips.zip
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2009-03-29 23:12:15+00:00
|
||||
|
||||
|
||||
|
||||
categories:
|
||||
- design
|
||||
@ -54,7 +54,9 @@ If you download the above Coda Clip files this icon is already applied on the cl
|
||||
|
||||
That's because both collections have their placeholder selection (the ) located where the link text would be:
|
||||
|
||||
{% highlight html %}<a href="" title=""></a>{% endhighlight %}
|
||||
```html
|
||||
<a href="" title=""></a>
|
||||
```
|
||||
|
||||
As you can see I've also included the link title value usually with the name of the specific social site. Also I've already encoded all the entities so there shouldn't be any (X)HTML validation errors when using these links in your projects.
|
||||
|
||||
@ -91,11 +93,15 @@ Anyway, as I've said above some sites allow more to submit here and you'll find
|
||||
|
||||
Just include an img element wrapped inside the link tag, like so:
|
||||
|
||||
{% highlight html %}<a href="http://del.icio.us/post?url=http://YOUR URL&title=YOUR TITLE&notes=YOUR NOTES" title="Save To Delicious"><img src="delicious.png" /> Delicious</a>{% endhighlight %}
|
||||
```html
|
||||
<a href="http://del.icio.us/post?url=http://YOUR URL&title=YOUR TITLE&notes=YOUR NOTES" title="Save To Delicious"><img src="delicious.png" /> Delicious</a>
|
||||
```
|
||||
|
||||
And if you want to just use an icon with no text use just an img element without providing any link text:
|
||||
|
||||
{% highlight html %}<a href="http://del.icio.us/post?url=http://YOUR URL&title=YOUR TITLE&notes=YOUR NOTES" title="Save To Delicious"><img src="delicious.png" /></a>{% endhighlight %}
|
||||
```html
|
||||
<a href="http://del.icio.us/post?url=http://YOUR URL&title=YOUR TITLE&notes=YOUR NOTES" title="Save To Delicious"><img src="delicious.png" /></a>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -105,29 +111,31 @@ And if you want to just use an icon with no text use just an img element without
|
||||
|
||||
To me a more cleaner solution is to use the css background-image property to include the icon images. Just add a class or an id to every share link like so:
|
||||
|
||||
{% highlight html %}<a class="delicious" href="http://del.icio.us/post?url=http://YOUR URL&title=YOUR TITLE&notes=YOUR NOTES" title="Save To Delicious">Delicious</a>{% endhighlight %}
|
||||
```html
|
||||
<a class="delicious" href="http://del.icio.us/post?url=http://YOUR URL&title=YOUR TITLE&notes=YOUR NOTES" title="Save To Delicious">Delicious</a>
|
||||
```
|
||||
|
||||
And in your CSS select this class and style it with a background image. Assuming you want the site icon to appear left beside the link text you would also have to add some padding so the text won't overlap the icons:
|
||||
|
||||
|
||||
{% highlight css %}
|
||||
.delicious {
|
||||
background: url(delicious.png) no-repeat center center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
{% endhighlight %}
|
||||
```css
|
||||
.delicious {
|
||||
background: url(delicious.png) no-repeat center center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
If you want to use just icons and no text you should provide a link text anyway but hide it with css. This is a good practice for accessibility and search engine optimization. Also you would have to provide the dimensions of the icon:
|
||||
|
||||
{% highlight css %}
|
||||
.delicious {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url(delicious.png) no-repeat center center;
|
||||
text-indent: -999999px;
|
||||
}
|
||||
{% endhighlight %}
|
||||
```css
|
||||
.delicious {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url(delicious.png) no-repeat center center;
|
||||
text-indent: -999999px;
|
||||
}
|
||||
```
|
||||
|
||||
## 4. HTML File Download And All The Links Separated
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ title: Using The New Post Thumbnail Feature In WordPress 2.9
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2009-12-17 04:00:21+00:00
|
||||
|
||||
|
||||
|
||||
categories:
|
||||
- design
|
||||
@ -27,20 +27,20 @@ redirect_from:
|
||||
|
||||
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 %}
|
||||
```php
|
||||
<?php
|
||||
add_theme_support('post-thumbnails');
|
||||
?>
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
For backwards compatibility you should wrap this inside a function check for the new `add_theme_support`:
|
||||
|
||||
{% highlight php %}
|
||||
```php
|
||||
<?php
|
||||
if ( function_exists( 'add_theme_support' ) )
|
||||
add_theme_support( 'post-thumbnails' );
|
||||
?>
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
This makes sure WordPress installation prior to 2.9 won't get screwed up when using a theme with this new feature.
|
||||
|
||||
@ -62,17 +62,26 @@ You can close the media dialogue now and you will see the image in the Post Thum
|
||||
|
||||
|
||||
Basically all you have to do is to add this new template tag in your theme files where you want to display the post thumbnail, most certainly in your _index.php_ file:
|
||||
{% highlight php %}<?php the_post_thumbnail(); ?>{% endhighlight %}
|
||||
|
||||
```php
|
||||
<?php the_post_thumbnail(); ?>
|
||||
```
|
||||
|
||||
This template tag will display the thumbnail sized post thumbnail by default and is essentially the same as:
|
||||
|
||||
{% highlight php %}<?php the_post_thumbnail('thumbnail'); ?>{% endhighlight %}
|
||||
```php
|
||||
<?php the_post_thumbnail('thumbnail'); ?>
|
||||
```
|
||||
|
||||
But of course you can grab the other sizes WordPress automatically creates when you upload an image:
|
||||
|
||||
{% highlight php %}<?php
|
||||
```php
|
||||
<?php
|
||||
the_post_thumbnail('medium');
|
||||
the_post_thumbnail('large');
|
||||
?>{% 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.)_
|
||||
|
||||
The code will output a generic `<img />` tag with a class of wp-post-image. Needless to say this is what you can select with css to style just the post thumbnails further:
|
||||
@ -84,21 +93,27 @@ The code will output a generic `<img />` tag with a class of wp-post-image. Need
|
||||
|
||||
If you want to adjust the generated output of the <img /> tag you can do this by using some array stuff. So let's say you want to have the post thumbnails to be 200x200px big and another class assigned to it, you can extend the template tag like so:
|
||||
|
||||
{% highlight php %}<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>{% endhighlight %}
|
||||
```php
|
||||
<?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>
|
||||
```
|
||||
|
||||
If you want to add more than one class you can do this like so:
|
||||
|
||||
{% highlight php %}<?php the_post_thumbnail('medium', array('class' => 'alignleft another_class')); ?>{% endhighlight %}
|
||||
```php
|
||||
<?php the_post_thumbnail('medium', array('class' => 'alignleft another_class')); ?>
|
||||
```
|
||||
|
||||
And you can add any attributes to the `<img />` tag like a `title`, `rel` or an `alt` attribute. For accessibility reasons you should always add at least the alt-attribute:
|
||||
|
||||
{% highlight php %}<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext')); ?>{% endhighlight %}
|
||||
```php
|
||||
<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext')); ?>
|
||||
```
|
||||
|
||||
As for the title attribute this will be grabbed automatically from the entry you've made in your Media Library during the upload process but you even could override this too:
|
||||
|
||||
{% highlight php %}
|
||||
```php
|
||||
<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?>
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -107,22 +122,26 @@ 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:
|
||||
|
||||
{% highlight php %}<?php
|
||||
```php
|
||||
<?php
|
||||
$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
|
||||
|
||||
the_post_thumbnail(array($width, $height), array('class' => 'alignleft'));
|
||||
?>{% endhighlight %}
|
||||
?>
|
||||
```
|
||||
|
||||
You can also detect the Media settings for the other sizes and whether the crop setting is active or not:
|
||||
|
||||
{% highlight php %}<?php
|
||||
```php
|
||||
<?php
|
||||
get_option('medium_size_w'); // Width 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_h'); // Height of the large size
|
||||
get_option('thumbnail_crop'); // Check for crop, On=1, Off=0
|
||||
?>{% endhighlight %}
|
||||
?>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -133,41 +152,38 @@ 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):
|
||||
|
||||
{% highlight php %}if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) {
|
||||
```php
|
||||
if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) {
|
||||
the_post_thumbnail();
|
||||
} else {
|
||||
$postimage = get_post_meta($post->ID, 'post-image', true);
|
||||
if ($postimage) {
|
||||
echo '<img src="'.$postimage.'" alt="" />';
|
||||
}
|
||||
}{% endhighlight %}
|
||||
}
|
||||
```
|
||||
|
||||
This first checks if the feature exists and if a post thumbnail was addd with this new feature. If it was, it simply returns the post thumbnail. If not, it falls back to whatever you've used in your theme before, the usual way is to check for and get the value of a special custom field named e.g. post-image and output it. You can add whatever you've used before inside the else statement. Et voilà, it's nicely backwards compatible now, yay!
|
||||
|
||||
|
||||
## 5. Resources And More Information
|
||||
|
||||
* 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: [About WordPress Post Thumbnail](http://wpengineer.com/about-wordpress-post-thumbnail/)
|
||||
* 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 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/)
|
||||
* 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)
|
||||
|
||||
|
||||
* WP Recipes: [WordPress 2.9 : Display post image with backward compatibility](http://www.wprecipes.com/wordpress-2-9-display-post-image-with-backward-compatibility)
|
||||
* Chris Harrison: [Post Thumbnails in RSS Feeds](http://cdharrison.com/2009/12/the_post_thumbnail-for-rss-feeds/)
|
||||
|
||||
|
||||
* 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/)
|
||||
|
||||
|
||||
* 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/)
|
||||
|
||||
|
||||
Well and that's it. I would love to link to some smart WordPress Codex pages for these new template tags but at the time of this writing there simply isn't anything in the Codex about this.
|
||||
@ -178,13 +194,8 @@ Well and that's it. I would love to link to some smart WordPress Codex pages for
|
||||
|
||||
As always: before making your next coffee you should share this article on your favorite social website. Your vote is highly appreciated! After you've finished voting and making your next coffee or tea you could subscribe to my [RSS-Feed](http://www.kremalicious.com/feed/), discuss this article or buy me my next coffee.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Article Updates
|
||||
|
||||
|
||||
12/20/2009 Added some resources and a note about the named arguments
|
||||
12/20/2009 function check for add_theme_support at the beginning
|
||||
12/20/2009 corrected the size array code under Custom Output
|
||||
|
||||
@ -6,7 +6,7 @@ image: ../media/kremalicious-Teaser-WP-Icon-Template.png
|
||||
author: Matthias Kretschmann
|
||||
|
||||
date: 2012-05-15 16:00:44+00:00
|
||||
|
||||
|
||||
|
||||
categories:
|
||||
- design
|
||||
@ -70,8 +70,8 @@ You can always refer to the inline commented versions of these snippets in the [
|
||||
|
||||
WordPress automatically puts an ID around your new menu item which contains the name of your custom post type (the $post_type parameter in `register_post_type()`). Just change this to your own post type name:
|
||||
|
||||
{% highlight php %}
|
||||
|
||||
```php
|
||||
<?php
|
||||
/**
|
||||
* Custom Post Type Icon for Admin Menu & Post Screen
|
||||
@ -118,15 +118,16 @@ function custom_post_type_icon() {
|
||||
<?php }
|
||||
|
||||
?>
|
||||
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
### Plugin And Theme Options Icons
|
||||
|
||||
The easiest way is to just use this markup on your option page before the page heading which is the default on all admin pages:
|
||||
|
||||
{% highlight html %}<div id="PLUGINNAME" class="icon32"></div>
|
||||
<h2>My cool option page</h2>{% endhighlight %}
|
||||
```html
|
||||
<div id="PLUGINNAME" class="icon32"></div>
|
||||
<h2>My cool option page</h2>
|
||||
```
|
||||
|
||||
This is the markup being addressed in the snippet block for option page icons. The `icon32` class will make sure everything is aligned consistent to all other pages without redefining everything in css.
|
||||
|
||||
@ -136,8 +137,7 @@ Putting your plugin or option page in the top level of the admin menu via `add_m
|
||||
|
||||
So all this combined leads to this snippet:
|
||||
|
||||
{% highlight php %}
|
||||
|
||||
```php
|
||||
<?php
|
||||
|
||||
/**
|
||||
@ -196,8 +196,7 @@ function option_page_icon() {
|
||||
<?php }
|
||||
|
||||
?>
|
||||
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
Just replace the bits in the ID selectors with your stuff. If you have problems finding the correct ID selector just inspect element in the admin area.
|
||||
|
||||
|
||||
@ -28,10 +28,10 @@ While the size is the same as for the iPad 3 homescreen icon, I strongly suggest
|
||||
|
||||
As an example, I just [pushed](https://github.com/kremalicious/kremalicious2/commit/4c7e215f4abecde4385028767b633be1278f277e) the Metro [tile image](/metro-tile.png) for kremalicious.com with those `meta` tags:
|
||||
|
||||
{% highlight html %}
|
||||
```html
|
||||
<meta name="msapplication-TileImage" content="/metro-tile.png"/>
|
||||
<meta name="msapplication-TileColor" content="#015565"/>
|
||||
{% endhighlight %}
|
||||
```
|
||||
|
||||
When browsing the site in Windows 8/Internet Explorer 10, users have the choice of pinning it to the start screen:
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
layout: post
|
||||
|
||||
title: Using <kbd> for fun and profit
|
||||
title: Using <kbd> for fun and profit
|
||||
image: ../media/kremalicious-kbdfun-teaser.png
|
||||
style: post-kbd.min.css
|
||||
author: Matthias Kretschmann
|
||||
@ -43,8 +43,10 @@ Just drop in the `kbdftw.css` in your `head`:
|
||||
|
||||
If you want to use the Android key style, include roboto.css before:
|
||||
|
||||
{% highlight html %}<link rel="stylesheet" href="roboto.css">
|
||||
<link rel="stylesheet" href="kbdfun.css">{% endhighlight %}
|
||||
```html
|
||||
<link rel="stylesheet" href="roboto.css">
|
||||
<link rel="stylesheet" href="kbdfun.css">
|
||||
```
|
||||
|
||||
You also need to add all the Roboto font files from assets/fonts to your project.
|
||||
|
||||
@ -58,21 +60,39 @@ For the Android style, there's `roboto.less` as include at the end. But the font
|
||||
|
||||
The default styling are light keys with Lucida Grande as font:
|
||||
|
||||
{% highlight html %}<kbd>Q</kbd>{% endhighlight %} becomes <kbd>Q</kbd>
|
||||
```html
|
||||
<kbd>Q</kbd>
|
||||
```
|
||||
becomes <kbd>Q</kbd>
|
||||
|
||||
Add a dark class to get the dark keys:
|
||||
|
||||
{% highlight html %}<kbd class="dark">Q</kbd>{% endhighlight %} becomes <kbd class="dark">Q</kbd>
|
||||
```html
|
||||
<kbd class="dark">Q</kbd>
|
||||
```
|
||||
becomes <kbd class="dark">Q</kbd>
|
||||
|
||||
Adding an ios or android class gives a replica of those system keys. Android uses three different colors on the default keyboard.
|
||||
|
||||
{% highlight html %}<kbd class="ios">Q</kbd>{% endhighlight %} becomes <kbd class="ios">Q</kbd>
|
||||
```html
|
||||
<kbd class="ios">Q</kbd>
|
||||
```
|
||||
becomes <kbd class="ios">Q</kbd>
|
||||
|
||||
{% highlight html %}<kbd class="android">Q</kbd>{% endhighlight %} becomes <kbd class="android">Q</kbd>
|
||||
```html
|
||||
<kbd class="android">Q</kbd>
|
||||
```
|
||||
becomes <kbd class="android">Q</kbd>
|
||||
|
||||
{% highlight html %}<kbd class="android dark">Q</kbd>{% endhighlight %} becomes <kbd class="android dark">Q</kbd>
|
||||
```html
|
||||
<kbd class="android dark">Q</kbd>
|
||||
```
|
||||
becomes <kbd class="android dark">Q</kbd>
|
||||
|
||||
{% highlight html %}<kbd class="android color">Q</kbd>{% endhighlight %} becomes <kbd class="android color">Q</kbd>
|
||||
```html
|
||||
<kbd class="android color">Q</kbd>
|
||||
```
|
||||
becomes <kbd class="android color">Q</kbd>
|
||||
|
||||
I've let the default `display: inline` intact so all padding on the `kbd` elements won't affect the line-height of the surrounding text. This leads to problems when you want to use them over multiple lines so just make them `display: inline-block` in this scenario.
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ exports.createPages = ({ graphql, actions }) => {
|
||||
const { createPage } = actions
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const postTemplate = path.resolve('src/templates/post.jsx')
|
||||
const postTemplate = path.resolve('src/templates/Post.jsx')
|
||||
// const indexTemplate = path.resolve('src/templates/index.jsx')
|
||||
// const tagPage = path.resolve('src/templates/tag.jsx')
|
||||
// const categoryPage = path.resolve('src/templates/category.jsx')
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@import 'variables';
|
||||
|
||||
.screen {
|
||||
width: 100%;
|
||||
max-width: 38rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
207
src/styles/_mixins.scss
Normal file
207
src/styles/_mixins.scss
Normal file
@ -0,0 +1,207 @@
|
||||
@import 'variables';
|
||||
|
||||
// Centering Blocks
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin aligncenter() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Toggling content
|
||||
/////////////////////////////////////
|
||||
|
||||
// Hide from both screenreaders and browsers: h5bp.com/u
|
||||
@mixin hide() {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@mixin show() {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// Hide only visually, but have it available for screenreaders: h5bp.com/v
|
||||
@mixin visuallyhidden() {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
|
||||
// Extends the .visuallyhidden class to allow the
|
||||
// element to be focusable when navigated to via the keyboard: h5bp.com/p
|
||||
&.focusable:active,
|
||||
&.focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide visually and from screenreaders, but maintain layout
|
||||
@mixin invisible() {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// CSS image replacement
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin hide-text() {
|
||||
font: 0/0 a; // stylelint-disable font-family-no-missing-generic-family-keyword
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Text overflow
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin ellipsis($width) {
|
||||
width: $width;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Default transition
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin transition() {
|
||||
transition: all ease-in-out .15s;
|
||||
}
|
||||
|
||||
// Dashed Dividers
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin divider() {
|
||||
position: relative;
|
||||
border-bottom: 1px dashed #afc3cb;
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
bottom: -2px;
|
||||
width: 100%;
|
||||
border-bottom: 1px dashed #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Heading band
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin heading-band() {
|
||||
display: inline-block;
|
||||
clear: both;
|
||||
background: rgba(255, 255, 255, .5);
|
||||
padding: ($spacer/2) $spacer ($spacer/2) 100%;
|
||||
margin-left: -100%;
|
||||
}
|
||||
|
||||
// Lead paragraph
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin lead() {
|
||||
font-size: $font-size-large;
|
||||
line-height: $spacer * 1.15;
|
||||
}
|
||||
|
||||
// Layout breakout
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin breakoutviewport() {
|
||||
margin-left: calc(-50vw + 50%);
|
||||
margin-right: calc(-50vw + 50%);
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
@include breakoutviewport--base();
|
||||
}
|
||||
}
|
||||
|
||||
@mixin breakoutviewport--base() {
|
||||
margin-left: -($spacer * 4);
|
||||
margin-right: -($spacer * 4);
|
||||
}
|
||||
|
||||
@mixin breakoutviewport--full() {
|
||||
margin-left: calc(-50vw + 50%);
|
||||
margin-right: calc(-50vw + 50%);
|
||||
}
|
||||
|
||||
// Button sizing
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin button-size(
|
||||
$padding-vertical,
|
||||
$padding-horizontal,
|
||||
$font-size,
|
||||
$line-height,
|
||||
$border-radius
|
||||
) {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// Form control sizing
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin input-size(
|
||||
$padding-vertical,
|
||||
$padding-horizontal,
|
||||
$font-size,
|
||||
$line-height,
|
||||
$border-radius
|
||||
) {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&input[type='search'] {
|
||||
background-size: $font-size;
|
||||
background-position: $padding-vertical center;
|
||||
padding-left: ($padding-vertical * 4);
|
||||
}
|
||||
|
||||
&select {
|
||||
line-height: $input-height;
|
||||
}
|
||||
|
||||
&textarea,
|
||||
&select[multiple] {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin placeholder($color: $input-color-placeholder) {
|
||||
&::-moz-placeholder {
|
||||
color: $color;
|
||||
opacity: 1; // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
@ -68,6 +68,13 @@ $line-height-headings: 1.1;
|
||||
$color-headings: $brand-main;
|
||||
$color-headings--dark: $brand-main-light;
|
||||
|
||||
// Spacing
|
||||
/////////////////////////////////////
|
||||
|
||||
$spacer: ($font-size-base * $line-height);
|
||||
|
||||
$border-radius: 3px;
|
||||
|
||||
// Code
|
||||
/////////////////////////////////////
|
||||
|
||||
@ -76,13 +83,6 @@ $code-color: $brand-light;
|
||||
$kbd-bg: $code-bg;
|
||||
$kbd-color: $code-color;
|
||||
|
||||
// Components spacing
|
||||
/////////////////////////////////////
|
||||
|
||||
$spacer: ($font-size-base * $line-height);
|
||||
|
||||
$border-radius: 3px;
|
||||
|
||||
// Responsive breakpoints
|
||||
/////////////////////////////////////
|
||||
|
||||
|
||||
@ -172,7 +172,8 @@ a {
|
||||
|
||||
img,
|
||||
video,
|
||||
svg {
|
||||
svg,
|
||||
figure {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
@ -340,13 +341,13 @@ blockquote {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// More basic elements
|
||||
/////////////////////////////////////
|
||||
|
||||
#___gatsby {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// More basic elements
|
||||
/////////////////////////////////////
|
||||
|
||||
@import 'code';
|
||||
|
||||
70
src/templates/Post.module.scss
Normal file
70
src/templates/Post.module.scss
Normal file
@ -0,0 +1,70 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
.hentry {
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
padding-top: $spacer * 3;
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
}
|
||||
|
||||
// Post Title
|
||||
/////////////////////////////////////
|
||||
|
||||
.hentry__title {
|
||||
font-size: $font-size-h1;
|
||||
text-align: center;
|
||||
color: $color-headings;
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
// Post/photo teaser
|
||||
/////////////////////////////////////
|
||||
|
||||
.hentry__teaser {
|
||||
@include breakoutviewport();
|
||||
|
||||
max-width: none;
|
||||
display: block;
|
||||
margin-top: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
|
||||
img {
|
||||
border-radius: 0;
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Post Content
|
||||
/////////////////////////////////////
|
||||
|
||||
.hentry__content {
|
||||
h1,
|
||||
h2 {
|
||||
@include heading-band();
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-h2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $font-size-h3;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-h4;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,7 @@ import Helmet from 'react-helmet'
|
||||
import { graphql } from 'gatsby'
|
||||
import Layout from '../components/Layout'
|
||||
import Image from '../components/atoms/Image'
|
||||
import styles from './Post.module.scss'
|
||||
|
||||
const Post = ({ data }) => {
|
||||
const { markdownRemark: post } = data
|
||||
@ -13,11 +14,15 @@ const Post = ({ data }) => {
|
||||
<Layout location={location}>
|
||||
<Helmet title={title} />
|
||||
|
||||
<article className="blog-post">
|
||||
<h1 className="title">{title}</h1>
|
||||
{image && <Image fluid={image.childImageSharp.fluid} alt={title} />}
|
||||
<article className={styles.hentry}>
|
||||
<h1 className={styles.hentry__title}>{title}</h1>
|
||||
{image && (
|
||||
<figure className={styles.hentry__teaser}>
|
||||
<Image fluid={image.childImageSharp.fluid} alt={title} />
|
||||
</figure>
|
||||
)}
|
||||
<div
|
||||
className="blog-post-content"
|
||||
className={styles.hentry__content}
|
||||
dangerouslySetInnerHTML={{ __html: post.html }}
|
||||
/>
|
||||
</article>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user