Most of the time, developers and store administrators are confused about the image height and width, so we are covering it here. Most image sizes are managed from the admin sections, such as the category image size, product images, and so on. We can set most of the image size from the admin dashboard menu, go to System | Settings. Then, edit the store for which you want to edit the image size. The following screenshot shows the Store List from which you can select your particular store to edit by clicking on the edit icon shown in blue:
After editing, you have to click on the Image tab. You will notice that most of the image settings are done from here except for the module image setting. In the Image tab, you will see something like this:
We can change the logo from here, so when designing a new OpenCart theme, we must take care to ensure that the logo is retrieved from the database. Likewise, the favicon icon is also inserted from the Image tab, so we should take care about that as well. Category image sizes are also managed from here. Let's check out the Desktops category page, you can see the page by hovering the cursor over Desktops in the menu and clicking on See All Desktops. This is what you will see from the default options:
Now, change the * Category Image Size: input field from 80 to 770, and the next field from 80 to 100 (the length is in pixels). Then, refresh the Desktops category page link and you will see the changes in the Desktops category image size. Similarly, images in the product details page are also adjustable. The product's main image is adjustable from * Product Image Thumb Size as well as additional product image size. The following screenshot shows the product image thumbnail and additional product images:
When you click on the main image or the additional image, it then pops up to show a larger image in the color box, whose image size is managed by the * Product Image Popup Size:.
In the same way, related products' images, the compare image size, image sizes in the wish list, and cart image sizes are all managed from image's settings page.
Tip
Downloading the example code
You can download the example code fies from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the fies e-mailed directly to you.
We will now see how to manage modules in OpenCart 2.0.1.1. Layout and position play a major role in making the frontend modular. We will see how to manage modules in OpenCart 2.0.1.1.
Most of the module's image dimensions are managed from the module settings. So, when integrating the module into the theme, we have to take care of the settings. Consider this: in the Latest product module, there are settings for number of limiting the number of products to show, image width, and image height, as shown in the following screenshot:
You can see this by going to the admin dashboard's menu and then to Extension | Module. Edit the Latest module. You can insert the width and height of the image to be shown in the frontend in the module. It is flexible, which means that you can show images in different sizes on different pages and positions. So, while creating the theme we have to take care of this as well.
A Banner is an image shown in the top, bottom, right, or left sidebar of a website, especially for the promotions. Banners can be uploaded and customized from Administrator section | System | Design | Banners. These banners are used in the Banner modules, the Carousel module or in the Slideshow module. If you want to add new banners, you have to navigate to Administrator section | System | Design | Banners, then click the Add New button showing a + symbol and enter the banner name; after that, click on the Add Banner shown with a + sign button, and you will have to insert the following details:
Banner name: Add in a suitable name for the banner
Status: This should be set as Enabled to enable the banner
Title: Enter a title that will be shown to the customer when he hovers the cursor over the banner
Link (icon): This sets the URL to which the banner will direct the user to
Image (icon): Upload your favorite image for the banner
The following shows the Banners page that has the preceding fields in it:
After filling in the input fields, click on the save button, and your banner is ready to use in the modules.
OpenCart is a module-based system that allows us to extend this functionality. We can add many modules and remove them as per our requirement. Go to Administrator | Extensions | Modules, and then click the green + sign to install the module. If it is already installed, you can click the red - sign to uninstall the module, as shown in the following screenshot:
In OpenCart version 1.5.6.1, all layouts and positions need to be chosen while activating the module, but from OpenCart 2.0.1.1 onwards, the module section and the layout section are different. We first activate the module from the extension section, and choose the activated module and position for each layout. Let's show the Banner module in the home page.
Go to Administrator | Extensions | Modules | Banner. Then, click on the green + button to install; if it is already installed, click on the blue edit button. When you click on the blue edit icon, you should see the following screen:
These are the options seen in the preceding screenshot:
Module Name: Enter a suitable module name
Banner: This contains the settings to choose from the list of banners
Width and Height: Insert the dimensions of the image that will be shown on the frontend; enter
180and150in the Width and Height fields respectivelyStatus: This enables the banner module
Likewise, we can activate the Carousel module in our OpenCart pages. Go to Administrator | Extensions | Modules | Carousel, and click on it if it is not installed. If it is installed, you can click the blue edit button, and then choose the banners that you wish to show, the dimensions of the images, and the status of the Carousel module. In a similar way, we can activate the slideshow module.
OpenCart has default page layouts that are based on the route of the page. Some of the layouts can be found by going to Administration | System | Design | Layouts. They are Account, Affiliate, Category, Checkout, Contact, Default, Home, Information, Manufacturer, Product, and Sitemap.
To manage layouts, perform the following steps:
Select any one of the layouts mentioned previously; let's consider the Account layout. You have to provide the layout name and then choose the Store and value of Route as account/%. This means that the module will be seen where the route value contains account for that store. If your URL is
http://example.com/index.php?route=account/login, the module is shown asroute=account. If you want to show the module in the account section whereroute=account, you have to add module, choose the module that you want to show, select the position in which the module lies, and insert the sort order for that module. If you don't see module in the module dropdown, then you have to install it first by going to Administrator | Extensions | Modules.You can choose four positions:
content top,content bottom,column right, andcolumn leftas per your wish as to where the module should be seen. The Sort Order field shows the module to be displayed first when there are multiple modules in the same layout and position. Then, the lower number has higher priority. Let's take an example, as shown in the following screenshot:
As seen here, we have added the Category module with its position set to
Column Right. Now, if you want to show the Account module at the top and the Category module just below it, in this case, the Sort Order option plays an important role. As seen in the screenshot, the Account module will show up first, and then the Category module show up below it. In this way, you can add many modules in any position and show them in any order as you please.If you want to show the modules in the Affiliate section, you have to choose the Affiliate layout as the route is
affiliate/%, that is, anything starting withroute=affiliate/in the URL.Similarly, for other layouts, check the route at Administrator | System | Setting | Design | Layouts | Edit, see the route, and check the URL route; you will find where the module will show on choosing the layout name.
You can add a new layout from Administrator | System | Setting | Design | Layouts by clicking the blue plus sign at the top right corner. Then, insert the layout name, like
Special, then click on Add Route, and choose the Default store to show in the default store, or you can choose required store and insert value of Route to product/special. Then, click Add Module and choose one of the module listed (in our case Category), then choose the positionColumn left, and then click on the save button to save. Now, check the front special page; you will see the category module on the left, as shown in the following screenshot: