ImagePress Documentation

NEW! Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

Get ImagePress | Changelog

Table of contents

Installation

ImagePress requires WordPress 4.6 or higher in order to function as intended. We recommend the latest version of WordPress. In addition to this, PHP 5.5 is required for certain functions and modules. Check with your host before attempting to install ImagePress.

Minimum requirements
WordPress 4.6+
PHP 5.5+

Recommended requirements
WordPress 4.9+
PHP 7.0+

Optimal requirements
WordPress 4.9+
PHP 7.2+

In addition to the requirements above, ImagePress requires the Permalinks structure to have the post name (/%postname%/) in its structure. It will still work without it, but some features might not be available.

  1. Upload the /imagepress/ folder to your /wp-content/plugins/ directory
  2. Activate the plugin via the Plugins menu in WordPress
  3. A new ImagePress menu will appear in the WordPress menu area

ImagePress works out of the box, but because of its complexity, some settings, and options need to be set beforehand.

Basic Installation

1. Create a gallery page by using the [[imagepress-loop filters="yes"]] shortcode.

2. Create an image/photo upload page by using the [[imagepress-add]] shortcode.

That’s it! You have a basic ImagePress installation up and working.

Head over to ImagePress → ImagePress Settings in your Dashboard menu and check the Settings and Configurator tabs for design related changes and settings.

Template Files for Images (optional)

ImagePress is designed to work right out of the box with most WordPress themes. It does this by using a template hierarchy system in the same way WordPress does. When you create a new image in ImagePress and view the front-end page, chances are it will display just like a single blog post in your theme. That’s because ImagePress will use the single.php template file in your theme to display the image page. For many themes, that is perfectly fine. For others, not so much. The good news is you’re not stuck with it. You can create a template file used only by ImagePress single images.

ImagePress only uses the single.php template because it can’t find the one it’s looking for: single-image.php. If that template file exists, ImagePress will use it to display single images instead of the template for blog posts.

To create your single-image.php template, copy the single.php or singular.php file from the root of your parent them into the root of your active (child) theme. Then rename the file single-image.php.

Inside this function, remove the the_content() function and replace it with the ImagePress code:

<?php
if (function_exists('ip_main_return')) {
    echo ip_main_return(get_the_ID());
}
?>

The single-image.php allows you to have a customized image template, with custom links and fields. An example template is provided inside the /documentation/ folder. ImagePress will notify you if the template exists in the Installation tab, inside ImagePress options. Note that -image is the actual image post slug, so if your image post slug is photo, you should have a single-photo.php template file.

Note: This template is now in use for your single image pages. To confirm, make a small edit to that file, save, and view an image page on the frontend of your site to see the change.

Template Parts

It’s very possible that your WordPress theme uses the get_template_part() function inside of template files for better file organization. This function allows theme developers to take a portion of a template file and place it in another file.

If the single.php file you copied uses get_template_part() to remove part of the single post HTML into another file, your new single-image.php file will do the same. Use the parameters in the function to find which file holds this HTML.

Ex. get_template_part('content', 'single') refers to content-single.php.

The code in this file (typically just the HTML, not the opening PHP tag at the top of the file) can be copied and pasted in place of the <?php get_template_part(); ?> call from your single-image.php file. That way you have all of the template to play with as you design your single image page.

Profile Settings

Switch between a fancy user profile header (cover photo + avatar + various information) and a basic one. See the screenshot below for an example:

ImagePress - Fancy Header

Uploading Images

Uploading images is done optionally via drag and drop. Drag and drop upload requires a modern browser and a switch inside ImagePress Settings -> Upload tab.

ImagePress - Drag and drop upload

Collections

Collections are used to group two or more (unlimited) images and display them on the user profile page, a dedicated page or, using a shortcode, any page.

Use this shortcode to add it on any page:

[[imagepress-collections count="4"]]

Use this PHP code to add it as a shortcode:

<?php echo do_shortcode('[[imagepress-collections count="4"]]'); ?>

Or add this code directly in your theme:

// collections button (optional, can be placed in the sidebar)
if (function_exists('ip_frontend_add_collection'))
    ip_frontend_add_collection(get_the_ID());

Note: In order to view collection images, you need to create a viewer page, which should contain the collections shortcode: [imagepress-collection collection="1"].

In order for collections to be visible on any page, they need to have four or more images inside. Collections can be public or private. Private collections are only visible to their author, inside the profile editor.

Anonymous Image Uploading

Use the steps below to enable the name and email address for unregistered users, allowing anonymous upload (not recommended).

ImagePress label - name and email address
ImagePress - request name and email address

Image Editing

Image reordering and removal is accessible from the profile editor, the last tab (with a cog icon).

ImagePress - Image ordering

Shortcodes

All the shortcodes and their explanation can be found on the Dashboard tab of your ImagePress plugin. Other undocumented shortcodes can be found below.

[[imagepress type="top"]]

This shortcode displays the most popular image, based on views and votes.

[[imagepress mode="likes" count="5"]]

This shortcode displays the titles of the most liked/voted images.

[[imagepress mode="views" count="5"]]

This shortcode displays the titles of the most viewed/visited images.

Field Shortcodes

Custom image fields can be placed anywhere in the sidebar or on the single image template, by using a shortcode. For example, for a Sketchfab field, you would use the slug (“sketchfab” in this case):

<?php echo do_shortcode('[[ip-field field="sketchfab"]]'); ?>

All shortcodes are displayed for easier copy and paste.

ImagePress - Custom Field Presets
ImagePress Custom Field Shortcode

If you want to migrate all posts or images to ImagePress, you can reuse the custom meta data by matching your old custom meta field name with ImagePress’ new field slug. Note that editing the field title would also change the slug, so make sure you edit the slug last.

