ticktickatick

No, I tried to explain this in the first post, but with a fixed width button, because the Row Layout is responsive, there is no way to guarantee a 16px space between the two buttons.

https://imgur.com/a/uKbh1Wk

Same. But the author of this plugin has said, in layman’s terms, that he doesn’t care. As it is his volunteer time, he can do what he wants.

I would gladly pay a shareware fee for this plugin if it continued to support the Classic Editor. As WordPress is continuing to support Classic until 2022 or longer, it seems premature to dump Classic right now.

I won’t update to 5.1.0 and am looking for alternatives. I am not convinced that Gutenberg has the UX to survive. Gutenberg is only fit for homemade blogs. It doesn’t work for business websites. The bulk of WordPress users are professionals. The people who can’t handle hosting their own site can buy a domain name on WordPress.com and get Gutenberg in all of its dumbed-down glory. Not sure why they’re forcing this awful UX on the business CMS side.

You can download old versions by going to Advanced View here: https://www.ads-software.com/plugins/academic-bloggers-toolkit/advanced/

Here is the style.css classes. Currently in their original form.

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}
.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}
.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}
.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.alignnone {
    margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}
.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
a img.alignnone {
    margin: 5px 20px 20px 0;
}
a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

• This reply was modified 5 years, 11 months ago by keesiemeijer.
• This reply was modified 5 years, 11 months ago by keesiemeijer. Reason: Fix code formatting

B00R5DSC2I

I believe I have narrowed it down further…

WordPress sometimes adds or modifies images with a space in the class between the first ” and the first class:

class=” alignnone size-full wp-image-2704″

class=” size-full wp-image-2704 alignright”

I don’t know why it does this. I tried it on a stock install and it did this with images as well. WP still recognizes everything it needs to with alignment with the class statement like this.

WP Retina 2x however breaks if there is a space in the class statement.

I have made the post password protected

password: retina2x

https://photo.cadence.im/test/

I have removed the test page as I can’t have a test page showing up in my blog feed

I have noticed that it is not the alignment persay but it is where WordPress decides to put it in the class statement.

If it puts the align class first in the class statement: class=”alignright blah blah blah” or class=”alignleft blah blah blah” then it loads the Retina version.

But if WordPress does “blah blah blah alignright blah blah” or “blah blah blah alignleft” then it loads the regular version.

There does not appear to be a way to control the order of the class statement on the user end. If you ever edit an image or the text around it, or make any modifications basically, the class order may switch.

If you could figure out some way to fix this that would be great…going into code all the time is not really a good solution…and sometimes when I reload a post editor it changes things around, so every time I edit a post I would have to re-do that on every image.

Here is a test page

https://photo.cadence.im/test/

First one is centered and does not load retina. It is obvious on a Retina screen but you can verify by right-clicking and opening image in a new tab.

Second one is left aligned and is the Retina version.

This is the code

<a href="https://photo.cadence.im/wp-content/uploads/brittany_jai_2.jpg"><img class=" size-full wp-image-2709 aligncenter" src="https://photo.cadence.im/wp-content/uploads/brittany_jai_2.jpg" alt="brittany_jai_2" width="750" height="500" /></a>

<a href="https://photo.cadence.im/wp-content/uploads/brittany_jai_2.jpg"><img class="alignnone size-full wp-image-2709" src="https://photo.cadence.im/wp-content/uploads/brittany_jai_2.jpg" alt="brittany_jai_2" width="750" height="500" /></a>

It works with “alignleft” and “alignnone” classes but not “aligncenter” or “alignright”. I am selecting the alignment using the image alignment hover in the WordPress visual editor.

Here is an example of the difference:

[ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ]

<a href="test2.jpg"><img class="size-full wp-image-2709 alignleft" src="test2.jpg" alt="test2" width="750" height="500" /></a>

^ loads retina version when user views blog post

<a href="test1.jpg"><img class="size-full wp-image-2710 alignright" src="test1.jpg" alt="test1" width="750" height="500" /></a>

^ does not load retina version when image is aligned center or right

I have no other image plugins installed besides WP Retina 2x.

So it looks there is a bug.

It works as above with a photo in a blog post but only the photo is left-aligned.

If I center align it (using WordPress’s built-in align function when you hover over an image) it no longer loads the Retina version.

I went ahead and bought the Pro to try it out, but would like some verification that I am doing this correctly.

I upload a file, let’s say it is 750×500 dimensions, called image_1.jpg

I upload another file in the Retina dashboard on the Full-Size Retina upload. It is 1500×1000 dimensions, called [email protected]

In my blog post, I just “add media” as normal, adding the image_1.jpg as full size. WordPress automatically sets the image size in the IMG tag to 750×500.

Is this right?

Also it centers on Safari on Firefox. It does NOT center on Chrome which is my primary browser. I’m on a Mac latest version of OS X.

Should add that right alignment works. But center does not.