Fixed height and Auto width on images displayed via mla_gallery

Thank you for your question and your comments on the documentation. I agree that [mla_gallery] is a triumph of power over simplicity, and the documentation is more reference than tutorial. I wish I had the time and talent to do a better job in that regard.

There is no type=thumbnail parameter for [mla_gallery] so that part of your shortcode is being ignored. The size=full parameter is linking to the full-size image for each gallery item, and the browser is scaling each image down so they fit within the width value generated by MLA based on the number of columns you have chosen. In effect, you have fixed width and auto height; you want the opposite.

The problem with fixed-height, auto-width layout is that it breaks the fixed number of columns per row. For example, three portrait images will be much narrower than three landscape images. If the width is allowed to vary, the total “row width” will vary and there is no way I know of (I’m not an expert) to limit the “row width” to fit within the browser window; some images will break to the next row and the result will be more than a little untidy.

There are other plugins that can give you a more pleasing display, such as:

Tiled Gallery Carousel Without Jetpack

You can use MLA to select the images you want and another plugin to display them. I’d be happy to give you more specific guidance if that would work in your application.

I will leave this topic unresolved until I hear back from you. Thanks for your interest in the plugin.

Hi David,

Thanks for replying. Yes, having a fixed height and an auto width would mean that the number of columns would change depending on the image sizes.

Thanks for clarifying how MLA works in this regard. I’ll have a look at the plugin you’ve linked to and see how that pans out.

Can I also say that I think MLA is fantastic and even though I’m only using a tiny % of what it *can* do, I am really, really grateful for the hard work you’ve put into it.

I would be very grateful for any advice you have on getting MLA and the Tiled Gallery Carousel plugin to work together.

[Updated] Hi, I’ve found how to do this via your FAQ. Many thanks for the suggestion! ??

Thanks,

One quick question when using these two together if I may?

How can I remove the hyperlink when displaying images using the carousel plugin with MLA? before installing carousel I just used the lightbox plugin with MLA and that worked fine. However, the images I am going to display using carousel don’t need to be selectable, so I’d like to turn it off (and I’m also not keen on the way it displays them anyway).

Thanks,

Thanks for your updates with the positive MLA feedback and with your application progress. It looks like you are having good results with the combination of “Tiled Gallery Carousel Without Jetpack” (TGCWJP) and MLA; is that right?

Removing the hyperlinks from the gallery produced by the [gallery] shortcode TGCWJP uses requires a bit of work. The TGCWJP plugin does not have any options to do this, and it does not provide any hooks of its own to make this type of modification possible. However, you can use the hooks built in to the WordPress [gallery] shortcode to accomplish your goal.

I have created a small gustom plugin which hooks the WordPress post_gallery filter (which TGCWJP also uses) and removes the hyperlinks from the gallery items. If you uncheck the Settings/Media Image Gallery Carousel option to “Display images in full-size carousel slideshow.” and check the option to “Display all your gallery pictures in a cool mosaic.” you should get the results you want. Here is the complete source code for the custom plugin:

<?php
/**
 * Replaces gallery item hyperlinks with simple <img> tags when nolink=true
 *
 * @package MLA Custom Nolink Example
 * @version 1.00
 */

/*
Plugin Name: MLA Custom Nolink Example
Plugin URI: https://fairtradejudaica.org/media-library-assistant-a-wordpress-plugin/
Description: Replaces gallery item hyperlinks with simple <img> tags when nolink=true
Author: David Lingren
Version: 1.00
Author URI: https://fairtradejudaica.org/our-story/staff/

Copyright 2014 - 2015 David Lingren

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You can get a copy of the GNU General Public License by writing to the
    Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110, USA
*/

/**
 * Call it anything you want, but give it an unlikely and hopefully unique name. Hiding everything
 * else inside a class means this is the only name you have to worry about.
 *
 * @package MLA Custom Nolink Example
 * @since 1.00
 */
class MLACustomNolinkExample {
    /**
     * Initialization function, similar to __construct()
     *
     * @since 1.00
     *
     * @return    void
     */
    public static function initialize() {
        /*
         * The filter is only needed in the front-end posts/pages
         */
        if ( is_admin() ) {
            return;
        }

         /*
          * Defined in /wp-includes/media.php - in gallery_shortcode()
          * Use a "low" priority so this filter runs after the "tiled_gallery" filter
          */
        add_filter( 'post_gallery', 'MLACustomNolinkExample::post_gallery', 2002, 2 );
    }

