Yearly Archives: 2015

WordPress: jacking up the sub-menu and styling it

Leave a reply

You probably very well know the sub-menu that is “flying-out” from the main navigation on hover.  Many free WordPress Themes are equipped with that rollover-sub-menu and while it may be a nice thing to have, sometimes you want to style it in peace and quiet. And that can be difficult, since it is usually hidden and only shown on rollover (hover) – so working on the sub-menu can be a bit demanding, to say he least.

The right-mouse-button-trick can be handy, to at least check which part of the Style Sheet is doing what: right-clicking on one of the sub-menu’s elements makes the sub-menu stay – and you have virtually all the time in the world to explore the different style instructions put upon it. But after the next reload the sub-menu will be hidden again – and you’ll start all over again: hover, right-click, explore…

So sometimes you may want to really disable the hover, or whatever / who-ever is triggering the sub-menu to show and hide, so you can work on the design details without the actual rollover-effect in action. I was basically looking for a way to have the sub-menu jacked up like a car so I could crawl underneath it and really check out all the css style and design details. This could really speed the development progress up a bit – I hoped.

I just spent some time (actually too much time!) checking out where the actual css ‘command’ is situated, that makes the sub-menu disappear – and re-appear on rollover. First I looked for something like display: none or visibility: hidden but that didn’t lead anywhere. Finally I found it – and maybe this little piece of information is also valuable for somebody else – so I’ll better share it right here / right now, so that also other WordPress–Developers may jack up the sub-menu and crawl under it.

The style sheet of the WordPress-Theme Twenty Twelve has an area for screens wider than  > 600px – there are some style ‘commands’ referring to the unordered second level list that makes the sub-menu:

.main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }

This above style information shrinks the sub-menu-container (ul) to 1×1 pixel – and the overflow: hidden; hides everything, that would otherwise be visible outside that 1×1-pixel-container.

A few lines further down this style instruction is then abolished and the sub-menu becomes visible:

    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }

By simply commenting-out the first style information about height, width and overfow, the default state will be the ‘hover state’ so you can see the sub-menu all the time, without hovering the main menu:

.main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
       /* height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px); */
    }

So… Now you know how to jack up the sub-menu, crawl under it and do some styling in peace and quiet.

rMBP HDMI to TV: Crazy Color Problem [solved]

MacBook Pro HDMI TV crazy colors

MacBook Pro connected to TV via HDMI shows 'crazy colors' - Photo/Screenshot: T.Bortels/cpu20

3 Replies

For a couple of years we had an iMac connected to our SONY Bravia TV via a HDMI cable, so we could watch DVDs and YouTube videos on the TV. Now we finally wanted to first time connect the rather new MacBook Pro to the TV – and were confronted with some nice looking problem: the colors went crazy.

Connecting the Retina 15″ MacBook Pro to the SONY Bravia via HDMI cable was easy. The rMBP has it’s own HDMI port – so all the adapters I was used to use with the iMac suddenly weren’t needed anymore: plug’n’play HDMI fun. So the video signal found it’s way to the TV – but on the TV screen everything appeared in ‘crazy colors’. It looked as if the black and white tones were replaced by magenta / pink / purple and baby blue. Wow! How psychedelic! As if the TV now had a built in solarization filter

The internet seems to be full with suggestions what could help to solve this problem: from changing cables to color calibrating. But nothing of that helped to solve the problem. For us the solution was rather simple: the retina resolution of the MacBook Pro seems to be the ‘problem’ – providing a ‘wrong’ resolution to the TV set.

To solve this problem we did the following:

  • open the system preferences and go to
    > display
  • Then simply switch the resolution from 1360 x 768 to 1080i
  • optional: splitting the displays (uncheck “mirror displays”)

After that the crazyness was over and the colors shown on the TV set were behaving normal.

Manage display of WordPress Widgets (e.g. not on front page)

Leave a reply

