WP-Plugin SMFI

» Simple Multiple Featured Images (short SMFI) «

SMFI

What is SMFI?

If you create posts or pages on Wordpress, you usually have the option of attaching an image as a so-called »Featured Image«. If the featured image is supported by a Wordpress theme, it will be displayed on the website. It is a very popular and easy-to-use feature. However, it often happens that one wishes to add more featured images than one. This plugin provides a remedy. The plugin allows you to add multiple featured images. It integrates seamlessly into the wordpress design and acts as if it were an integral part of Wordpress.

For Developers

The plugin is primarily intended for web developer and web designer! As a web developer and web designer, I often have to give my customers the opportunity to add pictures to their posts, pages or custom posts as simply as possible. It has to be as easy as possible because the customers have no knowledge of web applications and do not have the time to deal with it. They do not want to spend too much time on their website, but at the same time they want to be able to add and adjust important content (and especially pictures) quickly, easily and independently. Existing gallery plugins or other featured images plugins are often too complicated to use for them. That is why I developed this plugin. If you feel the same way then you should try this plugin.

Feature overview

  • It is possible to add more featured images.
  • The number of the featured images can be defined dynamically.
  • The displayed metabox title can be configured via hook.
  • The post types or individual posts in which the plugin should be used can be configured via hooks.
  • The selection of a new images is the same as the usual featured image of wordpress.
  • A selected image can be changed like the usual featured image of wordpress.
  • Basic shortcodes for showing the images as a gallery or a slider in the frontend. The shortcodes can be inserted via buttons in the classic editor (TinyMCE).

Additional Information

You can find the plugin on its official wordpress plugin directory .

Currently no extensions to the plugin are planned, because I personally do not need any further functionality for my projects. I will limit myself with the plugin to bug fixes. But if somebody needs a certain extension or wants some functionality, I'm ready to extend the plugin.

Getting API

The plugin provides an extra API for web developers. Various information about the images can be requested via this API. To get the API proceed as follows:


	...
	if ( class_exists( 'Simple_Multiple_Featured_Images' ) && isset( $simple_multiple_featured_images ) ) {
		$smfi_api = $simple_multiple_featured_images -> get_public_api();
		...
	}
	...
	}
											

Available Functions

1. get_all_featured_images_tags( $post_id, $img_size = 'thumbnail', $attributes = '' )

Description

Returns image tags of all featured images for the given post ID.

Parameter

- int - $post_id - The ID of the post.
- string|array - $img_size - Optional - The wanted image size. Accepts any valid wordpress image size, or an array of width and height values in pixels (in that order). Default 'thumbnail'.
- string|array - $attributes - Optional - Attributes for the image markup.

Return

array - All image tags or empty array.

Example:

array(3) {
[0] => img tag of image 1, generated via wp_get_attachment_image,
[1] => img tag of image 2, generated via wp_get_attachment_image,
[2] => img tag of image 3, generated via wp_get_attachment_image
}

Usage

...
/*
* Get the image tag for each featured image of a post with the ID 14.
* We want to use the 'medium' images of wordpress.
*/

$smfi_api = $simple_multiple_featured_images -> get_public_api();
$result = $smfi_api -> get_all_featured_images_tags( 14, 'medium');
...

2. get_featured_image_tag( $img_id, $img_size = 'thumbnail', $attributes = '')

Description

Returns image tag of the given image attachment.

Parameter

- int - $img_id - The ID of the image attachment.
- string|array - $img_size - Optional - The wanted image size. Accepts any valid wordpress image size, or an array of width and height values in pixels (in that order). Default 'thumbnail'.
- string|array - $attributes - Optional - Attributes for the image markup.

Return

string - Image tag or empty string. The image tag is generated via wp_get_attachment_image.

Usage

...
/*
* Get the image tag of image attachment with the ID 365.
* We want to use the 'full' image size of wordpress.
*/

$smfi_api = $simple_multiple_featured_images -> get_public_api();
$result = $smfi_api -> get_featured_image_tag( 365, 'full');
...

3. get_all_featured_image_ids( $post_id )

Description

Returns all featured image attachment IDs for the given post.

Parameter

int - $post_id - The ID of the post.

Return

array - The image attachment IDs as strings.

Example:

array(5) {
[0] => '321',
[1] => '112',
[2] => '453',
[3] => '25',
[4] => '58'
}

