Blog Responsive Cover

Different cover images for mobile and desktop in your Odoo blog

Overview

Blog Responsive Cover allows you to set a different cover image for the mobile and desktop versions of each blog post in Odoo. With a single installation, the website editor includes a new option to upload the mobile cover image directly from the editing panel.

Improve the visual experience for your readers on any device without the need to customize templates or touch any code. The right image is displayed automatically based on the visitor's device.

Features

• Independent cover image for mobile and desktop on each blog post
• New option integrated into the Odoo visual editor to upload the mobile image
• Automatic detection of the visitor's device on the frontend
• Compatible with the Odoo Website drag-and-drop editor
• No need to modify templates or write additional code
• Compatible with Odoo 18 and the official website_blog module

How It Works

The module adds an extra option in the Odoo editor that appears when the cover block of a blog post is selected. From there you can upload a specific image for mobile. On the frontend, the displayed image will adjust automatically based on the visitor's device, showing the desktop or mobile version accordingly. Everything happens transparently, with no impact on performance or the rest of the website.

Benefits

• Improves the blog appearance on mobile devices without affecting the desktop view
• Allows the use of cropped or reframed images based on the screen format
• Increases the visual impact of each article across all devices
• Simple setup directly from the Odoo website editor
• No external dependencies, lightweight and easy to maintain

Configuration

1. Access the editor from the blog view

From the Odoo website, navigate to the blog post you are creating or editing. Click the Edit button in the top bar to activate edit mode. Once inside, select the cover block at the top of the blog post to access its configuration options.

2. Set the desktop image

With the cover block selected, upload or choose the image that will be displayed on the desktop version. This image will act as the main cover and will render correctly on large screens as well as in the general article preview. You can check the result directly in the editor desktop view before saving.

3. Add the mobile-specific image

Switch the editor to mobile view using the device selector in the top bar. In the cover block options panel, a dedicated section for the mobile image will appear, added by this module. Select or upload the image adapted to the vertical format and save your changes. From that point on, visitors on mobile devices will automatically see the mobile image, while desktop visitors will continue to see the main cover.