    /**
     * Filter the [gallery] output to remove hyperlinks
     *
     * @since 1.00
     *
     * @param    string    The gallery output HTML
     * @param    array    The shortcode parameters
     *
     * @return    string    Filtered gallery output HTML
     */
    public static function post_gallery( $html, $atts ) {

        // Look for our custom parameter, nolink=true
        if ( isset( $atts['nolink'] ) && 'true' == strtolower( trim( $atts['nolink'] ) ) ) {

            // Find all the hyperlinks in the gallery
            $match_count = preg_match_all( '!(<a [^>]*?>)(<img [^>]*?>)(</a>)!', $html, $matches, PREG_OFFSET_CAPTURE );
            if ( $match_count ) {

                // Replace the links with just the <img> tags
                for ( $index = $match_count - 1; $index >= 0; $index-- ) {
                    $replacement = $matches[2][ $index ][0];
                    $start = $matches[0][ $index ][1];
                    $length = strlen( $matches[0][ $index ][0] );
                    $html = substr_replace( $html, $replacement, $start, $length );
                }
            }
        }

        return $html;
    }
} // Class MLACustomNolinkExample

/*
 * Install the filter at an early opportunity
 */
add_action('init', 'MLACustomNolinkExample::initialize');
?>

If you copy the code to a file named mla-custom-nolink-example.php and put the file in your /wp-content/plugins/ directory you will see a new plugin, “MLA Custom Nolink Example” in the Plugins/Installed Plugins list; activate the plugin.

To remove the links from your gallery display, add a nolink=true parameter to your shortcodes, e.g., [mla_gallery ids="2901,2758" mla_alt_shortcode=gallery type="rectangular" nolink=true].

If you want a copy of the custom plugin by e-mail, give me your contact information and I will send it to you. You can use the Contact Us page at our web site:

Fair Trade Judaica/Contact Us

Thanks again for your persistence in working toward your application goal and for an interesting example that others may find helpful. I am marking this topic resolved, but please update it if you have problems or further questions regarding the solution outlined above.

Thanks for looking at this. However, whilst it now looks like the link is gone from the images thanks to that plugin, if you click over an image anyway then it still behaves as if there is a link and then displays the image?

Thank you for your update and for taking the time to install the example plugin.

You wrote “it still behaves as if there is a link and then displays the image“. In my test system this will happen of you do not uncheck the “Enable carousel” box on the Settings/Media screen and save the changes. You must uncheck the Settings/Media Image Gallery Carousel option to “Display images in full-size carousel slideshow.”

If the Enable Carousel option is checked the image will still display in the lightbox format when you click on the image. If you need to have this option enabled for other galleries on your site I can look into modifying the custom plugin to disable the lightbox on a gallery-specific basis.

If I have not understood your problem correctly, let me know. If you can post a link to a post/page showing the problem it would be helpful. Thanks for your patience.,

Hi,

I can’t locate the first option that you say to uncheck in Settings, Media (“Display images in full-sze carousel slideshow”).

I see the second option that you say to enable (“Display all your gallery pictures in a cool mosaic.”) but I don’t have that first option? In fact, this second option doesn’t seem to make any difference at all whether it’s turned on or off!

I do also need images elsewhere to be selectable and display using Lightbox. It’s only those I use with the carousel plugin that I wish to have non-selectable.

Thanks for your update. It sounds like you may have some plugin other than “Tiled Gallery Carousel Without Jetpack” (TGCWJP) that is controlling the lightbox display.

Are you using “Tiled Gallery Carousel Without Jetpack” Version 2.1, By Raja CRN? Do you have any other plugins that might be generating a lightbox display?

Can you post a link to your site, to a post/page that has one of your galleries on it?

Thanks for any additional details you can provide.

Hi,

I have the correct plugin installed and the latest version (2.1). I do have Simple Lightbox which is a plugin I’ve had for quite some time (and it was working with MLA fine) but even when deactivating that plugin, I still don’t see the option you’re describing.

My site isn’t live yet (it’s still in development).

Ah, worked it out in the end. I had Jetpack activated (although I only use a few components of it and none of them were carousel, slideshow or image related).

It now works as I hoped it would, but does this mean I now can’t use Jetpack at all if I want to proceed?

Thanks for your updates with the additional plugin information.

I know there is a bunch of code in TGCWJP that works differently when it finds Jetpack also installed. Now that I know what to look for I can test the combination and probably adjust the custom plugin to allow you to use both TGCWJP and Jetpack. Give me a day or so to look into it.

Hi,

That would be great if you could have a look.

Thanks! ??

