Blend two Images with the GIMP

I use the Gimp to edit and produce artwork. For a project I wished to blend the edge between two images.

Whilst working on a recent slider for a website. The images I had to work with were either the wrong orientation or just not quite long enough to be used as single images.

I wanted to join a couple of images together to create a composite image, the full width of the slider. This would also allow me to convey more information on a single slider image view.

Blending two images together to get a smooth transition rather than a hard edge makes it more appealing. Even if the edge is only a few pixels it will be easier on the eye.

Using the Gimp I took two images for a slider and blended the join between the two to create a fade between them.

Here I am using two pictures from Bergen. To begin with in a new image I added the two images, one per layer, leaving the background untouched. To make this work best an overlap of the two images is required.

Blend images with the Gimp: initial layers

The layers are shown in the Layers Window: the image of the troll, the view of Bergen from Mount Fløyen and the generic background layer.

Blend images with the Gimp: layers window

In the layers window, for each of the layers, right click and select to Add Layer Mask.

Blend images with the Gimp add layer mask to layer

Ensure that the option White (full opacity) is selected

Blend images with the Gimp add layer mask

With the layer masks added again right click to view the properties, check to ensure that the check box for Edit Later Mask is ticked.
image here

Blend images with the Gimp confirm edit layer mask set

From the tools window select the blend tool. The foreground and background colours should be black and white respectively.

Blend images with the Gimp select blend tool

Between the transition of the two images drag the blend tool line, if horizontal of vertical holding down the ctrl key helps to keep it at 0, 90, 180 or 270 degrees.

Drag as far as you need to create the blended transition. The longer the line the great the overlapping transition.

Blend images with the Gimp layers blended

Link your Twitter Android app to your Twitter Account

Create a Twitter application to link your Android Twitter app with your Twitter account, enabling the posting of tweets from your Android phone or tablet.

Most of the Android Twitter apps make use of their own Twitter application by default.

Whilst this makes the configuration of the app easy, Twitter imposes a limit on the number of clients using a given application. A number of these clients have previously reached their client limit.

With your own Twitter application you are not reliant upon the configuration and maintenance of details by someone else.

Also the security keys which you use are unique to your application – much safer. And as many of the Twitter Android apps are at, or near the limit imposed by Twitter using your app allows someone else to make use of the default.

Create your own Twitter application, linking your Twitter Android app. Its easy to do and avoids any potential issues from using the default application associated with one of the Android apps.

The Twitter application provides two encrypted keys to enter in the Twitter app.

In this example I used Twidere, of coarse other apps are available.

In the Twidere app slide in from the left edge of the screen to show the configuration options.

From the settings select network, then scroll down to select default API settings.

On this page it is the consumer key and consumer secret which we shall be entering from our Twitter application.

twitter-auth-twidere

Rather than the usual Twitter public website, we’ll start from is the development website dev.twitter.com

At the top of the page click on my apps in the navigation at the top. This goes to https://apps.twitter.com/. No doubt you have a Twitter account – sign in with the details..

Create Twitter Application: Login

After logging in the shown page has a list of your existing Twitter apps.

create-twitter-app-list

Click on Create New App button

create-twitter-app-create

Enter the relevant details. It’s worth describing your app properly in the description, in case you wonder what it is in 6 months time. Ensure that your website link contains the full reference, including the http://

create-twitter-app-details

Select the tab for Keys and Access tokens

create-twitter-app-keys

The consumer key and consumer secret values and shown.

Create Twitter application: Keys and Access Token

Whilst not needed at the moment I often create the access tokens at this time. Click on the button Create my access token to populate the values of the token and token secret.

Copy the application setting values of consumer key (API key) and  consumer secret (API secret) into the Twitter Android app. In our example we are using Twidere. Click OK to save.

Create Twitter Application: Twidere Android Client API Authorisation Settings

Your Android Twitter client app should now be good to go. Return to the list of tweets and try adding a new one.

Website Screenshots

I use website screenshots to explain details, show an example of previous work or highlight aspects of a web page.

Annotating a screenshot may help to convey information regards prospective work or actions and changes made.

Screenshots may also be used to record configuration and settings, for example email account setup.

Website screenshots may be taken either from within the browser using one of the extensions available or by capturing the whole browser view using a feature of the operating system.

The screen capture facility may capture the whole of the screen, active window, or offer the selection of a party area.

Dependant upon the device and operating system which you are using there is are number of options available.

Operating System