Tutorials

Note that some tutorials may use old/deprecated code. We try to maintain all tutorials up to date, but feel free to contact us if something doesn’t work.

ImagePress – How to create a taxonomy template

If you are not using Noir UI theme, you can easily create a taxonomy page for any theme and view the image archive/category using the ImagePress grid.

<?php
/**
* ImagePress taxonomy template
*
* Taxonomy template with queried parameter as shortcode argument.
*
* @package ImagePress
* @subpackage Template
*/
?>

<?php get_header(); ?>

<section id="content-wide" class="taxonomy" role="main">
    <h1 class="entry-title"><?php echo get_queried_object()->name; ?></h1>
    <?php
    // Get taxonomy term from WordPress query
    $ip_taxonomy_term = sanitize_title(get_queried_object()->name);

    // Display shortcode based on queried taxonomy term
    echo do_shortcode('[[imagepress-loop category="' . $ip_taxonomy_term . '"]]');
    ?>
</section>

<?php get_footer(); ?>

Note that you might need to make some changes in order to accommodate your theme’s structure.

ImagePress – How to customize your single image template

ImagePress – How to create a notifications section

If you are not using our Noir UI theme, you can easily create an ImagePress notifications section for any theme.

If you want to create a separate page for the notifications, use the [[notifications]] shortcode. If you want to create a dynamic menu item, use the ip_notifications_menu_item() template function.

If you are using a custom menu in your theme, use the following code:

<?php if (is_user_logged_in()) { ?>
    <div class="bell-pepper"><?php echo ip_notifications_menu_item(); ?></div>
<?php } ?>

You can style the notifications number and the bell as you see fit. Here’s some CSS help:

.notifications-bell {
    padding: 0 12px;
    font-size: 20px;
}

.bell-pepper {
    display: inline-block;
    position: relative;
}

.bell-pepper .notifications-container {
    right: 0;
}

.notifications-bell:hover {
    color: #E58652;
    background: none;
    box-shadow: none;
}

.notifications-bell:hover i {
    color: #E58652;
}

.notifications-bell:hover sup {
    background-color: #ffffff;
    color: #E58652;
}

.notifications-container a {
    color: #E58652;
    background: none;
}

.notifications-container a:hover {
    color: #ffffff;
    background: none;
}

ImagePress – How to create a member directory

List your members (with published images) using the [[ip-member-directory]] shortcode. Copy the following snippet to your theme’s functions.php file:

add_shortcode('ip-member-directory', 'ip_member_directory');

function ip_member_directory_user_query($args) {
    $ip_slug = get_imagepress_option('ip_slug');
    $args->query_from = str_replace("post_type = post AND", "post_type IN ('$ip_slug') AND ", $args->query_from);
}

function ip_member_directory() {
    global $wpdb;

    $out = '';

    add_action('pre_user_query','ip_member_directory_user_query');
    $members = get_users(array(
        'fields' => array('ID', 'display_name'),
        'orderby' => 'post_count',
        'who' => 'authors',
        'has_published_posts' => get_post_types(array('public' => true)),
    ));
    remove_action('pre_user_query','ip_member_directory_user_query');

    $ipProfilePageId = (int) get_imagepress_option('ip_profile_page');
    $ipProfilePageUri = get_permalink($ipProfilePageId);
    $ipProfileSlug = (string) get_imagepress_option('cinnamon_author_slug');

    $out .= '<div>';
        foreach ($members as $group) {
            $ipProfileUri = $ipProfilePageUri . '?' . $ipProfileSlug . '=' . get_the_author_meta('user_login', $group->ID);
            $out .= '<div style="float:left;width:33%;">
                <a href="' . $ipProfileUri . '">' . $group->display_name . '</a>
            </div>';
        }
    $out .= '</div>';

    return $out;
}

ImagePress Lightbox

ImagePress Lightbox is an ImagePress add-on which allows images to automatically open into a responsive lightbox. No configuration required.

  • Minimal and lightweight, no dependencies required.
  • Keyboard arrow keys to navigate and escape to close.
  • Swipe gestures supported on touch devices.
  • Spread/pinch to zoom in/out supported on touch devices.
  • MouseWheel for next/prev images.
  • Ctrl+MouseWheel to zoom in/out.
  • SVG Icons.
  • Native CSS transitions.
  • Light and dark themes.

More Tutorials

Frequently Asked Questions

Q: How do I migrate from [[imagepress_top]] to the new [[imagepress]] shortcode?
A: ImagePress uses a new, universal shortcode, [[imagepress]]. This shortcode replaces the top image (most viewed image or most liked image). To replace your old shortcodes, just replace the [[imagepress_top]] shortcode with [[imagepress type="top" mode="views" count="1"]] to display the most viewed image or [[imagepress type="top" mode="likes" count="1"]] to display the most voted image.

Q: How do I set a default collection for all uploads?
A: There is no default option for this behaviour, so the code below will accomplish this. Add it to your JS functions file and change the 55 with your collection ID:

jQuery(document).ready(function() {
    jQuery('.ip-uploader #ip-collections').val(55).prop('disabled', true) && jQuery('.ip-uploader .ip-collection-create-new').hide();
});

Q: How do I show an image grid sorted by likes?
A: Use the [[imagepress-loop sort=”likes” count=”10″]] shortcode.

ImagePress Filters

Example #1

This example will add a custom field value to the ip_box_bottom element in image grid:

function ip_get_custom_field($id) {
    $field = get_post_meta($id, 'fieldname', true);

    return $field;
}
add_filter('do_ip_box_bottom', 'ip_get_custom_field');