With the so called Widgets a lot of information can be displayed in the sidebar of a WordPress website. Sometimes this can be a little bit too much information and you want to cut the number of widgets displayed. Two plugins can come in handy.

The problem is actually not a problem at all: a default install of WordPress offers a lot of widgets, that can be implemented easily and display a lot of information automatically:

  • latest blog entires
  • latest comments
  • a Tag-Cloud with popular keywords / tags
  • search
  • links to social media profiles
  • links to neighboring websites (Blogroll)
  • Shop-Categories
  • most popular posts
  • etc.

Sooner or later the sidebar might get jammed, overstuffed with widgets, the user doesn’t recognize any of the precious widgets and the User Experience goes down the drain.

This doesn’t have to mean that you should turn off any of the widgets you installed over the time. Instead you should focus – and see what widgets make sense on what page.

Widget-organization meets information Architecture

So sooner or later you should have a look at you collection of widgets and make a plan ,which widget you would want to present in which context / on which page / on which content  type. What is the most useful additional piece of information you want to present on that particular page? You’ll need to define a logic behind the display of widgets.

manage wordpress widget display by pathGood news is: there is a rather simple solution to handle such logic: the plugin Widget Logic is light weight and rather easy to handle – maybe a bit too easy to handle. With a few lines of PHP you can define almost every condition you like. And this can be a security risk since everybody with access to the widget administration can inject virtually any type of malicious code.

Here come another plugin  handy: the plugin Widget Logic by Path reduces the power of Widget Logic to paths – and in most cases this will probably be exactlty what you would want.

For example: entering the short code <all paths except> will make the widget not show on the pages / paths listed below that short code. Adding <home> will make the widget not show on the front page.

Here’s the links to the above mentioned plugins with additional information:

10 steps to boost your Blog-Income by factor x-1000

Leave a reply

It was last weekend that I found it was too hot to work – but still I wanted to do something at least work related. So I wrote this article, that I always wanted to write, on how to boost your blog-income… a thousandfold… theoretically.

First things first: this article is half ironic – but I have no doubts you may still find a lot of useful information, on how to improve your blog-income: attract additional readers, generate additional page views, raise the click-rate and raise the money that you get per click. And there are also some other probably useful truths in the following text that might be useful for someone how is cosidering to earn money online by blogging.

So maybe you’re running a website and/or a blog? Or you have thought about starting a blog to generate an additional passive income stream? Or you just want to ‘earn money online? I have to admit I do – but most of my income I make ‘online’ does not come from ads or affiliate programs. But that’s a different story.

I you want to earn some money ‘online’ there are a number of options. Monetizing a blog by putting up ads and affiliate programs is one of them. Maybe it’s not the most lucrative method, but chances are that with a decent amount of visitors and the right niche you can actually earn some money writing blog articles.

monthly income = monthly clicks x reward per click

So to increase you monthly blog-income, you would basically ‘just’ have to increase the number of monthly visitors and/or raise the reward you’re paid per click.

How can I raise my blog-income by a thousandfold?

The answer to that question lies in the power of the number 2! We simply try to doubling the income with each of the following ten steps and as a consequence the income stream should  increase by the factor thousand. Or actually by the factor 1024 to be exact. Unrealistic? Maybe. But as I mentioned before: there are some truths on the way that may help you anyways.

For this example we will assume you have a blog already, you have a devent amout of content and you make already 1 Euro a day (or 1 dollar if that’s your currency). Let’s go…

1. Search engine optimization (SEO) = more visitors

Try to double the number of visitors by optimizing your website to be ‘more attractive’ to search engines. Today this basically means: make your content mire attractive to humans – and the search bots will be pleased. Check your content: improve your texts, add valuable information, add images, add infographics. Structure your articles. Add sub-headlines. Add descriptive alt-tags and captions to images.

Chances are, you can double the number of visitors by optimizing and improving the  content you already have. Doubling the number of visitors means doubling the number of clicks – and theoretically we just doubled the blog-income to 2 Euro per day.

2. Higher reward per click by optimized context

