Graphic Design for Documentation Images

Husnain Ali is our professional go-to Graphic Designer who works on improving our images. All the team members can access the updated images on Dropbox.

Dropbox path: ../Dropbox/Support/Documentation/Graphic Design/

In the Dropbox path mentioned above, you can:

  • Add images that need work at ../Dropbox/Support/Documentation/Graphic Design/NEW/
  • Next, add details such as date, what needs to be improved in Images – CF7Skins.txt with the addition of each new image. The details must be clearly stated.
  • Once updating the image is complete, the new image is available at ../Dropbox/Support/Documentation/Graphic Design/DONE/

Refer – Documentation Images – Graphic Design

Contact Form 7 5.0

Change Log

  • Additional settingson_sent_ok and on_submit have been removed.
  • New additional settingskip_mail
  • Acceptance checkbox: Allows the specifying of a statement of conditions in the form-tag’s content part.
  • Acceptance checkbox: Supports the optional option.
  • New special mail tags
    • [_site_title][_site_description][_site_url][_site_admin_email]
    • [_invalid_fields][_user_login][_user_email][_user_url]
    • [_user_first_name][_user_last_name][_user_nickname], [_user_display_name]
  • New filter hooks: 
    • wpcf7_upload_file_namewpcf7_autop_or_notwpcf7_posted_data_{$type}, and wpcf7_mail_tag_replaced_{$type}
  • New form-tag features: zero-controls-container and not-for-mail

Refer Contact Form 7 5.0 – Change Log

Acceptance Checkbox

Acceptance checkbox is one of the form-tag types that Contact Form 7 has long provided. It consists of a simple checkbox dedicated to confirming the submitter’s consent on a given condition.

We decided to redefine this feature because it was no longer adequate to meeting increasing requirements. Obtaining explicit consent in advance of collecting personal data is now considered essential in terms of protecting privacy rights. Therefore, it is important to record who has consented to what conditions if there is a possibility of reusing the personal data.

With the new acceptance checkbox, you can specify a condition to consent to in the content part of the form-tag, and if the submitter consents to it, the fact will be recorded in a mail message, or in the database (Flamingo).

Refer Acceptance Checkbox

A Shortcode for Creating Link to a Post or Page

This site uses many internal links to relate to other pages. It is very easy to create a post/page link to other page using WordPress editor, but once we modify the page slug, move the page to other hierarchy, or move the site completely with different domain, we will got 404 not found page.

For a workaround for this issue, we should avoid static link to a post or page, and use a shortcode that generates the link automatically based on post ID. We can find the ID of post or page in respected admin edit screen as screenshot above from https://team.cf7skins.com/wp-admin/edit.php?post_type=page for Page type.

Creating Shortcode Link

Creating a shortcode in WordPress is easy, we just need to register our shortcode function using add_shortcode and shortcode_atts to combind user shortcode attributes with default shortcode attributes.

Here is how the code looks like:

function cf7skins_link( $atts ) {
	$atts = shortcode_atts( array(
		'id' => 701,
		'text' => '',
	), $atts, 'link' );
	
	extract( $atts, EXTR_SKIP ); // extract attributes
	
	if ( $permalink = get_permalink( $id ) ) { // return string if found or false.
		$title = $text ? $text : get_the_title( $id );
		return "<a href='$permalink'>$title</a>";
	} else {
		return 'Error, the post or page does not exist!';
	}
}

add_shortcode( 'link', 'cf7skins_link' );

The shortcode takes two attributes or parameters, id for the post ID and title for custom post/page title. If title is not set, than it will use the post title itself. The function will finds the post ID, create the link if found, or display error message if not exist.

To use the shortcode, simply add a square bracket with link string, provide the post ID and custom title if needed.

[link id="144"]

That’s it, with a few lines, we can add post/page link automatically, and save the site from 404 suffering.

What are Gifs and Why Should we Use them

Gif is a sequence of images that are looped endlessly . You can visualize them as a 5-15 second video ( without audio ) that keeps playing without the user having to click the play button. 

Here is an example of a Gif that I created to show what happens when we change the CF7 Tag using select dropdown that was recently added in ‘CF7skins Visual‘ addon. 

Changing CF7Tag directly from field input (open image in new tab to view full version of image)
  • If I would have opted to use either .jpeg or .png images then it would be impossible for me to show this happening in realtime also I would have to write a step by step tutorial and add an image for each step to convey whats happening. It still wouldn’t match the experience one gets by seeing things happening live.
  • The Other option that could have been used is creating a Video. This option was ruled out because I  had to upload the video to some hosting website like youtube, vimeo and then embedded it into bitbucket comment ( this is where this gif is posted by me ). Also the videos are usually have bigger size and requires the users to click on play button to see the content. 

