How to Resize Images for Responsive
Is your website powered by Virteom CMS? Do your images look good on your laptop but not on your 4k monitor? Are your pictures a good size on desktop but become oversized or deformed on a mobile device? More than likely you’re using pixels to set the dimensions of your photos, but is that the best way? This article will explain how you should be sizing the images on your Virteom powered website so that they look good across all devices.
As you make edits and additions to the pages of your website you find yourself adding images to support your content. Typically, the size of your image is too large for your page and with the popup picture below you set dimensions of your image using pixels:
Setting your images dimensions using pixels is what makes your image stretch on your cell phone or from one screen to another. You don’t want to use pixels to set the dimensions of your images.
For example: Here we have a picture of a tablet:
Once we add it into the image uploader we see the width and height of this image is 1000px by 667px. If we kept it that size, it would be very large on the page and it would take up a lot of space. If it was viewed on a mobile device, it would appear stretched out and require you to scroll left and right. Take a look:
Your first instincts may be to resize the image using the width and height that are in the image properties. If we resize the image to 600px by 400px and preview the page you’ll see in the browser it looks pretty good, but when we shrink down to a mobile view the image is stretched. See below:
How do we prevent the image from stretching? How do you predict what the image will do when it looks good in browser? We suggest using percentages as the width instead of just using a number.
If you want your image to take up the entire width of your content region you would type 100% in the width box and leave the height blank. Like this:
Using percentages keeps your image relative no matter what screen your viewing it on. That way it doesn't look stretched out, overflow into another content region (or overlap text) and you won't have to worry about checking it on every device. See below:
Don’t want your image to take up the entire width of the content region? You can use any percentage to vary the size of the image. Only half? 50% - A quarter? 25%. You can use any variation of percentages! Your website visitors will be able to view your images seamlessly.
Want to see with your own two eyes how the images resize? Take the coner of your browser on this screen and resize it down to the smallest window you can. All of the images in this blog are using percentages. You'll see they change and adapt with the size of your browser window.
As you add photos on your website always use the percentages rule of thumb. It will keep your images in tact across all devices. If you have any question – contact a Virteom representative today!
Email Footers with Dynamic Advertisements, Company Wide
Virteom has the ability to manage all of your employees email footers easily and effectively. The first thing you will want to do is add each employee as a member of the Virteom system. Do this by clicking on the 'Manager' option on the top toolbar and then clicking on the 'Members' option on the left toolbar. Every member in the system can have the capability of having their own footer. So this can be an 'Admin' or an 'Employee' as as example. But it is not limited to those types. Add a Member Now add each employee of your organization as a member to the system. Do this by clicking 'Add New Member' and fill in their information. Managing Your Email Footers Company Wide Once you are done adding each employee you will notice that there is an Email Footer in the lower right with a button called click here. When you click this button a new window will open up and a generated email footer for that employee will
How to Add Images to Your Website
One of the easiest ways to add some flare to your website is to add images. But how do you add images to your Virteom website? In this article we'll cover all the bases on just that. Preparing your image for upload First things first, we'll need you to prepare your image for upload. There are a few things you should do to your image before uploading your image to your website: Make sure your image name does not have any spaces in it. We suggest replacing any spaces in your file name with dashes (-) or underscores (_). Optimize your image for the web. To keep your website running at top speed, you'll want to optimize your image for web. How do you do this? Use an image optimizer like this one. Uploading your new Image into Virteom Editor Now that you have prepared your image to be uploaded, you're locked in loaded to upload it to the Virteom CMS. Go to your website and log into your Virteom editor. Once you are logged in go to