Some keywords pay better off than others. Do some basic research on the value of your context. Find neighboring topics or related keywords that can attract higher paying ads. The CPC in google adsense / google adwords tells you, how much money you’re paid on average per click (“cost per click”).

By working on the context we can theoretically double the average CPC of your blog. And doubling the CPC means doubling the monthly blog-income – so we have theoretically just doubled the blog-income to 4 Euros per day.

3. More visitors by writing in an additional language

Do you speak a second language? Brilliant! You can theoretically double the number visitors by ‘simply’ providing your content in a second language – so we have just theoretically just doubled the blog-income to 8 Euros per day by translating existing content into a second language.

4. Double your blog-income by writing a second blog

This is a tricky one: close to your main subject there may be a second field, that has similar readers. You can try to start a second blog about another subject you feel comfortable writing about. See if you can attract the same amount of readers and/or income there – and you can  theoretically  doubled your blog-income to 16 Euros per day.

5. More visitors through incoming links

I won’t call this link building, but basically it is link building. But in the recent weeks / months there has been a lot discussions about the usefulness vs. uselessness of link building. True: it can probably harm your search engine ranking, if you overdo it. But ‘truthful’ link building will never hurt anybody.

So do some research in your field and mention neighboring websites and/or blogs that you like. And don’t hesitate to inform the webmasters of those websites that you are linking to them. Chances are, they will link back.

Another approach to win some incoming links is to write valuable content that people really like. Chances are, that some people will put up links to your website, just because they want to recommend it to their readers. Also in times of ‘link buildings discussions’ this is still comon practice. And incoming links do bring additional visitors – either indirectly through an improved search engine position, or directly – through a click on that link.

‘Link building’ has the potential to double the number of visitors – so we theoretically just doubled the blog-income to 32 Euros per day.

6. Optimize the CTR by optimizing your headines

This is also a classic: in most cases the headline of your article is the first thing somebody sees in the Search Engine Result Pages – and how it is perceived can have a great impact on the decision, if the user clicks on it – or not. So writing good headlines can improve the rate of click-throughs – the click-throuh-rate CTR. And headlines are of course also rated by search engines themselves. So there you have already two good reasons to work on your headlines.

Improve your headlines – and chances are you can double the number of visitors – – so we theoretically just doubled the blog-income to 64 Euros per day.

7. Increase the range of your blog through social media and/or newsletters

Offer ways to subscribe to your content so you can turn one-time visitors into returning visitors. Returning visitors are good visitors for various reasons: they are likely to engage with your blog and/or even spread your content among their own audience by sharing it, writing about it, linking to it.

Add a social media profile for different social media platforms: twitter, facebook, instagram, google+. Use any of the many available newsletter tools – and make sure you have a link to a rss-feed.

Making use of rss, social media and newsletters can double the number of visitors– so we theoretically just doubled the blog-income to 128 Euros per day.

8. optimize the position of ads and affiliate programs

Above the fold? Below the fold? Is there a fold? Try for your self. Try different layouts, play around with different positions for your ads and/or affiliate links. Often the right sidebar is overrated by bloggers: it’s just too easy to place an add there – but does it pay? Technically the sidebar is often loaded last – so the add visitors see first may be the last one loaded – which can mean it’s not the most valuable add.

Optimizing the positioning of ads can double the click rate and/or the pay-per-click – so we theoretically just doubled the blog-income to 256 Euros per day.

9. Double the number of articles

Step number nine may be the most difficult to achieve, but at the same the easiest: you double the number of readers by doubling the pace of writing. So instead of writing two articles per week, you write four.

blog-income increaseBut here you should already have become sceptical about the list of ‘improvements’. If you really wanted to follow all above tips and tricks to double your blog-income, you would now have to write double the amount of articles of two different blogs, in two different languages each – and make sure they are double as valuable / double the length. So if you first only spent 2 hours per week writing, you will now find yourself writing 2x2x2x2x2 = 32 hours per week!

