Display and Image Size Options
When you want to present a content on a web page, the first thing that comes into your mind is the skeleton and shape of your content. Jupiter X gives you a full set of options to first build up the skeleton of your website and then style it as you wish. These options are giving you enough flexibility to set up your whole website quickly or override your global settings in different pages and post types and archive pages. In this article, we will explain the Display options that shape your website and then explain the Image Sizes and how you can create and choose the proper image size for your content.
In this article
Maybe the most important factor that effects on your other design decisions is that your website needs to be Full Width or Boxed. Then based on this decision, you choose your content and other layout settings such as Sidebars, single page templates, page titles, headers, footers and every other thing that relates to creating the skeleton of your website. These options are explained one by one on their own categories, But, the displaying options for each part is something we are going to discuss here.
Show/Hiding and Toggle options
In some places, you can globally show/hide the theme parts, such as titles, subtitles, images, metadata. These options can be found on Archive and Single page settings such as Blog, Portfolio, Shop and in the Header, Footer, Search template and Page Title bars.
For example, you can simply refuse to show the Featured Image on Blog single posts by deactivating its option in Customizer -> Blog -> Blog Single -> Settings -> Display Elements.
Please note that you will still see the styling option even when it’s removed.
Also, there are some toggle options in other places which does the same but their job is to enable disable a functionality, rather than show/hiding something on a page.
Displaying Options are not only show/hiding something. But it’s how you choose the layout of your content too. Rather than the Page Layout (Link to the Page Layout article) options, you can choose how your single content look. It also effects on other options if you choose a different template for your single pages.
Jupiter X uses Beans Framework in the backbone and it has a great image resizing tool powered with a caching feature to ensure your website gets the best performance results. It means that it is having an Adaptive Image Resizing technology which shows resized images, retina ready, based on the screen sizes. So, in the mobile devices, the image source would be a smaller size of the original image and it loads pretty much quicker than the original image.
Although all the image sizes in the Jupiter X template resize automatically, there are still some options to explain. Here is every place that an image exists and you need to know where does it get resized:
|Place||Where it gets resized?||How to change its size?||Screenshot|
|Blog single page||Automatic Adaptive Image Resizing||You can only change the height of the image viewport in Customizer -> Blog -> Blog Single -> Styles -> Featured Image.||
|Portfolio single page||Automatic Adaptive Image Resizing||You can only change the height of the image viewport in Customizer -> Blog -> Blog Single -> Styles -> Featured Image.|
|Blog Loop Thumbnails||Elementor Settings||In Element Settings, set the size|
|Portfolio Loop Thumbnails||Elementor Settings||In Element Settings set the size|
|Single Page Image||WooCommerce Settings||Customizer -> WooCommerce -> Product Images|
|WooCommerce Archive Page
|Thumbnail Images||WooCommerce Settings||Customizer -> WooCommerce -> Product Images||
Jupiter X also offers a way to create custom image sizes and use it anywhere you want. After creating the custom image size, you can use it in the Elementor or any other page builder you are using. In order to create an image size, please:
Now you will be able to see the new size in Elementor and other page builders.
By Default, Jupiter X only has one Custom Image Size which has 500×500 pixels dimension.
Where does the image files store?
As soon as you create an image size, it will generate a new image file resized by the dimensions you assigned to it in the wp-content/uploads/ folder. However, the Adaptive Image Size technology of Jupiter X (based on Beans Framework) stores the images in wp-content/uploads/jupiter/images/ folder. These images will generate on the fly, so before anyone request for an image to load, it is not generated. However, it will only generate once unless you remove that image from that folder. Here is more info on how this process works.
You are free to remove all the images stored in wp-content/uploads/jupiter/images/ folder and let it regenerate on the fly, but there is also a button that let you flush everything there by one click. In order to remove that folder, you simply need to click on Flush Images in Appearance -> Settings.