web.config Redirect non-www to www

That often looked for website redirect from the non-www version of the website URL, address, to the www version.

In this case the redirect is for a Windows hosted website, using the web.config file to set the redirect rules.

I wish to avoid adding the redirect within the website coding. By taking advantage of the redirect rules within the web.config file. This will make them readily available and can be edited without recompiling the website code.

Access your website either using FTP or the editor/manager within the housing website control panel.

The file to be edited is located at the root of the website. This may be a directory down. Check if you have a directory such as public_html.

It’s easier to edit the content of the web.config file of is laid out correctly and colour coded. An HTML editor will make your life easier when editing.

Shown below is the code to add the redirect of the non-www address to www to be added to the web.config asp.net website configuration file:

<rewrite>    
    <rules> 
        <rule name="Canonical" stopProcessing="true"> <match url=".*" /> 
            <conditions> 
                <add input="{HTTP_HOST}" negate="true" pattern="^www\.([.a-zA-Z0-9]+)$" /> 
            </conditions> 
            <action type="Redirect" url="http://www.{HTTP_HOST}/{R:0}" redirectType="Permanent" /> 
        </rule> 
</rewrite>

The above is to be added within the section <system.webserver>

As as a bonus below is the HTTPS version too!

<rewrite>    
    <rules> 
        <rule name="Redirect to HTTPS" stopProcessing="true"> 
            <match url="(.*)" /> 
            <conditions> 
                <add input="{HTTPS}" pattern="^OFF$" /> 
            </conditions> 
            <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="SeeOther" /> 
        </rule> 
    </rules> 
</rewrite>

Putting this all together gives:

<rewrite>    
    <rules> 
        <rule name="Canonical" stopProcessing="true"> <match url=".*" /> 
            <conditions> 
                <add input="{HTTP_HOST}" negate="true" pattern="^www\.([.a-zA-Z0-9]+)$" /> 
            </conditions> 
            <action type="Redirect" url="http://www.{HTTP_HOST}/{R:0}" redirectType="Permanent" /> 
        </rule> 
        <rule name="Redirect to HTTPS" stopProcessing="true"> 
            <match url="(.*)" /> 
            <conditions> 
                <add input="{HTTPS}" pattern="^OFF$" /> 
            </conditions> 
            <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="SeeOther" /> 
        </rule> 
    </rules> 
</rewrite>    

Technically it’s a 301 or 302 redirect. Looking at the code above it can be seen that I’ve used the redirectType parameter value of permanent showing the redirect to be of type 301. web.config rewrite rules to permanently redirect non-www to www.

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

Add a Class to WordPress Body using body_class

For a WordPress website theme I was using the body_ class function in the body tag.

<body <?php body_class(); ?>>

This was adding relevant classes into the body.

I wished to add another class to the body. In this case for a customer  review. For a presentation I wished to provide a comparison between a modern responsive theme and an older style where the page doesn’t resize appropriately.

I added an unresponsive class to the WordPress website via the HTML body which would be used to stop a bootstrap based website from being responsive.

This is the relevant section of the header.php file

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>
<a href="#content" class="skipnav">Skip to content</a>
<div id="page" class="hfeed site ">

To make the change I amended the functions.php file.

Within this you can add the additional classes via the body_class filter. I chose to add just the one class.

add_filter( 'body_class', function( $classes ) {
return array_merge( $classes, array( 'unresponsive' ) );
} );

Reviewing the website source I was able to see the class added, within the body and the website was adopting the presentation fro the additional class.

References

https://developer.wordpress.org/reference/hooks/body_class/

Change WooCommerce Product Category List Order

Changing the order in which WooCommerce displays product categories to create a custom order.

To do this I navigated to the admin page Products > Categories.

On this categories page is shown a list of the various products order with child entries beneath their parent.

Viewing this page there is no textbox along the row to set the numeric order. Checking on the left for adding a new entry, likewise.

Change WooCommerce product category list order

So how is the order of the category entries set?

On the Product category page to chagne the order of the entries simply drag the relevant item up or downto the positin you wish it to take.

Change WooCommerce product category list order move entry

Once an entry has been moved the little spinner will show whilst the updated order is being saved.

After the page has refreshed and the spinner has stopped the parent page has moved. And better still, all the child entries have been relocated too!

Change WooCommerce product category list order reordered

Enable WordPress Missing Post Revisions

WordPress provides post revisions. A great way to step back to a prior version of your post!

Whilst writing blog posts I’ve used the post revisions to check a previous version of a paragraph, or idea. and that all important recovery of a post which has had parts deleted in error.

The post revisions are shown on the right hand side of the Edit Post screen, within the Publish section.

How to enable the post revisions.

If the post revisions aren’t showing

At the top of the page there’s a tab marked as Screen Options. Click on this to expand.

Within this area are the content options which may be displayed. Check that the Revisions check box is ticked.

Click on Screen Options again to close.

The post revisions option will only show once you have saved the post a number of times.

should be option under publish section at top right of post edit page

I have also seen it written that adding

define(‘WP_POST_REVISIONS’, false);

to the file wp-config.php in the root of your website may also be required. I’ve not found that I needed to add this.

Rather than filling the database with lots of post revisions, potentially slowing your website, you can limit the number of post revisions. I like to set this to 20 maximum.

In summary to be able to view the previous post revisions of your blog port ensure that the Revisions check box is ticked in the Screen Options and you’ll need a history of post revisions before it is shown.

WordPress How to Add alt Text to an Image

WordPress makes the management of images easy with the media library.

As described in the article Why add ALT Text to an Image? it’s important to have alt text assigned to an image, for SEO.

In WordPress, to add the alt text click on the media library link, on the left menu.

WordPress Media Library

Find and click on the image which you wish to modify.

Image alt Text WordPress Attachment Details

As shown in the image above, on the left is a picture of the image and to the right options to be completed.

The entry of interest is labeled as Alt Text. Click on the textbox and enter your descriptive text.

In the above image I gave the image the Alt Text description of Red BT Telephone Box.

The alt text should be informative, but keep it succinct.

I’ve left the Title text as per the original file name of the image (as auto-filled). You may wish to make this more descriptive too.

As changes are made the details are updated. Confirmation of this is a small spinner which appears at the top.

Once completed, simply close on the cross at the top right corner to close the pop-up.

Convert SQL Field of Type text to nvarchar(max)

To enable database tables to handle the extended character set languages I was looking to convert fields from type text to ntext.

Aware of the pending loss of support for the field types text and ntext I also chose to convert these fields to nvarchar(max).

SQL server 2016 is removing support for field type text and ntext.

In this example table I had a field called body which was of type text.

The field was to retain its name but to be changed to a type which would support a greater international language.

To prepare for SQL server 2016 I chose to also change it to type nvarchar(max).

Given below is the SQL applied to the table portfolio.

alter table dbo.Portfolio add body2 text
go
update dbo.Portfolio set body2 = body
go
alter table dbo.Portfolio drop column body
go
alter table dbo.Portfolio add body nvarchar(max)
go
update dbo.Portfolio set body = body2
go
alter table dbo.Portfolio drop column body2
go

As can be seen above I begin by adding a second field of type text, called body2.

The field body is then copied to this be field body2.

The old field can now be dropped. You may prefer to check at this point that the data has been copied.

Now to create the new version of the body, giving a type of nvarchar(max).

Once more the data is copied. This time back to the body field.

Perhaps another check of the data copy?

And finally deletion of the temporary field.

Details of what’s in and what’s out on SQL server 2016.

DotNetNuke How to Add alt Text to an Image

Alt text can be added to a DotNetNuke image either at the time of adding the image to the text content, or subsequently if required.

DotNetNuke manages uploaded images and documents through the File Manager.

I prefer to use the file manager to upload and manage my images and documents separately from when inserting content to the page.

With the background work done, images and documents uploaded, I can compose my content for the page, without the disruption involved in uploading an image.

While composing the page content I can click on the image icon within the editor to popup the Image Manager dialogue to make my selection.

DotNetNuke adding image alt text add media

Using the popup Image Manager navigate to and select the image which you wish to insert into your text.

DotNetNuke Adding Image Alt Text

Add further details regards the image, for example the size of the image, width or height, and the element which we are interested in the alt text.

Later on, if you decide to change the text right click on the image to select the properties option, this will open the Properties dialogue.

DotNetNuke adding image alt text image properties

Why add ALT Text to an Image? Well adding alt text to an image is good for SEO, lets visitors understand the context in which you are using the image and for those who are using a screen reader to view your website the text will be spoken.

Change Windows 2008 User Password Lost Current Password

Having lost the current password for a Windows 2008 server user account. How do I change the password?

If I follow the control panel link to the user and look to reset the password, a part of the dialogue requires entry of the current password. Which I didn’t have!

Its possible to get around this requirement from a command prompt.

Right click on command prompt, from the menu, and select to run as administrator

Enter

net user username *

When asked, enter the new password, and re enter for confirmation.

Obliged to confirm that the password change is correct and the anticipated value has been entered I once more tried logging in with a remote desktop session from another computer.

Using the command prompt as opposed to the user control panel I was able to reset a user password without the knowledge of the current password.

 

WooCommerce How to Remove “Showing the single result”

I wished to hide the WooCommerce message “Showing the single result”.

I considered using CSS to hide the relevant content on the page.

This is often a simple approach. Inspecting the page content at a given point with the browser tool to show the div wrapping the content with its id or class.

But WooCommerce reuses the same div when there are more results to be shown.

Therefore simply hiding the div is not an acceptable approach.

Another idea is to test the content to see if it matches and then hide it. Using either JavaScript or jQuery this can be done. But this is getting complicated.

The content will be first displayed as the page is loaded, prior to being removed once the JavaScript Is run. Better to hide first and then show.

Is there not a better way?

If the changes which you are making in the WooCommerce template files are limited it’s much better to interact with the functions.php file of your theme or child theme.

In the theme file functions.php add

remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_result_count’, 20 );

Updates to WooCommerce, whilst they try to limit the update changes to the templates, these do occur. This may result in reviewing and  modifying your copy of the files.

But by editing in just the one file with simple additions this reduces this over head and additional work.

Edit the file functions.php to remove the result count, thus hiding the text Showing the single result.