However – theoretically it should be possible to double the number of readers – or at least double the number of page impressions by doubling the number of articles written – so we theoretically just doubled the blog-income to 512 Euros per day.

10. … Can you make real money blogging?

We are actually not done with the ten point list – but I guess you got the idea by now and I will leave the tenth point to you.

Yes, there are ways to make real money online – while blogging may be one of them, just writing articles and putting up some ads may not work. There is more making a living than just that. Maybe you can come up with your own idea how earn a decent amount of money by ‘simply’ blogging – and maybe you even manage to double your blog income every now and then? Please feel free to let me know – I’m quite curious…

related reads:

Desaturate pictures with CSS (Grayscale-Color-Hover-Effect)

CSS Hover Effect for pictures: Grayscale Color change

Change between Grayscale and Color image with a nifty CSS hover effect - Photo/montage: T.Bortels/cpu20

2 Replies

Hover effects are sometime overused – but when done right they can be a useful detail, having a positive effect on the webdesign and the overall user experience by simply highlighting clickable images on hover. Here is a short introduction how to implement a Grayscale-Color-Hover-Effect for the images on your website.

Introduction

If you wanted a nice ‘grayscale effect’ (“black and white”) for your images, back in the times before CSS3, you would have to upload two images. You would probably have uploaded the full color version and a grayscale version of the actual image and then changed the image path / URL dynamically with a small JavaScript snippet.

For a long time that was at least my preferred method if I needed such an effect in a website. This JavaScript method basically worked quite well – but it was also a bit unhandy. You would of course first have to actually make that second image – then upload it. You would then basically have doubled the amount of data a user would have to load for viewing each image – additionally the second ‘hover’ images had to be pre-loaded in the background.

Then a rather nifty css trick came along. You would only have one image file but there would be two versions of the image: a full color version and the grayscale version. You would then use the image as a background image, crop it with a container (overflow hidden) and simply move the position on hover. No JavaScript needed, but still not too elegant. The images were basically hidden from search engines – and the image file (sprite) would be at least twice the size of the actual image. Bad for SEO, bad for you.

For smaller images used as navigation elements (e.g. in slideshows) this “sprite trick” is however still popular today. You can for example easily style slideshows (for example ‘out of the box slideshows’ that come with many premium WordPress themes) by simply replacing the sprite. But for larger images like teaser images this technique is not practical and rather not recommended.

CSS3 to the rescue!

Finally CSS3 brings on a solution to this matter. Desaturating pictures with CSS only is much more convenient than using a desaturated version of an image – especially when you are working with editors and/or WordPress- or Drupal based CMS. You don’t need to follow complicated workflows, no JavaScript involved. You basically just need to upload one image  and add a CSS class that will trigger the grayscale effect on hover. This can for example be used to highlight preview pictures / thumbnails on hover like teaser images or the like.

Here is a working example of the effect:

grayscale effect hover picture with css

hover the mouse over the image to get the color back

Of course one could question if using this effect was ‘necessary’ – or if hover effects are useful at all. But I won’t go into that discussion now. For some websites it may make sense to have a hover effect applied to images – and I personally quite like the grayscale effect, if used cautiously. In my opinion the change from grayscale to full-color is more subtle than for example zooming in/out or changing the opacity of a preview thumbnail. This is even more the case, if you decide not to desaturate the images completely and maybe also to add a transition to the hover effect.

half-desaturate picture with full color on hover (pure css)

hover the image to get the color back

The desaturation effect can be achieved using the CSS filter property. Most modern browsers will render filter correctly, however it is (of course) not fully compatible with Internet Explorer – at least not with the recent versions IE-10, IE-11 and also Edge is lacking support. However – older Internet Explorer versions actually do know the filter property but use a different approach than the upcoming CSS3 specification would suggest. Instead of filter: grayscale you can use filter: gray to target IE versions 6–9.