Thank you for your patience while I attended to a number of projects and tasks. I finally found some time to set up a test site with Jetpack and have updated the custom plugin to disable the “Carousel” display when nolink=true is present.

I discovered that TGCWJP removes the “Display images in full-size carousel slideshow” option and always uses the Carousel display when Jetpack is activated, even if none of the Jetpack modules are active. It downloads some JavaScript (jetpack-carousel.js) to the browser to display the Carousel. The JavaScript looks for some data in the gallery HTML (data-carousel-extra) and only runs if it finds the data. I changed the custom plugin to rename the data so the JavaScript does not find it and run. Here is the complete source code for the updated plugin:

<?php
/**
 * Replaces gallery item hyperlinks with simple <img> tags when nolink=true
 *
 * @package MLA Custom Nolink Example
 * @version 1.01
 */

/*
Plugin Name: MLA Custom Nolink Example
Plugin URI: https://fairtradejudaica.org/media-library-assistant-a-wordpress-plugin/
Description: Replaces gallery item hyperlinks with simple <img> tags when nolink=true
Author: David Lingren
Version: 1.01
Author URI: https://fairtradejudaica.org/our-story/staff/

Copyright 2014 - 2015 David Lingren

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You can get a copy of the GNU General Public License by writing to the
    Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110, USA
*/

/**
 * Call it anything you want, but give it an unlikely and hopefully unique name. Hiding everything
 * else inside a class means this is the only name you have to worry about.
 *
 * @package MLA Custom Nolink Example
 * @since 1.00
 */
class MLACustomNolinkExample {
    /**
     * Initialization function, similar to __construct()
     *
     * @since 1.00
     *
     * @return    void
     */
    public static function initialize() {
        /*
         * The filter is only needed in the front-end posts/pages
         */
        if ( is_admin() ) {
            return;
        }

         /*
          * Defined in /wp-includes/media.php - in gallery_shortcode()
          * Use a "low" priority so this filter runs after the "tiled_gallery" filter
          */
        add_filter( 'post_gallery', 'MLACustomNolinkExample::post_gallery', 2002, 2 );
    }

    /**
     * Filter the [gallery] output to remove hyperlinks
     *
     * @since 1.00
     *
     * @param    string    The gallery output HTML
     * @param    array    The shortcode parameters
     *
     * @return    string    Filtered gallery output HTML
     */
    public static function post_gallery( $html, $atts ) {
        //error_log( 'post_gallery $html = ' . var_export( $html, true ), 0 );
        //error_log( 'post_gallery $atts = ' . var_export( $atts, true ), 0 );

        // Look for our custom parameter, nolink=true
        if ( isset( $atts['nolink'] ) && 'true' == strtolower( trim( $atts['nolink'] ) ) ) {

            // Disable Jetpack Carousel, which always runs with Jetpack installed even if not activated
            $start = strpos( $html, 'data-carousel-extra' );
            if ( false !== $start ) {
                $length = strlen( 'data-carousel-extra' );
                $html = substr_replace( $html, 'data-carousel-disabled', $start, $length );
            }

            // Find all the hyperlinks in the gallery
            $match_count = preg_match_all( '!(<a [^>]*?>)(<img [^>]*?>)(</a>)!', $html, $matches, PREG_OFFSET_CAPTURE );
            if ( $match_count ) {

                // Replace the links with just the <img> tags
                for ( $index = $match_count - 1; $index >= 0; $index-- ) {
                    $replacement = $matches[2][ $index ][0];
                    $start = $matches[0][ $index ][1];
                    $length = strlen( $matches[0][ $index ][0] );
                    $html = substr_replace( $html, $replacement, $start, $length );
                }
            }
        }

        return $html;
    }
} // Class MLACustomNolinkExample

/*
 * Install the filter at an early opportunity
 */
add_action('init', 'MLACustomNolinkExample::initialize');
?>

The updated version should resolve your problem. You can always modify the code to create a separate parameter for this new feature if you want the Carousel display controlled on a gallery-specific basis. Let me know how the update works for you.

Hi,

I deactivated and deleted the old version of the plugin, then uploaded and installed the new one.

Unfortunately, I get an error when I try to activate the plugin:

Fatal error: Cannot redeclare class MLACustomNolinkExample in <my-url>/wp-content/plugins/mla-custom-no-link-example/mla-custom-no-link-example.php on line 40

(I’ve replaced my actual dev URL with <my-url> in the example above).

I’m guessing that I might have not performed the recommended method for removing the old version and installing the new one? It’s the first time I’ve manually added a plugin before so it wouldn’t surprise me if I’ve done it wrong!