If you wish to take a screenshot of a programming window this allows the screen capture, either full screen, or one of the open windows.

Useful for capturing configuration details of email accounts and configuration. This can then be kept for prosperity, providing future reference.

Or the screenshot of the email configuration can be passed to/from your web hosting company when reviewing email account configuration and operation.

Apple and  Android allow screnshots to be taken directly with the use of keys.

Programming based

Programs are available which enable the capture of the screen’s content.

There is likely flexibility in the area which can be captured.

I use the program Spectacle which allows a time to be set before the capture is triggered. I can then navigate to a window and perform an action, for example hovering over a selection causing a drop down menu to appear. Two seconds later and the screenshot triggers capturing the window together with the mouse selection action.

Website Screenshots: Spectacle

Browser Based

If you wish to use the browser to capture the view of the page. Search the browser’s extensions for

  • Screengrab (FireFox)
  • Awesome Screenshot App (Google Chrome)
  • Nimbus Screenshot App (Google Chrome)
  • Marqueed Screenshots (Google Chrome)

I use Screengrab on Firefox.

A browser based Screengrab allows the the capture of the browser window, or a part thereof. But it is restricted to the browser and didn’t give access to the other programs opened.

A browser based screenshot program had the familiarity across different operating systems, for example if you are using Chrome on Windows and Mac.

What is Domain Privacy?

Many website hosting companies offer Domain Privacy as an option – but what does it mean? And is it worth paying for?

If I do a query on the domain bbc.co.uk I get the following result

/home/neil# whois bbc.co.uk

Domain name:
bbc.co.uk

Registrant:
British Broadcasting Corporation

Registrant type:
UK Corporation by Royal Charter

Registrant's address:
British Broadcasting Corporation
Broadcasting House
Portland Place
London
W1A 1AA
United Kingdom

Data validation:
Nominet was able to match the registrant's name and address against a 3rd party data source on 12-Jun-2014

Registrar:
British Broadcasting Corporation [Tag = BBC]
URL: http://www.bbc.co.uk

Relevant dates:
Registered on: before Aug-1996
Expiry date:  13-Dec-2025
Last updated:  29-Oct-2016

As can be seen within the results is the address of the domain’s registrant:

Registrant’s address:
British Broadcasting Corporation
Broadcasting House
Portland Place
London
W1A 1AA
United Kingdom

For a business with an office, providing this information on the Internet is acceptable. However, for an individual its possible that they may not wish to give away such details.

Domain Privacy hides the registrant’s address.

There are many tools and websites which can be used to find this information. One you may wish to try is

whois.org

 

Further reading

https://en.wikipedia.org/wiki/Domain_privacy

https://www.123-reg.co.uk/domain-names/privacy.shtml

https://www.1and1.co.uk/private-domain-registration

https://www.fasthosts.co.uk/domain-names/privacy

http://support.hostgator.com/articles/launchpad-how-to-enable-whois-privacy

 

Show WooCommerce Product Categories in Admin Menu

After installing the WooCommerce plugin to a WordPress website. How to add the shop categories to the menu?

Navigating to the page Appearance > Menu I was anticipating the inclusion of additional sections associated with WooCommerce.

However, looking at the WordPress menu configuration I was seeing the plain ordinary menu options.

Show WooCommerce categories in admin menu plain

To add the additional WooCommerce menu configuration options expand the Screen Options section at the top of the screen.

 

Show WooCommerce categories admin menu screen options

Within the Screen Options select the additional sections which you wish to add. I chose to add Product Categories. clicking on the check box for the option adds it to the page. Once you have made your choices close the Screen Options tab.

Show WooCommerce categories in admin menu with categories

Expand the Product Categories section and select the categories which you wish to show in the menu. Add these as you have previously for pages.

Integrating PayPal with a Plugin API

PayPal can be integrated with your website using its API.

The API enables a secure interaction to occur between your website and PayPal, passing forward details of the purchase, and checking that the items indicated are correct and for the agreed price.

To work the PayPal API provides secret key values.

To begin linking PayPal with your website login to your account.

Details about creating a PayPal account and configuring your account details are converted in this article.

Click on the option to …and then on the next page choose option A – Work with a partner that’s already integrated with PayPal.

Expanding this section offers the options:

  • Already have a partner?
  • Looking for a partner?
  • Setup API access

Choose the option appropriate to your website development.

In addition to this the booking system needs integrating with the PayPal account.

On the page https://www.paypal.com/webapps/business/tools

Select API Access, under Manage your business.

https://www.paypal.com/uk/cgi-bin/webscr?cmd=_profile-api-access

On this page click on Request API credentials, then Agree and Submit.

PayPal creates the necessary credentials, emailing a link to a page with these available.

https://www.paypal.com/uk/cgi-bin/webscr?cmd=_profile-api-signature

On the website navigate to the settings configuration page for the plugin or module, which is to be integrated with PayPal.

Navigate to the PayPal section. Copy in the entries from the PayPal account for
– API user name
– API password
– API signature

Set WordPress Table Row Background Colour

Wanting to easily edit the properties of a table on your WordPress page or blog post?

Maybe change the background colour of one of the rows. For example in the table below colouring the background of the operating system row.

Parameter Description
Mozilla Mozilla based user agent. This implies the Gecko browsers like Firefox and Netscape. Other user agents using the term Mozilla are ‘Mozilla-compatible’.
5.0 The version of Mozilla
Linux x86_64 The operating system. This is showing as Linux, running on a 64 bit processor,based on the Intel x86 family.
Firefox Based on Firefox
30.0 Firefox version

To extend the WordPress editor features I added the TinyMCE Advanced plugin.

Additional features added include the option to easily configure tables; rows and cells. One of the changes to the editor is the addition of a table icon to the editor top row.

To change the background colour of one of the rows in the above table click on the table row to be modified.

From the top menu bar click on the table icon to open the drop down menu selections.

Table row background colour slect editor table row properties

On the table properties popup select the advanced tab. click on the background colour to open a colour picker dialogue.

Table row background colour table advanced row properties colour

Once you have selected your colour click on OK to close each of the open popup dialogue windows.

Parameter Description
Mozilla Mozilla based user agent. This implies the Gecko browsers like Firefox and Netscape. Other user agents using the term Mozilla are ‘Mozilla-compatible’.
5.0 The version of Mozilla
Linux x86_64 The operating system. This is showing as Linux, running on a 64 bit processor,based on the Intel x86 family.
Firefox Based on Firefox
30.0 Firefox version

The table modified with the row given a background colour.

If the table looks correct within the editor but doesn’t change within the public view its likely that the configuration of the website is overriding your changes. Contact your website developer to resolve the issue.

Create LinkedIn API for Social Media Posting

LinkedIn provides an API allowing connection to your account to auto post and view content.

The API can be used to auto-post content from your blog. When a new blog post is published the headline and link may be pushed to your LinedIn account activity.

To add this link between your website and Linked in requires the creation of an application, together with  the associated security keys.

Begin by logging into your LinkedIn account

Go to the developers page, https://developer.linkedin.com, I found no obvious links from the accounts page.

LinkedIn Developer Home Page

At the top right click on the link for My Apps.

LinkedIn My Applicatons

If this is the first time of creating an application the page will be empty with the message You do not have any applications.

Click on the yellow Create Application button, at the top right.

LinkedIn Create an Application

On the Create a New Application form enter your details.

LinkedIn create a New Application

Click on Submit button at the bottom of the page.

To ensure that only your programs are able to connect with your LinkedIn account an OAuth security connection is configured.

LinkedIn creates a pair of unique authentication keys to be added to your program. There is also an authentication of the connection.

The next page defines the oAuth authentication keys to be used with this application.

LinkedIn Application OAuth Keys

Copy these keys, Client ID and Client secret, to their associated text boxes within your program.

Click on the Update button at the bottom of the page.

The next action to take is to set the newly created application live. At the top left corner there’s a short menu. Click on Settings.

LinkedIn Application Settings Application Status Live

In the Application status field choose the option Live and click on Update at the bottom of the page.

Authorise the use of the program with your LinkedIn application. I have found that this is usually simply an authorise link within the program to be clicked. A dialogue is shown requesting entry of your LinkedIn account user name and password..

Authorise Connection

Your program can now be used to interconnect with your LinkedIn account.

Open a MailChimp Campaign Email Address as a New Email

When creating your new MailChimp campaign don’t forget to create links for your email addresses.

One of your actions in your MailChimp campaign maybe to contact you by email. Far better to open this as a new email when the recipient clicks on the email address.

Additional actions can become blockers preventing one of your campaign subscribers from following up on your email.

Open MailChimp Campaign Email Address as a new Email

The image above illustrates the body content for a new MailChimp campaign.

