Mosne Hero

外掛說明

This plugin extends the core/cover block with separate mobile and desktop background images and sizes.
This increases the performance of the website by loading the smaller image on mobile devices and scores better in the Core Web Vitals.

Configuration

In the Settings > Mosne Hero page you can configure the mobile image size and the breakpoint at which the mobile image is displayed
Note that this is a new size, so you will need to regenerate the thumbnails using a plugin like Regenerate Thumbnails for existing images to use the new sizes.

In the Editor

Add a cover block and select the “Hero Cover (Mobile & Desktop)” variation.
Now you can see a new panel with the following options:
Mobile image : You can also select a custom image for the desktop and the mobile view.
Mobile image size : choose the size that perfectly fits your design.
Focal point : You can also select a focal point for the mobile image.
Alt text : Add alternative text for the mobile image. (Leave empty if it is a decorative image)
High fetch priority : force the high fetch priority attribute if the image is above the fold.
If you use a featured image, leave the mobile image empty and the plugin will use the mobile size for the featured image for the mobile view.

Key Features

Separate mobile and desktop background images and sizes
Configure the mobile image size and the breakpoint at which the mobile image is displayed
It also works with the featured image
Focal point switching for the mobile image
Alt text switching for the mobile image
High fetch priority for the mobile image
Performance-optimized and lightweight
No block library required
Primarily built with native WordPress components

Limitations

The mobile image is not displayed in the block editor
Video background is not supported
Repeated background is not supported
Parallax background is not supported

Stay Connected

螢幕擷圖

Add a block cover with the “Hero Cover (Mobile & Desktop)” variation
Add desktop image and activate the high fetch priority
Add mobile image and select the size that perfectly fits your design
Render of the block in desktop
Render of the block in mobile

安裝方式

This section describes how to install the plugin and get it working.

Upload the plugin files to the /wp-content/plugins/mosne-hero directory, or install the plugin through the WordPress plugins screen directly.
Activate the plugin through the ‘Plugins’ screen in WordPress.

常見問題集

Can I use hooks to configure the plugin?

Yes, you can use hooks to configure the plugin.

add_filter( 'mosne_hero_enable_image_size', '__return_false' );
add_filter( 'mosne_hero_mobile_width', 'your_function' );
add_filter( 'mosne_hero_mobile_retina_width', 'your_function' );
add_filter( 'mosne_hero_mobile_height', 'your_function' );
add_filter( 'mosne_hero_mobile_retina_height', 'your_function' );
add_filter( 'mosne_hero_crop', 'your_function' );
add_filter( 'mosne_hero_breakpoint', 'your_function' );
add_filter( 'mosne_hero_settings', 'your_function' );

This will disable the image size registration.
This will return the mobile width and the mobile retina width.
This will return the mobile height and the mobile retina height.
This will return the crop option.
This will return the breakpoint.
This will return the settings.

使用者評論

這個外掛目前沒有任何使用者評論。

參與者及開發者

以下人員參與了開源軟體〈Mosne Hero〉的開發相關工作。

Mosne / Paolo Tesei

將〈Mosne Hero〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣？

任何人均可瀏覽程式碼、查看 SVN 存放庫，或透過 RSS 訂閱開發記錄。

變更記錄

0.1.1

Public Release

0.1.0

First Release

評分

這個項目尚無任何評論記錄。

新增使用者評論

查看全部使用者評論