Usage

...
/*
* Get the image attachment IDs of a post with the ID 14.
*/

$smfi_api = $simple_multiple_featured_images -> get_public_api();
$result = $smfi_api -> get_all_featured_image_ids( 14 );
...

4. get_image_url_by_id( $img_id, $img_size = 'thumbnail' )

Description

Returns the image url.

Parameter

- int - $img_id - The ID of the image attachment.
- string|array - $img_size - Optional - The wanted image size. Accepts any valid wordpress image size, or an array of width and height values in pixels (in that order). Default 'thumbnail'.

Return

string - The image url or empty string on failure.

Usage

...
/*
* Get the URL of the image attachment with the ID 44.
* We want to use the 'medium' image size of wordpress.
*/

$smfi_api = $simple_multiple_featured_images -> get_public_api();
$result = $smfi_api -> get_image_url_by_id( 44, 'medium' );
...

5. get_image_title_by_id( $img_id )

Description

Returns the image title.

Parameter

int - $img_id - The ID of the image attachment.

Return

string - The image title or empty string on failure.

Usage

...
/*
* Get the title of image attachment with the ID 44.
*/

$smfi_api = $simple_multiple_featured_images -> get_public_api();
$result = $smfi_api -> get_image_title_by_id( 44 );
...

6. get_image_alt_by_id( $img_id )

Description

Returns the image alternate text.

Parameter

- int - $img_id - The ID of the image attachment.

Return

string - The image alternate text or empty string on failure.

Usage

...
/*
* Get the alternate text of image attachment with the ID 44.
*/

$smfi_api = $simple_multiple_featured_images -> get_public_api();
$result = $smfi_api -> get_image_alt_by_id( 44 );
...

7. get_image_caption_by_id( $img_id )

Description

Returns the image caption.

Parameter

- int - $img_id - The ID of the image attachment.

Return

string The image caption or empty string on failure.

Usage

...
/*
* Get the caption of image attachment with the ID 44.
*/

$smfi_api = $simple_multiple_featured_images -> get_public_api();
$result = $smfi_api -> get_image_caption_by_id( 44 );
...

8. get_image_description_by_id( $img_id )

Description

Returns the image description.

Parameter

- int - $img_id - The ID of the image attachment.

Return

string - The image description or empty string on failure.

Usage

...
/*
* Get the description of image attachment with the ID 44.
*/

$smfi_api = $simple_multiple_featured_images -> get_public_api();
$result = $smfi_api -> get_image_description_by_id( 44 );
...

9. is_smfi_showed()

Description

Checks if the current post uses the SMFI featured images.

Parameter

No parameter.

Return

bool - True if current post uses the SMFI featured images else false.

Usage

...
/*
* Check if the featured images are used in the current post.
*/

$smfi_api = $simple_multiple_featured_images -> get_public_api();
$result = $smfi_api -> is_smfi_showed();
if( $result ) {
   // Get the featured images via SMFI API and do your stuff with them.
}
...

Using Hooks

1. smfi_metabox_title

Description

Filters the title of the metabox.

Parameter

string - The title.

Usage

...
/*
* We change the metabox title.
*/
add_filter( 'smfi_metabox_title', 'change_smfi_metaxbox_title' );
function change_smfi_metaxbox_title( $old_meta_box_title ) {
     return 'My new title';
}
...

2. smfi_supported_post_types

Description

Filters the supported post types of this plugin. Only the supported post types will display the featured images. If something is returned that is invalid, the post types 'post' and 'page' are used by default.

Parameter

array - The supported post types.

Usage

...
/*
* We determine which post types should show/support the featured images.
* By default 'post' and 'page' are supported. 
* We also want to support a custom post type.
*/
add_filter( 'smfi_supported_post_types', 'change_smfi_supported_post_types' );
function change_smfi_supported_post_types( $supported_post_types) {
     $supported_post_types[] = 'myCustomPostTypeID';
     return $supported_post_types;
}
...

3. smfi_included_posts_by_id

Description

Filters the IDs of posts which should be explicit included in using the featured images. If you do not want to include an entire post type. Just use a post ID.

Parameter

array - The IDs of the posts which should be included in using the featured images.

Usage

