Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

Over 10 years we helping companies reach their financial and branding goals. Onum is a values-driven SEO agency dedicated.

CONTACTS
Programming

Responsive Screenshot Programming Challenge

responsive screenshots card

Programming is one of our shiniest jewels at Mindful Coding Solutions. If you’re a web developer, you should want to show off your finished product to potential clients so they can see what great work you do. In today’s web design standards, it’s usually a “mobile-first” situation, which means web designers will build their websites for viewing on mobile phones and tablets before designing them for desktop computers. A great website will look amazing and be completely functional on any viewport size, whether it be desktop, tablet, or mobile phone. A design portfolio should show what your website looks like on several viewports, to show your client that it will look great no matter where their customers are viewing it. So, you need to provide them some screenshots.

In this first iteration of Mindful Monday Marketing Magic, we will take a look at how we generated a screenshot that shows all three of the important viewport sizes, while taking a lot of the manual copy and pasting and Photoshop that one usually has to do completely out of the picture (pun intended). This kind of programming expertise is one of the many great services offered by Mindful Coding Solutions.

Before Programming – The Container

So we could just throw all three screenshots in an image, but it would look much nicer with a styled container, so we found a image at Dreamstime that already had our three viewport concept.

Our Template

The Screenshots

Next, we wanted to use a program to take the screenshots we needed, in the exact dimensions we needed to fill those blank spaces in our template. We host a VPS with Scala Hosting that has everything we need to build a new PHP project. Our project uses an open source package built by a Belgian developer called Browsershot, which also has a prerequisite of another server component called Puppeteer. Our programming challenge is to figure out how to calculate all the different cuts of images we need using the PHP GD Image Library.

The program’s functions execute in the following order:

  1. Grab the first screenshot for the desktop version (1920×1300)
  2. Grab the second screenshot for the tablet version (1024×768)
  3. Grab the third screenshot for the mobile version (376×667)
  4. Assemble the screenshots on our template space
  5. Merge them with the template (with transparency intact)

The Magic code

The last step of the process is one of the most important.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function imagecopymerge_alpha($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h, $pct){
    $w = imagesx($src_im);
    $h = imagesy($src_im);
     
    // creating a cut resource
    $cut = imagecreatetruecolor($src_w, $src_h);
     
    // copying that section of the background to the cut
    imagecopy($cut, $dst_im, 0, 0, $dst_x, $dst_y, $src_w, $src_h);
     
    // placing the watermark now
    imagecopy($cut, $src_im, 0, 0, $src_x, $src_y, $src_w, $src_h);
    imagecopymerge($dst_im, $cut, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h, $pct);
}

After assembling our 3 screenshots and using the “magic code” to merge them with the alpha layer intact. Below is our finished image.

To make it work without editing the code every time we wanted to generate a new set of screenshots for another website, we built a query string that includes the URL we want to pull. And for extra security, we added a static API key parameter that allows only people with a specific alphanumeric code to run our program. It’s isn’t likely that people will find where our public script lives, but that parameter is there just in case.

After reading all of this, you might be thinking to yourself “why would I need this in my business”. Our point it that If you’ve got a business need and can’t quite find an available solution, it might be time to start thinking about a custom-built programming solution. You can reach out to us with your requirements by using our contact form.