You could however use a small JavaScript snippet to make also newer versions of Internet Explorer desaturate images, but I don’t like that approach and I will not dive into that in this post. I would rather want browser manufacturers support this useful feature. IMHO implementing workarounds to make the grayscale effect work won’t make browser manufacturers move towards this direction. Anyways…

Also Firefox < V.35 does not support filter: grayscale – instead you’ll have to implement a small workaround to address older Firefox versions. But since that’s a rather simple and generally interesting trick I’ll quickly mention the details: you can use an SVG-image to make Firefox 4 – 34 desaturate images. Ok – enough introduction – here the details how to get the css grayscale hover effect working:

Grayscale Hover Effect CSS Code Samples

In the above example, the color images, that shall be displayed in grayscale, are marked with a class named “desaturate”

<img src="/bilder/farbfoto.jpg" class="desaturate thumbnail">

For almost all browsers we can now write a suitable CSS property that will take the color from the image so they are displayed in gray / grayscale:

.desaturate {
    filter: grayscale(100%); /* Standard CSS */
    -webkit-filter: grayscale(100%); /* CSS for Webkit Browsers */
    filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
    filter: gray;  /* Internet Explorer IE6-9 */
    -webkit-filter: grayscale(1); /* Old WebKit Browsers */
}

On mouse-over (:hover) we want to display the full color version of the image. So we’ll have to remove the original filter-effects from images – or actually reset them:

.desaturate:hover {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0); /* Old WebKit */
}

Some details about the SVG image: since SVG-images are not really images, but basically collections of tags and vectors that are described using XML statements, we can easily generate this image by copying the following code into a text file, save it as “grayscale.svg” and upload it to the webserver. Here is the content of that text file:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0  0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0 0  0  0  1 0"/>
    </filter>
</svg>

The above SVG uses the feColorMatrix – so the numbers following that tag are part of a matrix that describes the color effect. You can use that matrix to apply all kinds of color effects – I won’t go into details now. If you want to find out more on the feColorMatrix I would recommend the article “Color Filters Can Turn Your Gray Skies Blue” over at css-tricks.com or read the wiki page about feColorMatrix over at docs.webplatform.org. Both articles have quite a number of examples that show how to manipulate images using the feColorMatrix – from Sepia Effect to colorizing. Quite many effects one may know from image processing software like Photoshop are also possible through applying filters.

How to half-desaturate an image with CSS.

For the second example I used a different CSS class ‘half-desaturate‘ and different svg, utilizing the saturate property. In this example I want to have the image half-colored / half-grayscale – the desaturation should be applied to 50%. First the CSS:

