Below, you’ll find a detailed guide on how to add the Easy Image Collage Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Easy Image Collage Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Easy Image Collage Plugin and the shortcodes it provides:
"Easy Image Collage is a user-friendly WordPress plugin that allows you to create stunning photo collages for your blog or website quickly and effortlessly."
- [easy-image-collage]
Easy Image Collage [easy-image-collage] Shortcode
The Easy Image Collage shortcode is a tool that allows you to create and display image collages in your posts. It takes an ID as an option and returns a styled collage of images. This shortcode supports both standard and AMP pages. It provides a default style for images and allows custom captions. The alignment of the collage can be easily adjusted.
Shortcode: [easy-image-collage]
Parameters
Here is a list of all possible easy-image-collage shortcode parameters and attributes:
id– Unique identifier for the image collage.
Examples and Usage
Basic example – Display an image collage by referencing its ID
[easy-image-collage id=1 /]Advanced examples:
Display an image collage by referencing its ID, and specifying custom parameters such as border width and color.
[easy-image-collage id=1 border_width=2 border_color="#000000" /]Use the shortcode to display an image collage by referencing its ID and aligning it to the right.
[easy-image-collage id=1 align="right" /]Please note that these examples are based on the provided PHP code and the actual usage may vary based on the specific setup and configuration of the ‘easy-image-collage’ plugin on your WordPress site.
PHP Function Code
In case you have difficulties debugging what causing issues with [easy-image-collage] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'easy-image-collage', array( $this, 'eic_shortcode' ) );Shortcode PHP function:
function eic_shortcode( $options )
{
$options = shortcode_atts( array(
'id' => '0', // If no ID given, show a random recipe
), $options );
$post = get_post( intval( $options['id'] ) );
$output = '';
if( !is_null( $post ) && $post->post_type == EIC_POST_TYPE ) {
$grid = new EIC_Grid( $post );
if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
foreach( $grid->images() as $id => $image ) {
if ( $image ) {
$thumb = wp_get_attachment_image( $image['attachment_id'], 'large' );
if ( $thumb ) {
$output .= $thumb;
if( EasyImageCollage::is_addon_active( 'captions' ) ) {
if( isset( $image['custom_caption'] ) && $image['custom_caption'] ) {
$output .= '<div style="text-align: center; margin-bottom: 10px; font-size: 0.8em;">' . $image['custom_caption'] . '</div>';
}
}
}
}
}
} else {
// Styling
$output .= '<style>';
$output .= '.eic-frame-' . $grid->ID() . ' { width: ' . $grid->width() . 'px; height:' . $grid->height() . 'px; background-color: ' . $grid->border_color() . '; border: ' . $grid->border_width() . 'px solid ' . $grid->border_color() . '; }';
$output .= '.eic-frame-' . $grid->ID() . ' .eic-image { border: ' . $grid->border_width() . 'px solid ' . $grid->border_color() . '; }';
if( EasyImageCollage::option( 'default_style_display', 'image' ) == 'background' ) {
foreach( $grid->images() as $id => $image ) {
if( $image ) {
$url = $image['attachment_url'];
$width = intval( $image['size_x'] );
$height = intval( $image['size_y'] );
$ratio = $width / $height;
$thumb = wp_get_attachment_image_src( $image['attachment_id'], array( $width, $height ) );
if( $thumb ) {
$full_file_name = get_attached_file( $image['attachment_id'] );
$path = str_ireplace( wp_basename( $full_file_name ), '', $full_file_name );
$thumb_url = $thumb[0];
$thumb_file = $path . wp_basename( $thumb_url );
// Try path first for performance reasons, fall back on URL.
@list( $thumb_width, $thumb_height ) = getimagesize( $thumb_file );
if ( !$thumb_width || !$thumb_height ) {
@list( $thumb_width, $thumb_height ) = getimagesize( $thumb_url );
}
if( $thumb_width && $thumb_height ) {
$thumb_ratio = $thumb_width / $thumb_height;
if( abs( $thumb_ratio - $ratio ) < 0.05 ) {
$url = $thumb_url; // Only use the thumbnail if the ratios match
}
}
}
$output .= '.eic-frame-' . $grid->ID() . ' .eic-image-' . $id . ' {';
$output .= 'background-image: url("' . $url . '");';
$output .= 'background-size: ' . $width . 'px ' . $height . 'px;';
$output .= 'background-position: ' . $image['pos_x'] . 'px ' . $image['pos_y'] . 'px;';
$output .= '}';
}
}
}
$output .= '</style>';
$container_class = '';
$container_style = '';
switch( $grid->align() ) {
case 'float-left':
$container_class = ' eic-float-left';
break;
case 'float-right':
$container_class = ' eic-float-right';
break;
case 'left':
$container_style = ' style="text-align: left;"';
break;
case 'right':
$container_style = ' style="text-align: right;"';
break;
}
// Draw frame
$output .= '<div class="eic-container' . $container_class . '"' . $container_style . '>';
$output .= $grid->draw();
$output .= '</div>';
}
}
return $output;
}
Code file location:
easy-image-collage/easy-image-collage/helpers/shortcode.phpConclusion
Now that you’ve learned how to embed the Easy Image Collage Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply