trial3rror

// rapport embarassant commence… //

Hello,

2) So, first the .htaccess conundrum. I found the amended htaccess in the root of my development site, not the root of the site itself. Stupid me. I was looking inside the wordpress installation for it as well but apparently never looked in the root folder of my development tree. So that’s the explanation, retina-images method work exactly as advertised.

1) Now, the non-swapping fullsize images when linked to “media file”. I was getting so frustrated that I digged out an old smartphone that I never use. An LG Optimus Pro running Android 4.1.2. And lo and behold, on that phone, picturefill works as advertised!!!!!! On my current phone, LG G2 running Android 4.2.2, it does not work and neither does retina.js. And it doesn’t work either on my tablet, the LG Gpad 8.3 running 4.2.2. Both these devices are newer. I have looked for settings that they should be treated as a useragent-desktop, but can’t find any such thing.

So either it is something related to the Android version, or to the generation of the LG devices. I wish I had more devices to test on. But in any case, the fault I was experiencing seems to lie with the devices rather than with the plugin or the html code. (It would be interesting to hear what @weddje above has to report about his).

But since you asked for it I will post the code from the page in question below, in case you have any ideas.

my dev site

this is the code from the text editor for the page in question:

image below linked to "media file"

<a href="https://peterwennersten.com/dev/wp-content/uploads/2015/02/LitenG?rd-L?gtryck.jpg"><img class="alignnone size-thumbnail wp-image-283" src="https://peterwennersten.com/dev/wp-content/uploads/2015/02/LitenG?rd-L?gtryck-150x150.jpg" alt="Liten g?rd, l?gtryck" width="150" height="150" /></a>

image below linked to "attachment page"

<a href="https://peterwennersten.com/dev/gallery/buildings/liten-gard-lagtryck" rel="attachment wp-att-283"><img class="alignnone size-thumbnail wp-image-283" src="https://peterwennersten.com/dev/wp-content/uploads/2015/02/LitenG?rd-L?gtryck-150x150.jpg" alt="Liten g?rd, l?gtryck" width="150" height="150" /></a>

-----------------------------------------------------

<strong>Verification images (not linked anywhere)</strong>

This is the normal thumbnail

<img class="alignnone size-thumbnail wp-image-287" src="https://peterwennersten.com/dev/wp-content/uploads/2015/02/normal-150x150.jpg" alt="Liten g?rd, l?gtryck" width="150" height="150" />

This is what a swapped file looks like (it has a text- overlay for testing)

<img class="alignnone size-thumbnail wp-image-288" src="https://peterwennersten.com/dev/wp-content/uploads/2015/02/swapped-150x150.jpg" alt="Liten g?rd, l?gtryck" width="150" height="150" />

The ???-filename bug from my other thread I think still holds though, and I don’t get any retina swaps on my desktop monitor when in debug mode either.

Same behaviour in Chrome, Opera and Firefox.

I have tried picturefill, retina.js and retina-images. Nothing ever swaps on my desktop monitor (Dell U2412M).

Update:
I managed to get it to work with server-side retina-images.

1) Since this method seems more versatile, and also does not need downloading of images twice, why is it not the “recommended method”? What are the drawbacks of this method?

2) My .htaccess in the root folder did not get changed when I activated this method. It still has the same content and hash values. Isn’t that strange?

Hi,

It does not work with the Retina.js method either.

