Linked, Aligned & Gallery Images Not Working

Hi!
First, thanks for pointing out these issues. It’s hard to come up with all possible scenarios and test the plugin. I can only use it myself and take it from there.

First issue: I’m aware of this one. It’s kind of a limitation with Picturefill 1.2.1 that uses span elements. There’s no possibility to pass the alignment classes directly to the img. However, with Picturefill 2.1 and the real picture element, this will work. RWP 1.5 will be out any day now and you’ll be able to select which markup pattern you wanna use.

Second issue: This one sounds very strange. There was a similar problem with shortcodes, but that was fixed in 1.4.3. If you open responsify-wp/includes/content_filter.php, do you see this line 10?
add_filter( 'the_content', array( $this, 'filter_images' ), 11 );

Third issue: I guess that it is the native gallery function you are using? I never use that myself actually, so I just have not tried that.
As I said, so many scenarios… ??

Again, thanks for the feedback! RWP is still a very young plugin.

Thanks for getting back to me so quickly!

I noticed the plugin is pretty new, which is why I figured it might be useful to mention these issues. Glad you think so, too!

1) That’s good to know! One idea I had, though I didn’t test it, was that since I’m already using responsive column classes, I could simply use those to align text and images, which might actually be a smoother solution for my particular layout anyway.

2) I reactivated the plugin to check, and yes, that code does appear on line 10.

I did a bit more testing and images loaded from my own media library link just fine both to links on my own site and to external links.

The problem only occurs when I use images from an external url. Looking at the html, I realise it’s because the plugin doesn’t have any alternate image sizes to pull. But for some reason, it won’t populate the <no script> section, which if it would, it would work fine.

Here’s the original html:

<a href="https://commons.wikimedia.org/wiki/File%3AJunipers_berry_berries.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Junipers_berry_berries.jpg" alt="By Jon Sullivan [Public domain], via Wikimedia Commons" width="297" height="222" /></a>

Here’s the outputed html:

<p>

    <a href="https://commons.wikimedia.org/wiki/File%3AJunipers_berry_berries.jpg">
        <span data-alt="" data-picture="">
            <span data-src="">
                <img alt="" src=""></img>
            </span>
            <noscript>

                <img src="" alt="">

            </noscript>
        </span>
    </a>

</p>

Hopefully this helps you come up with a solution!

3) Yes, I’m using the regular WP gallery via the Add Media button. The shortcode is generated automatically.

I’m also wondering whether there could be a conflict with another plugin. I’ve got Respond.js activated, and I think the two plugins may do a few of the same things? Not sure..

Thanks for all your help, Stefan! Hopefully this will be the solution I was looking for after all ??

I just released RWP 1.5.0, so if you update to that version and select the picture element in the settings, the first issue would be resolved!

2) Oh, it’s an external image! As you said, the plugin will try to find other sizes of the image, which it won’t. That’s another scenario I haven’t thought of ??
I’ll fix it in 1.5.1.

3) I just took a quick look at this. The gallery function creates a div with this markup:

<dl class="gallery-item">
	<dt class="gallery-icon landscape">
		<a href="{{ URL_TO_ATTACHMENT }}">
			<picture>
				<!--[if IE 9]><video style="display: none;"><![endif]-->
					<source srcset="{{ URL_TO_THUMBNAIL }}">
				<!--[if IE 9]></video><![endif]-->
				<img class="attachment-thumbnail" src="{{ URL_TO_THUMBNAIL }}">
			</picture>
		</a>
	</dt>
</dl>

This works as expected, even though it’s unnecessary to generate this markup since the image sizes already is the smallest.
In the gallery settings, I can choose between linking the image directly to the media file or the attachment page. The plugin can only do something with the markup on the attachment page, but that doesn’t seem to work.
Besides of that, how would you like the plugin to handle galleries? ??

Thanks for all your hard work, Stefan! I’ve updated the plugin and am just about to start testing out how the new Picturefill version works.

I actually have a question about that. I was reading the Picturefill documentation and it seems that this version doesn’t have the fallback display capability for browsers without javascript enabled. Won’t that cause more backwards compatibility issues? Or is the picture tag more fully supported than I understand?

