Fire away... would love to get some feedback.
Fire away... would love to get some feedback.
Hi Noel
I found out about this plugin on the adaptive images website. Thanks for developing it.
Will it work on a local install? I'm getting 'undefined' as the src value for the images, so just wondering if you've got it to work on a local install before investigating further
thanks
Hi Paul,
Yep, had it going on local. Guessing your caching folder might be restricted?
thanks for the quick response.
I'm having to work on a linux install, and struggling with permissions, so I'll try to figure that out.
Noel,
This is a VERY sweet plugin. I have been searching for months for something like this!! Lightweight and user friendly.
I am having trouble with borders and padding on the images. I tried using my own class and the figure.hammy-responsive with no luck. It adds the border, but not in the right places. Any suggestions?
Sorry, Ive been running around and now here in SF. Need before and after screenshots to help out :) Cheers!
Hi there,
The plugin works fine, just one little problem, when you add a link on the image, the link does not appear on the page. It's in the HTML, we get a structure like this in HTML
<a href="milink">
<figure>
<img> </img>
</figure>
</a>
but in the DOM on Firebug (chrome and also Firefox) I get
<p><a href="milink"></a></p>
<figure>
<img> </img>
</figure>
</a>
and the link is not clicable. I tried to highlight the a tag, indeed it's in the DOM before the figure element. Strange.
Any idea how to fix it ?
Hey, me again ^^
As a matter of fact and 4 hours of investigation, the problem does not come frome the JavaScript, but from WordPress code cleanup (mess-up?). To put it simple, you can't use a figure inside of a p element. The problem is that WordPress wrapes its images into p elements, so the outcome of the_content is
<p> <a> <figure> </figure> </a> </p>
This is not valid, and browser tend to do what they can with it, hence the strange behavior with the link.
The solution we found (thanks kReEsTaL for some links) is to remove the p tag using regex. Maybe this could be added in the plugin for further release ?
Here is a link with a regex that works and another one that works too
Cheers ;)
Hmm, thanks for hunting, I would have still expected the link to display, will review when I'm back from #wcsf. Appreciate the support!
@Noel Tock It's the WordPress editor that messes things up. Also when you try to add the image in a paragraph, and align it left or right, the HTML gets reallt ugly and invalid.
Haven't forgotten about this! been a bit crazy with happytables, will get back to it soon enough :)
Perhaps I'm doing it wrong. It's not working.
I have the following:
<article>
<img>
<aside>
<!-- Content -->
</aside>
</article>
I set the content container to be article and it's not working.
Is the image in your post/page or part of your theme?
It's in my post/page. It's the featured image.
You have a live example somewhere?
No, I'm working locally. But the code is...
<section class="main container">
<article id="post-42" class="">
<img width="851" height="450" src="rmi.jpg" class="attachment-post-thumbnail" />
<aside>
</aside>
</article>
</section>It looks like the post thumbnail is being rendered through the theme as opposed to being inside the tinymce editor (the featured image is not part of the editor unless it's displayed in there in addition ). Correct?
Correct, I managed to do it with media queries. Good work though!
That would indeed be part of the theme then (as you're controlling the display of it via the theme template, which is where you should also add any resizing scripts, etc.). This plugin works purely off content as that changes from post to post (while theme files don't). Cheers!
Update to Hammy. Now using the picture tag instead of figure, this is playing a lot nicer with WP and also is closer to the recommendations being made regarding adaptive/responsive images. Has worked quite nicely for me so far. Let me know how it goes! Cheers
Hi Noel,
First of all thanks for this great plugin. I got it al working in a few minutes but I have a question about the plugin. Is it true that the plugin looks for the screen width and not the device with when serving the corresponding image?
I did a test with my site at blaze.io to see which image was served (they use an iPhone4 for that) and noticed that the image with a resolution of 768 x ... was served in stead of the expected 320 x ....
So this got me thinking that the plugin uses the screen width instead of the device width. Because if it would use the device width it would serve a smaller image.
Am I right? And if you could device width be added to a future update of his plugin? That would make it even more awesome.
I can't get it to work on local machine either. I'm using Mamp, any help would be appreciated.
Thanks
To continue with my above comment; It doesn't work for me on a live environment either. I've changed file permissions to 777 and still no luck?!
You must log in to post.