.half-desaturate {
    filter: grayscale(50%); /* Standard */
    -webkit-filter: grayscale(50%); /* Webkit */
    filter: url(/elements/half-grayscale.svg#desaturate); /* Firefox 4-34 */
    filter: gray;  /* Internet Explorer IE6-9 */
    -webkit-filter: grayscale(0.5); /* Old WebKit */
}

And this is the related svg file:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
      <feColorMatrix in="SourceGraphic" type="saturate" values=".5" result="A"/>
    </filter>
</svg>

…and Bob’s your uncle.

Please feel free to leave a comment below.

You can download the grayscale.svg from here and find the half-grayscale.svg right here. And just to make sure – here is a link to do a quick cross-browser-check over at  Can I Use to see in what browsers the CSS-Filter property is working:
http://caniuse.com/#search=filter

WordPress as a CMS: Custom Content Types and Templates

WordPress CMS: Custom Content / Types

WordPress CMS: Custom Content / Types - Photo / Illustration: T.Bortels/cpu20.com

2 Replies

WordPress is not only a great tool to easily install and run a blog- or news-website, but can also be altered to serve as a Content Management System: WordPress as a CMS. But what makes WordPress a CMS? To me the most important feature is probably that I can expand WordPress’ functionality with additional custom content types.

However – first thing that annoys me a bit is that in WordPress ‘Content Types’ are called ‘Post Types’. This suggests that everything in WordPress generally would follow a ‘Post-Mataphor‘ – which I would find great. But then again a look in the left sidebar of the admin section tells me that WordPress originally distinguished between ‘Pages’ and ‘Posts’. So a ‘Page’ is a Post Type – but a ‘Post’ is also a Post Type. Oh well.

What makes WordPress a Content Management System?

The ability to establish and theme (style) different custom content types (or ‘post types’ in WordPress jargon) is probably the most crucial key feature that makes a CMS what it is: a Content Management System. If you want to manage content (and not just ‘post blog entries’ and ‘pages’) you will sooner or later need to draw lines between the actual content types you’re dealing with. On the website of a record label, an Artist is a different content type than a Release or a Song or a Concert or – an ‘Info-Page’.

Wordpress CMS: Custom Content Type

WordPress as a CMS: Custom Content Type ‘Info-Pages’ in WordPress (overview)

Different content types are often basically different data types – or different sets of data. To bring meaning to these data types they need to be handled differently. And this is only possible, if the CMS can actually handle different content types. Along might also come the demand to use different template files to give the different types of information each a different representation: different style, different layout, different template file.

Describing the custom content type in a function

The following code has to be added to the theme’s functions.php file:

function my_custom_content_type() {
$labels = array(
 'name'               => 'Custom-Info-Pages',
 'singular_name'      => 'Custom-Info-Page',
 'menu_name'          => 'Info-Pages',
 'name_admin_bar'     => 'Info-Page'
);

$args = array(
 'labels'              => $labels,
 'public'              => true,
 'exclude_from_search' => false,
 'publicly_queryable'  => true,
 'show_ui'             => true,
 'show_in_nav_menus'   => true,
 'show_in_menu'        => true,
 'show_in_admin_bar'   => true,
 'menu_position'       => 5,
 'menu_icon'           => 'dashicons-admin-appearance',
 'capability_type'     => 'post',
 'hierarchical'        => false,
 'supports'            => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' ),
 'has_archive'         => false,
 'rewrite'             => array( 'slug' => 'custom-info' ),
 'query_var'           => true
 );

register_post_type( 'custom_content_type', $args );#
 // flush_rewrite_rules();
 }

add_action( 'init', 'my_custom_content_type', 0 );

Custom Post Type Templates in WordPress

Basically all that needs to be done is to define a new Page Type either in the theme’s functions.php file, or through a custom plugin, as described above. There are probably zillions pf plug-ins that will introduce new content types – and many ‘pro themes’ bring along their own usage-specific Page Types like ‘Artist’ or ‘Concert’. But in the end I suspect you will actually want to define your own Post Types according to your or your customers’ requirements. I will describe both ways more detailed in upcoming posts – this article is just a brief introduction into the subject. The actual content type definition is however always the same: first add a function, that describes your new custom content type – then initialize the function.

Then in a second step you can add a new template file to your theme folder that will take care of the representation of your new content type. You can just copy the template file “single.php” and save it with the name of your content type added to the file name like this: “single_custom_content_type.php”.

You can basically do everything inside this file. I would however recommend you also alter template file “content.php” so that it suits your needs.  This will however only get loaded, if you add or actually alter one line of code inside the template file which tells the template, what content to load.

So inside of “single_custom_content_type.php” instead of this:

<?php get_template_part( 'content', get_post_format() ); ?>

you should have the code altered like this:

<?php get_template_part( 'content', 'custom_content_type' ); ?>

…suggesting you have the template file “content-custom_content_type.php” already in place.

Advantages of Custom Content Types

Even without custom fields, custom styles or custom whatsoever you have already quite some advantages instantly at hand:

  • The pager respects the new content type – visitors to your website can now browse from page to page (previous / next) inside that content type. This can be already quite handy in so many situations when you simply want to separate different types of pages from each other
  • The sidebar in the admin section now has some new functionalities that let you easily add and/or edit pages of that new content type. And there is also an overview with integrated search for that content type only.
  • Pages of the new Content Type can have they own ‘slug’ as defined in the function under “rewrite”. This gives the pages of that content type automatically a meaning to both users and search engines. Additionally this can make things easier when looking at web-statistics generated by tools like PiWik or the like.
  • And last but not least: you can add fields and doing so build the content type that suits your data structure, your content,  your needs.

Changing Content Types for existing Pages

Often the situation is like this: you have a WordPress installation, you have some posts, you have some pages – lots of pages. You are basically happy with what you have – you ‘just’ want to add a new content type – and change the content type of some pages that already exist to that new content type. Good news is: the is a Plugin for that! The Plugin Post Type Switcher (wordpress.org/plugins/post-type-switcher/) simply lets you switch post types on a single post (page) basis. Since recent there is also a bulk switcher option so you can ‘move’ several pages from one post type to another without editing each page separately.

Free VPN Services vs. Security

Leave a reply

I recently (again) did a quick research on free VPN services. My prefered setup would have been a free browser plug-in based VPN that wouldn’t require registration. I would basically just need a VPN-Service to check some websites that seem to have different content, according to the country it is accessed from.

Why do I need a VPN? How does a VPN work?

I find VPNs are a great invention – but they can be a bit scary, when you take closer look at how a VPN actually works. This is even more the case if you’re having concerns about security issues. VPN stands for Virtual Private Network. A VPN service usually allows the user to access websites or services through their proxy servers. This means, even though I am located in Germany, to a web server I could look as if I came from a different country.

Well – anyways. A quick research led me to the service called Hola – but after reading this article about technical security problems with Hola that could either be bugs or even features, I dumped the idea again:

Long story short: the ‘bugs’ inside the Hola browser plug-in lets attackers easily take over somebody’s computer. Practically this would mean that thousands or even millions of ‘infected’ computers could be ‘hijacked’ by an attacker and useed / misused as a ‘bot net army’. This army of remote controlled computers could then again be used for DDoS-attacks and the like. Not good.

So probably the best alternative would still be the service called freedome from f-secure. The service is not a free service – and it is subscription based. Both I originally wanted to avoid – but probably this is still the best solution. At least it looks way more secure and reliable than most free VPN services. I know I like F-Secure – I will probably also like their VPN service Freedome.

Advatages of using a VPN service

It’s basically rather easy: using a VPN service you virtually become untrackable. And that has some great side effects – or actually advantages:

  • As I mentioned before you could then visit websites that are using geo-blocking to block or grant access to users from specific countries or regions.
  • As a web developer / webmaster you even may have to implement some geo-aware solution yourself. Then a VPN service can be handy to test such features.
  • Some services and ad networks use ‘super cookies’ that allow them to track users across different websites, even if the user does not accept any cookies. With a VPN such tracking practice is close to impossible.
  • Using a  VPN can also have security advantages, since you’re not accessing the internet directly – but indirectly through the VPN’s servers.

I guess I will take Freedome for a test ride and then report back on a future article.

See also:

Drupal: how to re-order Scald Contexts editor-friendly

Leave a reply

I use the Scald module on some projects to add images to a CKEditor powered text field. I like the Scald module very much. It gives the editor the freedom or re-using images or actually all kinds of meda across the website while providing a media pool for easy access to all previously uploaded media. Every photo, every image gallery, every video ever uploaded to a website is accessible from every Scald-enabled node. No redundant media, less searching for images, more time for actually writing good articles and maybe even an extra break.

Additionally Scals gives the editor different display options for images, triggered through scald contexts. So for example the editor may choose to have a ‘full width image’ and later change the context to ‘inline image’. This can help getting the workflow organized when working in teams – but it also helps to separate content from code.

This basically this all just works just fine – but when having a couple of ‘contexts’ up, it can be a bit annoying that I can not determine in which order the contexts are presented in the modal window that lets editors change the image’s Scald context. So after a while it can become a bit messy:

Scald-Contexts list of Image-Formats

I would love to have the Scald contexts either ordered alphabetically or ideally manually by drag-and-drop. Currently the contexts seem to be ordered chronologically. So at the moment the first context I created is first in the list – the latest context is last. Some of my contexts are close to others and I would need to have them appearing accordingly close to each other – in the above screenshot it’s “Partner–Logo (160px)” (which I created earlier) and “Partner-Logo (200px)”.

I recently opened an issue at drupal.org regarding this feature request – but I only have half-good news: “You can alter the list of contexts with hook_scald_wysiwyg_context_list_alter –– check the scald.api.php … “. Well – yesss. I guess for now I’m fine with how the list is displayed – but will have a look at this in the future whenever I might run into this particular problem again. Here’s the issue: ‘How to re-order Scald Contexts’ https://www.drupal.org/node/2514352

Workaround: I figured out a way how to kind-of re-arrange the order of Scald contexts to have it a bit more editor-friendly. It is actually a bit risky – but just a bit. Here’s the quick’n’dirty how-to: since all custom contexts are in chronological order, you can kind-of determine the order by deleting and re-installing selected contexts. This will first break your articles – or actually only the images won’t be shown for the time when the corresponding context is not available. But once you re-add the context again (with identical name) all images are back in place – and the ‘new’ context is now at the bottom of the list since it’s the one that was added latest. Hope this helps.

…to be continued…

WordPress: load PiWik statistics tracker script only for guests

Leave a reply

Counting website visits with the open source tool PiWik is becoming more and more popular. PiWik is easy to install, easy to integrate with WordPress, Drupal, or any other CMS. The data reports can be self-hosted so they are all yours – and it’s free. The only thing about PiWik (and other website statistics tools) that used to annoy me was that I never knew if I really had that many visitors, or if it was just me. Of course: PiWik has an option to set a cookie “it’s me” so that your own visits would be ignored – and that is a good workaround if you happen to run your website on a self-coded basis that is not aware that it’s you, because it lacks of a login or the like…

With WordPress you actually have a system that can be aware at least if the visitor is currently logged in, or not. And there is quite a number of free Plugins that distinguish between ‘you’ and ‘the others’ by checking if the visitor is logged in, so only visits of real visitors (guests) are counted, but not visits of editors and administrator. That is of course great, but in most cases I just want to implement PiWik – and that’s it. So I usually just copy-paste the PiWik code snippet into the footer of the WordPress theme and all is fine.

Just placing the PiWik tracking code in the footer.php of your WordPress theme would then again make PiWik count every visit – so also my visits to the site. To avoid this, there is a small handy WordPress function ‘is_user_logged_in()‘ that checks if the current user is actually logged in – or not. Adding a “!” to the function will make the following code only get rendered, if a visitor to your website is not logged in. So for example administrators and editors will not get tracked by PiWik:

<?php wp_footer(); ?>
<?PHP if ( !is_user_logged_in() ) { ?>
<!-- Piwik -->
<script type="text/javascript">
...
<!-- End Piwik Code -->
<?PHP } ?>
</body>
</html>

Drupal CKEditor Custom Text Styles

Leave a reply

Usually you should be able to add the ‘Styles’ button to your prefered CKEditor Profile by drag’n’drup in the ‘appearance’ section of the corresponding CKEditor profile. Then you could customize the ckeditor.styles.js which should be located in sites/all/mytheme/ckeditor.styles.js –– BUT there is an incompatibility between jQuery and the CKEditor Profile editor.

So in order to get this work, first jQuery has to be ‘downgraded’ to V.1.7, preferably  through jQuery update. This of course makes the whole idea of having a module called “jQuery update” appear to be a bit strange – but that’s how it seems to be. At the moment.

Once jQuery is downgraded, the CKEditor profile editor works. That let’s you drag’n’drop the ‘Styles’ button into the interface. And that again makes use of the ckeditor.styles.js which can then be adjusted according to personal preferences.

If the custom styles still don’t show up then “flush all caches” may help. Also clearing browser cache is recommended since the JavaScript files involved can be a bit sticky.