Back to the original gallery question! I suppose the plugin should be able to handle any native gallery settings, but here’s how I personally use galleries.

I always select “Link to none” in my gallery settings, this way the gallery carousel is enabled whenever any image within the gallery is clicked. This automatically enables a full-screen view in the carousel, with horizontal scroll buttons to view the rest of the gallery. Perfect!

Also, this is likely relevant — I generally choose the thumbnail view as opposed to JetPack’s tiled galleries (square tiles, mosaic, etc.). I have chosen tiled galleries in the past but am in the processing of changing them all to thumbnails because the tiles don’t respond well to layout changes.

I absolutely never choose to link images to the attachment page and actually have these automatically redirected to the parent post with another plugin.

The only times I choose to link to a media file is if I want the user to have the ability to zoom the image using the browser zoom, which is never a situation that occurs in a gallery.

So ultimately, for my scenario, I’m not sure whether I want galleries to even be affected by the plugin at all. The thumbnail size displayed is already perfect for any screen size or device, as you mention. I suppose it depends on the html output of the carousel. Are full-screen images served at full size regardless of the device? I don’t think screen size would matter as the carousel should be taking care of that, but the device would definitely be an issue if full size images are being served to smartphones. I’ll do a few tests and see if I can get you some example code to look at…

Thanks again for your attention to these issues. I’m looking forward to 1.5.1 so I can start using this plugin!!

Hi again Stefan,

I’ve had a chance to look into how things are working out for galleries with the new update.

With the plugin activated and global enable settings set to on, using the picture element and not the span, this is what happens.

Thumbnail image galleries now display well with the markup you mentioned, but clicking on an image loads a blank carousel. The x button doesn’t work in the carousel, so the only way to go back to the main webpage is to reload the page entirely (using the back button goes back to the previous web page, not the current page which holds the gallery).

Tiled galleries still don’t display. To me that’s not a big deal, but it might be to other people…

With the plugin deactivated, I did notice that the gallery carousel serves the same full size image and simply uses width 100% to adjust it to screen size. So the native gallery function would benefit a lot I think from being fully compatible with your plugin, so that the carousel would serve not only an appropriate image display size, as it already does, but also an appropriate image file size, which hopefully you will be able to help with ??

Didn’t test anything with the span tag option as I assume that will still work the same as before the update…

Super excited for 1.5.1 — in the meantime I’m going to see how the manual enable option works since I don’t think I want to deactivate the plugin again. It’s working almost perfectly now. Thank you!!

Just noticed that the carousel is also a JetPack feature and not a native gallery function…

First, thanks for all of your thoughts and for taking the time to write it down! You give me a lot to think about ??

Regarding fallback for older browsers, I don’t know, but I guess that <picture> won’t work if javascript is turned off. I believe that the browser will just ignore the element and won’t see the <img> inside. But as long javascript is turned on and the document.createElement( "picture" ); snippet is present, it should not cause any problems.
But once again, correct me if I’m wrong.
(The <picture> element is implemented in Chrome 38 and higher, Opera 25 and Firefox 33 and higher.)

Back to your question about galleries. As you said, the native gallery function doesn’t have any lightbox or carousel out of the box. Basically it just creates a group of thumbnails which links to either nothing, the attachment page or the file itself.
I’m afraid that the plugin can’t do so much in that situation. Maybe it could replace the URL to the full image with the URL to a smaller version, but that feels wrong.
I guess all lightbox/carousel plugins will have to implement support for RWP instead ??

Thanks, Stefan. Since the carousels at least look good no matter what, my current issue isn’t so much whether the images within them are responsive — at the moment, I’m more concerned with the carousel displaying images and closing back to the webpage properly.

Here is something I noticed in the code, in case it might help. Without the plugin activated, the carousel html shows a div class “jp-carousel” with many other divs within it, including slides for each image in the carousel, divs for the image meta data, comments, sharing, etc. Once the plugin is activated, that jp-carousel div outputs nothing at all:

<div class="jp-carousel" style="position: absolute; top: 0px; bottom: 92px; left: 0px; right: 0px;"></div>

Any chance this is something you can try to fix? I kind of find thumbnail galleries useless unless there’s a way to make the image bigger — without linking to the attachment page or media file…

Thanks again!

I’ve taken a quick look at it now and understand what you mean. It’s an javascript error that says Uncaught TypeError. Cannot read property 'split' of null. The cause is an missing attribute on the <img> element inside <picture>.
If you look at the thumbnail when the RWP is deactivated, Jetpack adds a bunch of custom attributes, like data-attachment-id, data-image-meta and data-orig-file.
The problem is that when RWP builds the new markup, only src and class is being passed on to picture.

Before:

<img src="thumbnail.jpg" class="attachment-thumbnail" data-orig-file="original.jpg">

After:

<picture>
    <source srcset="thumbnail.jpg">
    <img src="thumbnail.jpg" class="attachment-thumbnail">
</picture>

So, the solution would be to keep all of the original attributes, not only src and class. This is definitely something I’ll try to do.
Again, thanks for pointing out this issue!

Great to hear! Thanks Stefan! I’m marking this as resolved as I’m sure the next update or two will get rid of the remaining kinks. Great work with this plugin!

I’ll work with 1.5.1 this weekend and hopefully publish the update in the beginning of next week ??
By the way, while I’ll still have you here, may I ask what you think about the the explanation of the settings inside WordPress? Are they fairly understandable? As a swede, some things has been a bit tricky to explain in english ??

That would be fantastic! Here in Canada it’s Labour Day weekend, so at first I was like, what, you’re going to work on Labour Day weekend? Lol! Glad I know where you’re from now ??

I find all the instructions really simple and the plugin is actually really easy to use. Even the picture::create() option looks simple enough, though I’m stumped with trying to apply it to my header image.

Since you’ve asked me, I’ll post my problem here but if you want, just let me know and I’ll open a new support thread.

(I wasn’t going to post this question at all because from my point of view, this isn’t really part of your job, but I’m very grateful for your offer to help and am taking advantage since I really need the help!)

I just don’t know how to integrate picture::create() into a complicated setup such as my theme uses. In header.php, this is what I found:

<?php
			$header_img = '<img src="' . $header_img . '" alt="' . $alt . '" width="' . HEADER_IMAGE_WIDTH . '" height="' . HEADER_IMAGE_HEIGHT . '" class="header-img" />';
			if ( ! is_front_page() && $graphene_settings['link_header_img'] ) {
				$header_img_tag = '<a href="' . apply_filters( 'graphene_header_link' , home_url() ) . '" id="header_img_link" title="' . esc_attr__( 'Go back to the front page', 'graphene' ) . '">';
				$header_img_tag .= $header_img;
				$header_img_tag .= '</a>';

				$header_img = $header_img_tag;
			}
			echo $header_img;
		?>

I don’t even know where to start… I did check out the plugin’s Github documentation to see if there are any more examples of how to use picture:create() but I haven’t had the chance to play with it too much. It seemed too complicated for my skill level…

So once again, thank you, Stefan, for all your help!!

(If you don’t hear back from me for a few days, it’s because it’s Labour Day weekend and I’m going camping! Lol. But I will be here most of the day still…)

I wasn’t sure about what Labour day was at first, but after a quick search on google, I realized that we have the same thing here. The difference is that labour day is at 1 May here ??

Anyway, I’d be glad to help you with the header image, but we can do it in a new thread. 2/3 resolved support issues looks better than 1/2 ??
These kinds of questions can point out parts of the documentation that needs improvments, or if I need to add something to the FAQ ??

Lol — yeah, I knew you had your own version but I thought the vocab would be more self-explanatory. Oops — lol!

So glad my question is useful to you, and not annoying as I thought it might be. Helping you out like this has been fun. I guess not knowing much about code has its advantages, too!

So I started a new thread. Hopefully that makes it easier for other people to find this example… Cheers!

Our version is just called “1 May”, so I didn’t make the connection instantly ??