Built-in Gallery Function Limitations?

  • I haven’t found a gallery plugin that I feel comfortable using for a responsive solution, they all seem to suck on mobile. So I have tried to customise and style the built-in gallery and combine it with a gallery custom post type. Which works providing –

    a) you upload images directly into and specifically for use in one particular gallery
    – if they are attached elsewhere, the gallery thumb links to the attachment page, but won’t link it to the other images on the same gallery using a navigation function, nor will it link back to the gallery but back to the original attachment page or post instead elsewhere within the website.

    b) caution if adding new images to an existing gallery
    – won’t necessarily link the images together when you click through from the thumbnail and then use previous_image_link or next_image_link. The new images will go back to the gallery but not link to next or previous images contained within the gallery.

    If the above is correct (a) I can work around, but (b) does need sorting if it’s possible.
    Here is the code used to navigate between images via the attachment pages (thumbnails are linked to attachment) I’ve ‘borrowed’ from the TwentyFifteen theme. – 

    <div id="gallery-navigation" class="navigation image-navigation golf-link">

     <?php
        // close button back to gallery thumbnails.
        the_post_navigation( array(
            'prev_text' => _x( '<span>Close</span>', 'Parent post link', 'dvgc-responsive' ),
        ) );
     ?>

    <div id="image-navigation" class="navigation image-navigation golf-link">

        <div class="nav-previous-img">
                <?php previous_image_link( false, __( '&Lt; Prev', 'dvgc-responsive' ) ); ?>
        </div>

        <div class="nav-next-img">
                <?php next_image_link( false, __( 'Next &Gt;', 'dvgc-responsive' ) ); ?>
        </div>

    </div>

</div>

    I am also using the new RICG Responsive Images plugin with the gallery but I don’t think that makes any difference to my problem with the navigation. But just incase this is included just before the above code – 

    <?php 

    //get image alt
    $image_attributes = wp_prepare_attachment_for_js( get_post_thumbnail_id( get_the_ID() ), 'full' );
    $alt = $image_attributes['alt'];
    $url = $image_attributes['url'];
    $id = $image_attributes['id'];

    //pass image url and ID through responsive image plugin
    echo "<img alt='$alt' src='$url' ";
    echo tevkori_get_src_sizes( $id, 'large' );
    echo "/>";

?>

    Can anyone help?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    The aspects about the default gallery navigation you’ve identified have bothered me for some time, but I don’t use galleries enough to have done anything about it. But I have thought about solutions.

    Basically, all built in WP image nav functions are useless because they all work off the parent post. You’d need to develop your own nav functions that work off the attachment IDs passed as shortcode attributes ($attr['ids']). The basic logic would be locate the current ID in the array and determine the next or previous ID. Get the attachment permalink for that ID for use as the anchor tag’s href attribute.

    This means the gallery attachment template needs to be separate from the usual theme image attachment template.

    The backlink to the post page with the gallery thumbs is particularly difficult. The first attachment opened can determine where it came from with HTTP_REFERER, but as the user clicks through image attachments, that source is lost. I suppose one could determine the source post and pass it as an URL parameter in the next/previous links. No URL parameter means get the source from HTTP_REFERER and pass it in all subsequent links.

    The way I’ve dealt with the backlink issue is all the gallery thumb links open a popup window to display attachments. Clicking on the backlink simply closes the popup.

    It’s not clear how you’ve customised the default gallery. Perhaps you already know this, but just in case, the proper ways are to either develop your own shortcode and handler (copy, edit, and rename), or to override the default by hooking the ‘post_gallery’ filter. By returning your own gallery content from your filter callback, it is immediately echoed out instead of using the default code.

    Thread Starter shecodes

    (@shecodes)

    Wow, thanks bcworkz for taking the time to give such an informative response.

    I must admit I was peeking through my fingers at my inbox as I thought this might sadly be the case. I am unfortunately bear of little brain when it comes to scripting so this will have to be a spare time challenge for me to work out, and a plugin will have to suffice for now as I have a site to launch next weekend.

    But I am very appreciative of the starting point you have given me. I was trying to utilise the gallery without the need for a popup as I don’t think they are appropriate across devices. I was trying to minimise page load as each attachment page is one image only, which is made ‘responsive’ with the RICG plugin. I also don’t like having the pinch zoom ability taken away which always seems to break on most gallery plugins on mobile. So I was trying to emulate a plugin ‘look’ as user testing suggested that people have come to expect the next/prev and close buttons. I was using the thumbnail links to open the attachment page ‘disguised’ as a popup without being a popup so the ‘close button’ was actually an anchor link back to the parent gallery. From what you have said I can now see why this only works if the images have been loaded next to each other in the media library. Time to go research on how to do it properly…

    Moderator bcworkz

    (@bcworkz)

    “bear of little brain” ?? I haven’t heard it phrased like that before, I like it! I certainly understand the need for a quick solution. I’ve much embarrassing code out there due to looming deadlines. Unfortunately I can’t offer anything to help with a quick solution.

    I agree that popups have limited utility in today’s sites. I used them in some old desktop oriented sites. The referring page passed as URL parameter should work fine for you. In case you wish to pursue this approach, here’s the logic in more detail.

    Let’s name the URL parameter “main_gallery”. Every time the attachment template loads it checks if $_GET['main_gallery'] is set. If so, append the same value to both next and previous navigation links. Also use the value to construct the backlink. Adding to the nav links can be done like this, assuming $link is the established nav link by itself:
    $full_link = add_query_arg('main_gallery', $_GET['main_gallery'], $link );

    If $_GET['main_gallery'] is NOT set, we can assume $_SERVER['HTTP_REFERER'] contains the URL of the main gallery. This is in part why gallery attachments must use a different template than normal image attachments to regular posts. Thus we use the HTTP_REFERER value to construct the back link and to append it as the “main_gallery” URL parameter for the next an previous nav links.

    It takes some effort to explain the logic, but you’ll find the resulting code is fairly minimal. Do be aware that I haven’t actually implemented this to know that it works, but I see no reason it wouldn’t. I hope this helps some. If you need further clarification on anything, please do ask. Unfortunately, this forum format is not conducive to quick answers for people on a deadline. If you need a quick answer, you could try WordPress IRC Live Help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Built-in Gallery Function Limitations?’ is closed to new replies.