...
/*
* We only want to use the featured images in a post with the ID 293.
* In this case we have to tell the plugin explicit to use the 
* featured images in this post.
*/
add_filter( 'smfi_included_posts_by_id', 'include_posts_by_id' );
function include_posts_by_id( $ids ) {
     ids[] = 293;
     return ids;
}

/*
* In addition, we have to deactivate the default supported post types ('post' and 'page').
*/
add_filter( 'smfi_supported_post_types', 'change_supported_post_types' );
function change_supported_post_types( $supported_post_types ) {
     return array();
}
...

4. smfi_excluded_posts_by_id

Description

Filters the IDs of posts which should be explicit excluded from using the featured images.

Parameter

array - The (int) IDs of the posts which should be excluded from using the featured images.

Usage

...
/*
* We do not want to use the featured images in the page with the ID 423.
* But by default the post type 'page' is supported! So we just tell the plugin to exclude
* the page with the ID 423. The other pages are not affected.
*/
add_filter( 'smfi_excluded_posts_by_id', 'exclude_posts_by_id' );
function exclude_posts_by_id( $ids ) {
     ids[] = 423;
     return ids;
}
...

5. smfi_img_ids_before_save

Description

Filters the image ids before saving them into the database. This filter is triggered when a post is saved.

Parameter

array - $img_ids The image attachment IDs.

Usage

...
/*
* We want to change the image ids before saving them into the database for some reason.
*/
add_filter( 'smfi_img_ids_before_save', 'filter_img_ids_before_save' );
function filter_img_ids_before_save( $img_ids ) {
     // Do your work with the IDs (maybe you want to sort the IDs).
     return $img_ids;
}
...

6. smfi_deactivate_shortcodes

Description

Filters the shortcodes feature activation.

Parameter

bool - The current deactivation state. Default is false.

Usage

...
/*
* We deactivate the shortcodes.
*/
add_filter( 'smfi_deactivate_shortcodes', 'deactivate_smfi_shortcodes' );
function deactivate_smfi_shortcodes( $current_state ) {
     return true;
}
...

7. smfi_deactivate_dnd

Description

Filters the drag and drop feature deactivation.

Parameter

bool - The current deactivation state. Default is false.

Usage

...
/*
* We deactivate the drag and drop feature.
*/
add_filter( 'smfi_deactivate_dnd', 'deactivate_smfi_dnd' );
function deactivate_smfi_dnd( $current_state ) {
     return true;
}
...

General

I have added two basic shortcodes with which the plugin can be tried directly. After you have installed the plugin and added pictures to a post, page or custom post type you can use the shortcodes to display the pictures in the frontend. One shortcode produces a rudimentary gallery and another a slider. I repeat, the shortcodes are very rudimentary! Normally they will not be sufficient for productive use. You can deactivate the shortcodes and the corresponding editor buttons by the smfi_deactivate_shortcodes hook! If you have specific questions about the shortcodes, please contact me.

Gallery shortcode

The gallery shortcode syntax is: [smfi-insert-default-gallery]

Insert the code inside the wordpress classic editor (TinyMCE) and it will render the pictures in the frontend as a basic gallery. The shortcode can be added directly via a button in the toolbar of the TinyMCE editor. Currently, there are no attributes for configuring the shortcode.

Slider shortcode

The slider shortcode syntax is: [smfi-insert-default-slider]

Insert the code inside the wordpress classic editor (TinyMCE) and it will render the pictures in the frontend as a basic image slider. The shortcode can be added directly via a button in the toolbar of the TinyMCE editor. There are a few attributes for configuring the shortcode:

  • slideshow-speed: Specifies the duration in milliseconds after which the next image is displayed. Accepts only intenger values. Default is 8000.
  • slideshow-dot-color: Specifies the color of the navigation dots. Accepts only HEX values. Default is #DCDCDC.
  • slideshow-active-dot-color: Specifies the color of the current active dot. Accepts only HEX values. Default is #696969.
  • slideshow-arrow-color: Specifies the color of the navigation arrows. Accepts only HEX values. Default is #DCDCDC.
  • slideshow-active-arrow-color: Specifies the active color of the navigation arrows. Accepts only HEX values. Default is #696969.

More shortcodes?

Currently, no new shortcodes or extensions to the existing shortcodes are planned. If you are interested in additional shortcodes or extensions, you should contact me.