At the bottom of this campaign is an email address, events@example.com. One of our goals within this campaign is to receive emails to this address.

However, as shown, clicking on the email address will do nothing. To email the event organiser the prospective visitor must copy the email link into a new email.

There is a chance that this additional action will discourage that action by our mailing list subscriber.

It would be nice if by clicking on the email address our email client would open a new email.

 

Open MailChimp Campaign Email Address as a new Email - highlight link

In the body text highlight the email address and click on the link icon. Its the chain icon shown highlighted with a grey background. (Top row of icons, 4th item).

Open MailChimp Campaign Email Address as a new Email - select link type

Clicking on the link icon pops up an Insert or Edit Link dialogue window. This is more commonly used to create links to pages on websites.

From the Link to drop down list select Email Address.

Open MailChimp Campaign Email Address as a new Email - edit link

Details entered in these three boxes will be pre-filled within the new email.

Enter the recipient email address (events@example.com) and a subject.

You may also wish to add some body text. For example its important to know the persons contact details.  “Please tell us your name and contact telephone number”. Keep this short to minimise the number of characters in the link.

Click on Insert to action your settings.

Open MailChimp Campaign Email Address as a new Email - mailto link added

Here’s the updated campaign body text with the email address linked.

Now when the email is read, clicking on the email address will open a new email.

If you wish to edit the link, double click on the email address to open the dialogue once more.

Create PayPal Buy Now Button

With a PayPal BuyNow button you can easily accept registrations for an event or sell one or two products on your website.

Create a PayPal BuyNow button for your website in a few easy steps.

To begin creating your button login to your account on the PayPal website.

Tools

Buttons are one of the tools. For a list ot available tools click on the Tools menu item and select All Tools.

Create PayPal BuyNow Button Tools

Scroll down and click on the PayPal Buttons tool. At the time of writing, for me this was on the 3rd row.

The next screen shown is a summary of your saved buttons, together with a number of example buttons.

Create PayPal BuyNow Button - My SavedButtons

Once you have created your new button it may be saved for future reference or to replicate and amend for another purchasable item.

In my example there are no previously saved buttons, all those listed are samples.

Click on the Create new button link on the right hand side (related items).

Create a PayPal Payment Button

The next view shows the beginning of the sequence for Creating a PayPal payment button.

Create Paypal BuyNow Button - Create Step1

Shown is step 1 – choose a button type and enter your payment details.

A drop down list shows the different types of buttons which can be created. I chose the Buy Now button type.

Give the button a name, and optionally an ID. These two settings will make tracking and usage of the button easier to follow.

Create PayPal BuyNow Button - Create step1b

In the example above I have chosen the BuyNow button type, assigned an item name and ID, set the price.

There is no selectable quantity option. This will be covered later.

Under the Merchant Account IDs, I chose the first option secure merchant account ID. This option will hide your email address from the button code. However, it may well still be shown on the PayPal payment page.

Click on the Step 2 title bar to progress.

Create PayPal BuyNow Button - Create step2

This step allows the button to be saved for future use. This can be useful as it enables the configuration of a previously used button to be reviewed. Also this button may be duplicated and a minor change performed to create a button for a similar product.

I chose to configure a limit on the number of products available. For a physical product you may prefer not to do so – if there is a shortage then stock can be replenished.

Click on Step 3 title bar to progress.

Create PayPal BuyNow Button - Create step3

Step 3 offers a number of options.

You may wish to enter a link to pages on your website for the completion and cancellation of the payment process.

Click on Create Button the bottom of the page.

Add your button code to your webpage

The next page is a summary of adding the button to your website, and the code to be pasted in.

Create PayPal BuyNow Button - Summary and Code

When adding the code to your website be sure to paste it in the HTML code view of the editor.

 

Adding a quantity option

The button creator on the PayPal website doesn’t include the option to create a quantity selection. To implement this the code for the quantity should be added.

The quantity may be included as either a textbox, allowing the website visitor to enter their own choice. Note you may bneed to add protection against the entry of non-integers.It looks something like:

<table>
<tbody>
<tr>
<td>Quantity:</td>
<td><input name="quantity" type="text" value="1" /></td>
</tr>
</tbody>
</table>

Or to control the quantity selection a drop down list may be added.

<table>
<tbody>
<tr>
<td>Quantity:</td>
<td><select name="quantity">
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select></td>
</tr>
</tbody>
</table>

Whichever of these is chosen it will require editing of the button code generated on the PayPal website.