I just tested deactivating your plugin and installing the retina.js as a standalone script (downloaded from https://imulus.github.io/retinajs/), and the effect is the same. Link to attachment page and it swaps, but link to media file and it doesn’t swap.

So indeed the problem seems to lie with retina.js.

Do you have any ideas of how to troubleshoot this issue further?
I am just speculating now, but if retina.js is changing the HTML on the fly it is actually logical that it does not swap for links to media file, since there is no HTML to parse and swap, there is just a link to a file.

Hi,
Skipped in the sense that the plugin does not generate @2x-files. Neither automatically on upload, nor when clicking the “Generate” button in the “Retina images view”.

From the log file, when the plugin should create the @2x images, it fails because the “original file” is not correctly reported since the plugin can’t handle ? ? or ? at the beginning of file names.

In the error log below I uploaded four files (identical but with different names):
Horisontlinje.jpg
?Horisontlinje.jpg
?Tableau.jpg
T?ableau.jpg

2015-02-07 10:01:19: ** RETINA INFO FOR ATTACHMENT '2015/02/Horisontlinje.jpg' **
2015-02-07 10:01:19: - Original: Horisontlinje.jpg
2015-02-07 10:01:19: - thumbnail: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/Horisontlinje-150x150.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/[email protected] => RESIZE
2015-02-07 10:01:19: - medium: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/Horisontlinje-300x299.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/[email protected] => RESIZE
2015-02-07 10:01:19: - large: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/Horisontlinje.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/[email protected] => COPY
2015-02-07 10:01:19: - large: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/Horisontlinje-500x499.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/[email protected] => RESIZE
2015-02-07 10:01:19: - post-thumbnail: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/Horisontlinje-604x270.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/[email protected] => FAIL
2015-02-07 10:01:21: ** RETINA INFO FOR ATTACHMENT '2015/02/?…Horisontlinje.jpg' **
2015-02-07 10:01:21: - Original: Horisontlinje.jpg
2015-02-07 10:01:21: - thumbnail: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/?…Horisontlinje-150x150.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/[email protected] => EXISTS
2015-02-07 10:01:21: - medium: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/?…Horisontlinje-300x299.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/[email protected] => EXISTS
2015-02-07 10:01:21: - large: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/?…Horisontlinje-500x499.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/[email protected] => EXISTS
2015-02-07 10:01:21: - post-thumbnail: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/?…Horisontlinje-604x270.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/[email protected] => FAIL
2015-02-07 10:04:21: ** RETINA INFO FOR ATTACHMENT '2015/02/?…Tableau.jpg' **
2015-02-07 10:04:21: - Original: Tableau.jpg
2015-02-07 10:04:21: - The Original File '/customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/Tableau.jpg' cannot be found.
2015-02-07 10:11:26: ** RETINA INFO FOR ATTACHMENT '2015/02/T?…ableau.jpg' **
2015-02-07 10:11:26: - Original: T?…ableau.jpg
2015-02-07 10:11:26: - thumbnail: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/T?…ableau-150x150.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/T?…[email protected] => RESIZE
2015-02-07 10:11:26: - medium: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/T?…ableau-300x299.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/T?…[email protected] => RESIZE
2015-02-07 10:11:26: - large: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/T?…ableau.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/T?…[email protected] => COPY
2015-02-07 10:11:27: - large: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/T?…ableau-500x499.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/T?…[email protected] => RESIZE
2015-02-07 10:11:27: - post-thumbnail: /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/T?…ableau-604x270.jpg -> /customers/d/9/a/peterwennersten.com/httpd.www/dev/wp-content/uploads/2015/02/T?…[email protected] => FAIL

Testing further and realising that when the thumbnail is linked to “attachment page” is does swap in a retina file, but when linked to “media file” (necessary for lightboxes) it does not swap in the @2x.

Is it a bug or a feature? ??

No sizes are disabled in the “retina options”.

*************

Please disregard everything above. I was trying your plugin out on an site where I had forgotten that an old hard-coded lightbox was operating behind the curtains. Your plugin works great!

*************

@gulfarsson,
Did you solve this issue or are first-timers on a site still served non-retina images until they refresh?

a {
outline: none;
}

though you probably need to target the a more precisely depending on your markup.

Bear in mind that removing the link outline will affect your site’s accessibility.

EDIT: Found the templates folder with the appropriate html to change…

I have been digging a bit in the js, css and html, and it seems that the problem is twofold:

1) In the CSS there is:

.blueimp-gallery > .title {
display: none;
}

and it has to be set to “block” for the title to show up in the lightbox.

2)
But even so, there is no title for the the js to fetch in the html, so the script has nothing to display.

In the html for an image opened in the lightbox, there is an empty h3 tag which should contain the title. We can test this by adding text in developer mode to the following line, and it will show up as the title of the image (if display block has been set in the css beforehand):

<h3 class="title"></h3>

However, how to get the titles we enter in wpadmin to be generated by the js/php and populated into each image’s h3 tag, is beyond my knowledge, since I am not any good with js/jq or php.

Perhaps someone with more knowledge could give a hand now that the location of the malfunction is identified.

+1
I would really like to see titles or captions in the fullscreen lightbox.
A quick word from the developer that it is not forthcoming would also be welcome if that is the case.

/null/