When Should I use Gifs?

This is completely your wisdom. I prefer Gifs when I want to show something happening in live, it is self conveying ( doesn’t require audio ) and it isn’t too long ( 5-15 seconds max ).

Should I Always use Gifs?

As with everything .. use of too many Gifs in a post/comment can be distracting because they keep animating and it becomes difficult to read text content when there is something that is contentiously asking for your attention by animating.

How to Create a Gif Image?

There are addons for Google chrome, apps for windows and Mac that are specifically targeted for creating Gif Images. I can’t personally recommend or mention them here because I haven’t used them but I know they are there.

I use Camtasia Studio 8 which is more known for creating and editing videos rather then Gifs but it has functionality to make one. In this tutorial I will guide you through the whole process just in case you decide to use Camtasia.

  • Open Camtasia Recorder by clicking on ‘Record‘ button in camtasia studio. Here you can select the dimensions for the screen to record.
  • Now click on the ‘rec‘ button . It will give you a timer of 3 secs before it starts recording your screen.
  • Once you have recorded you steps press F10 key to stop recording .
  • Now Camtasia studio will open automatically. Here you can modify the recorded video ( add markers, zoom the video, increase its speed etc). If you don’t know about any camtasia studio editing features even then its not an issue. 

  • Now click on ‘Share‘ in the top menu and then go to ‘custom production‘ . Select ‘Gif‘ as file type and keep pressing ‘Next‘ button until you are asked for file name and location. Add the name and location and then your file will be processed and saved.. ready to be uploaded in posts/ comments etc.

Note: Bitbucket has a limit of 1mb size per image. If any of Gifs is exceeding that limit then you have to edit ( cut unnecessary sequences from your recording, increase speed or re-record the video ) before saving it as Gif and then re-uploading it to bitbucket.

Increasing Awareness when Writing Articles

Every article you write should increase the awareness of CF7 Skins. When looking for ideas or topics on what to write, look no further than a Google search. 

5+ million CF7 Users, 1000’s have problems using CF7 each day, we are there with answers to help them solve their particular problems

For example, search ‘Contact Form 7 getting started’ or ‘Contact Form 7 how to start’. Take the top few suggestions that are shown and fabricate your own Google search result.

How do you want or imagine your article appearing in that top list?

Tip: Use a SERP preview generator to help ensure you stay within pixel and character limits. 

Once you know how you want the search to appear, write the article in that category or create the category you need.

For additional help or ideas already waiting, see what is happening with CF7 Skins Support and check out the CF7 Skins Google Sheets – Blog Content Planning

Use kb-dev.cf7skins.com for most initial documentation work

I think we should avoid using cf7skins-test.project.buzztoned.com for initially creating blog posts. Rather we should just use kb-dev.cf7skins.com as we do for most other changes to pages, posts & faq.

I originally did this so we were using the same theme as the live blog. I’ve found we can easily make any necessary changes when we schedule the post on the live site.

All blog posts eventually also get published on kb.cf7skins.com so they need to look OK on both the themes we currently use.

What you you think? Please add your Comments to this post.

Update

  • we no longer use cf7skins-test.project.buzztoned.com at all
  • we use blog.cf7skins.com & blog-dev.cf7skins.com when creating new blog posts
  • blog posts no longer get published on kb.cf7skins.com

We now use Content Audit to help us better manage our documentation

We are now using the Content Audit plugin to help us better manage changes to our documentation.

All documentation pages are now added to this system so we can:

  • use it to see what work needs to be done on each site
  • show list of items at each stage
  • use it before Slack meetings to see work that needs to be done.

You can create filtered lists of the content.

When you visit each site as a logged in user you will also see Content Audit information at the top of each item.

See Using Content Audit for more information.

Updating existing plugins using zip

When using your a zip file to update an existing plugin, it seems it is not possible to just upload the zip as you would with new plugins.

If you do, you get an error saying the destination folder already exists. 

I expected WordPress to override this automatically, especially if it find the plugin is just a new version of the last one, but apparently not.

There are two ways to avoid this:

  1. Remove the plugin completely before adding new version of it.
  2. Use an FTP client to override the files.

Also see: [#9757] Allow Plugin/Theme updates from a uploaded .zip file

Better tool for documenting screenshots

I'm looking for a better tool for documenting screenshots like this:

I'm currently using Awesome Screenshot via Chrome Extension but find it really cumbersome.

I'm Windows based so can't use any fancy Mac only stuff. I've also tried the following which I didn't like for various reasons:

If you have any suggestions, please add them on this post.

You can also add a Comment if you want – you can do that on all our posts.