Images

By default the Total theme does not crop any of your featured images. Some themes include built-in sizes, the problem is this can cause your site to start cropping and saving tons of variations of your images on your server and taking up server space. Total will not crop any images until you define your…

The way the retina works in the Total theme is that any theme function (featured images, Image element, Image Grid, Post Cards, etc) will automatically generate a @2x version of a displayed image if the uploaded image is large enough to generate a version that is at least twice as big as the defined crop…

In the Total theme Image sliders have a 100% width added to the images for design reasons. For example if you have a small image in a slider that isn’t stretched this is what happens: And obviously this looks pretty bad. It causes issues with the slider arrows, captions and slider bullet navigation. The best solution is…

Adding local scroll links to images is very simple and this guide will show you how, but first you will need to know how to add local scroll links to your site. Once you are familiar with creating your local scroll sections the next step is to add the link to your Image element.

If images aren’t being cropped when you have ssl enabled it’s because of security checks the theme makes. Everything should work 100% with SSL as long as things are setup correctly. Make Sure Image Cropping is enabled This may be obvious but first check to make sure on the fly image cropping is actually enabled…

If you are getting an error similar to the one below, please follow the steps to help fix the issue: Example Error getimagesize('PATH HERE'): failed to open stream: No such file or directory in ..../themes/Total/framework/classes/image-resize.php Troubleshooting Steps Please test the following things to try and fix this error before submitting a support request: Correct Permissions:…

In the Total theme by default images inserted to the post do not open with lightbox because it could create lots of conflicts with 3rd party plugins, however, we did include a setting to enable that in the Customizer at Appearance > Customize > General Theme Settings > Lightbox > Auto Lightbox. When enabled if you insert…

If your lightbox images aren’t looking quite right most likely it’s because they are very large and are bigger then the browser’s viewport. Simply go to Theme Panel > Image Sizes and set a custom width for your lightbox images. I recommend somewhere between 1000-1500 width and setting the height to 9999 to keep your…

You can easily define the retina version for any image inline via the data-at2x data attribute. See the example below: <img src="image-url" data-at2x="retina-image-url">

The Total theme has a built-in image resizing function that crops images only as needed instead of the core WordPress post thumbnail function which crops images to every defined size whenever you upload a new image. For this reason Total has it’s own helper functions for returning images in the theme which you can make…

In version 4.5.0 of Total we introduced a new function named “Thumbnail Post Format Icons” which you can enable under the main “Theme Panel” (disabled by default). This will display little icons over the featured images for your default post type (blog posts). For example if you have a post set to the video format…

The Total theme includes a “Secondary Image” option which allows you to define a secondary image for your page apart from the “Featured Image”. By itself the field doesn’t really “do” anything, however it is used in various theme functions for example the Image Swap Overlay. How to Display the Secondary Image? There are various…

In Total 5.11 we added the ability to control the Image element “Mix Blend Mode” CSS property which can be used for all sorts of cool image displays but one of the most common uses is to add an Overlay Color to your image. Step 1: Add a Background to your Image It may seem…