Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


Wordpress not honoring "alignright" on images, help please!
New on LowEndTalk? Please Register and read our Community Rules.

All new Registrations are manually reviewed and approved, so a short delay after registration may occur before your account becomes active.

Wordpress not honoring "alignright" on images, help please!

jbilohjbiloh Administrator, Veteran
edited April 2022 in General

Hi Everyone,

For as long as I can remember LowEndBox's WP install/theme has not honored alignleft/right/center on images in the editor.

For example a recent post looks like this in the editor:

But the actual post looks like this:

Maybe I am missing something in the css to allow for the text to properly wrap around and for the image to actually be aligned right?

I've Google some things the past hour but haven't had much success.

I added the following to the css but that did not fix the issue:

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.aligncenter{
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}

«1

Comments

  • FalzoFalzo Member
    edited April 2022

    it's probably because your image at this point is within the h3 scope of the 'gardencloud' title, which has a clear:both ...

    Thanked by 3Nekki Lee adly
  • bikegremlinbikegremlin Member
    edited April 2022

    Which WP version, which theme, and are you using Gutenberg, or the Classic editor?

    Edit:

    With Gutenberg, for example, this is the result:
    https://bike.bikegremlin.com/

    And this is how I did it:
    https://io.bikegremlin.com/22393/how-i-built-this-wordpress-website/#4.2

    Latest & greatest WP, and GeneratePress theme.

    Classic editor is a headache in the long run, IMO, so I'd move away from it sooner, rather than later.

  • LeeLee Veteran

    @bikegremlin said: Which WP version, which theme, and are you using Gutenberg, or the Classic editor?

    why is any of this relevant for a CSS issue?

    Thanked by 1bikegremlin
  • @Lee said:

    @bikegremlin said: Which WP version, which theme, and are you using Gutenberg, or the Classic editor?

    why is any of this relevant for a CSS issue?

    Because he's using the classic editor and it can lead to issues with up to date themes.

    Thanked by 1bikegremlin
  • LeeLee Veteran

    @SirFoxy said: it can lead to issues with up to date themes.

    Perhaps, but LEB is an old custom theme.

  • @Lee said:

    @SirFoxy said: it can lead to issues with up to date themes.

    Perhaps, but LEB is an old custom theme.

    Out of date themes with up to date installations of WP can also lead to issues.

  • will using wordpress make me a weak dev?

    Thanked by 1yoursunny
  • jbilohjbiloh Administrator, Veteran

    Running WP Version 5.9.3.

    Using a custom template for LowEndBox.

    Using the classic editor and not the latest block editor.

  • YmpkerYmpker Member
    edited April 2022

    For me it looks like this:

    Anyway, you can try using a GUI tool like Microthemer (Lite version is free) to adjust CSS stuff: https://de.wordpress.org/plugins/microthemer/

    Otherwhise you could use Google Dev tools to make the edits you want then add as custom code to wp.

  • NekkiNekki Veteran

    @duckeeyuck said:
    will using wordpress make me a weak dev?

    Might as well wear a hat that says ‘slap me, I’m weaksauce’ and pay men to smash your missus’ back doors in whilst you cry in the corner.

  • MehdMehd Member, Host Rep

    Worst case use a builder. Bast option is to switch to better solutions if it is for a blog I would go for Ghost

  • yoursunnyyoursunny Member, IPv6 Advocate

    @duckeeyuck said:
    will using wordpress make me a weak dev?

    Yes.
    Mentally strong people use static site generator with handwritten themes.

    To align an image right, all we need is:

    <TABLE border=0><TR><TD align=right><IMG src=https://i.imgur.com/ugIIam5.png></TABLE>
    
    Thanked by 1duckeeyuck
  • duckeeyuckduckeeyuck Member
    edited April 2022

    @Nekki said: Might as well wear a hat that says ‘slap me, I’m weaksauce’ and pay men to smash your missus’ back doors in whilst you cry in the corner.

    @yoursunny said: Mentally strong people use static site generator with handwritten themes.

    That is exactly what I believe.

  • JorboxJorbox Member
    edited April 2022

    @duckeeyuck said:
    will using wordpress make me a weak dev?

    No, wordpress is not just a blogging script, its a cms and its even turning to a framework I have developed many plugins and many websites for big stores connected with accountant systems and shipping companies based on wordpress, also I have connected wordpress with exam systems and so many other systems, to be able to do that you have to be a developer

    You may think programming from scratch its harder than developing a wordpress plugin but this is not true, in wordpress you have to follow specific rules based on its hooks and functions and it has to be secure to be accepted in WP store but in your own script you can just write anything and screw things up without anyone notice or complain

  • raviravi Member

    @jbiloh said:

    I added the following to the css but that did not fix the issue:

    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    .aligncenter{
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    .alignright {
    float: right;
    }

    .alignleft {
    float: left;
    }

    CSS added by you will have no impact on the styling / display of the image.

    1) Images do not use the default wordpress alignment css classes for some reasons.

    2) Images use inline styling to align itself to the right.
    <img src="Charros_competing_in_a_charreada_in_Mexico-300x300.jpg" width="300" height="300" align="right" hspace="20" class="entered litespeed-loaded">

    Thanked by 1bikegremlin
  • bikegremlinbikegremlin Member
    edited April 2022

    @Lee said:

    @bikegremlin said: Which WP version, which theme, and are you using Gutenberg, or the Classic editor?

    why is any of this relevant for a CSS issue?

    Logical question.

    Because there are different ways to solve a problem. I had edited the original reply right away with an example of what works, quite easily, using Gutenberg - and I'd say that most popular themes play nicely with Gutenberg blocks.

    Gutenberg's far from perfect, especially for pages with thousands of words, but WP is pushing it whether we like it or not. I've switched to it, learned the ropes, and it's the less bad (or better, whichever way you look at it) option, especially in the long run (least IMO).

  • did u try adding "important!;" in css ?

  • FalzoFalzo Member
    edited April 2022

    oh, boi.

    PS: just to be clear, this is only pointing out again, what the issue is. removing the clear:both from the h3 might have other unwanted consequences, because most likely it is there for a reason.

    however, easy workaround could be to make sure your image is not in or before the h3, or do not use h3 at all in that context. done.

  • FalzoFalzo Member

    PPS: the behaviour in the editor/wysiwyg/preview is different, because that specific css most likely is added at some place, that is not included in the admin/editor view.
    the exact location cannot be told just from the external view, because the css is obviously combined.

    Thanked by 2bikegremlin Not_Oles
  • NoCommentNoComment Member
    edited April 2022

    The easiest way to deal with this especially for a blog environment like lowendbox is to write your own gutenberg block templates. It could be just blocks of text, blocks with two grids, text on the left and image on the right and so on. That's the "wordpress" way to deal with this problem because your editors won't have to touch any of the css and its very modular.

    I think it should be quite cheap to hire some guy to write these blocks. If budget is a problem then just buy some plugin. If you aren't using gutenberg or the theme doesn't play well with it, another solution is to write php page templates but that wouldn't be modular.

    The point of wordpress is for non-technical users to be able to write blog posts. Fiddling with css is counterproductive.

  • NekkiNekki Veteran

    @Falzo said:
    oh, boi.

    PS: just to be clear, this is only pointing out again, what the issue is. removing the clear:both from the h3 might have other unwanted consequences, because most likely it is there for a reason.

    however, easy workaround could be to make sure your image is not in or before the h3, or do not use h3 at all in that context. done.

    Is there any legitimate reason to put an image within a heading tag?

    Thanked by 2yoursunny Falzo
  • devpdevp Member

    In simple words:

    • General CSS Properties are overriding custom CSS Properties.
    • More indepth CSS hierarchy is given more priority in parsing CSS.

    Recommendation:

    • Build a Custom CMS.
  • @Falzo said: oh, boi.

    Offtopic, but that screenshot made me realize Not_Oles is putting some really crappy articles out there that Jon shouldn't really be paying for.

    Thanked by 4devp yoursunny Lee adly
  • devpdevp Member

    @stevewatson301 said:

    @Falzo said: oh, boi.

    Offtopic, but that screenshot made me realize Not_Oles is putting some really crappy articles out there that Jon shouldn't really be paying for.

    Agreed.

  • NekkiNekki Veteran

    @stevewatson301 said:

    @Falzo said: oh, boi.

    Offtopic, but that screenshot made me realize Not_Oles is putting some really crappy articles out there that Jon shouldn't really be paying for.

    I suspect NO is just being told to do whatever he wants with little to no direction. I also suspect JB isn’t paying the sort of money that an experienced writer would require, so he’s probably getting exactly what he’s paying for.

    Thanked by 2Erisa adly
  • yoursunnyyoursunny Member, IPv6 Advocate

    @Nekki said:

    @stevewatson301 said:

    @Falzo said: oh, boi.

    Offtopic, but that screenshot made me realize Not_Oles is putting some really crappy articles out there that Jon shouldn't really be paying for.

    I suspect NO is just being told to do whatever he wants with little to no direction. I also suspect JB isn’t paying the sort of money that an experienced writer would require, so he’s probably getting exactly what he’s paying for.

    LowEndDetectives ™️ is on LEB now.
    16TB Club is next.
    The photo should be @Nekki and @Murv sleeping on a pile of manure.
    The article shall have offers from PulsedMedia.

    Thanked by 4Nekki Erisa devp Murv
  • bulbasaurbulbasaur Member
    edited April 2022

    @Nekki said: I suspect NO is just being told to do whatever he wants with little to no direction. I also suspect JB isn’t paying the sort of money that an experienced writer would require, so he’s probably getting exactly what he’s paying for.

    The articles that Not_Oles is putting out aren't even worth the $750 he's paying. There are a few forum members on here that he could pay instead, if he at least negotiated for a lower quantity of articles.

    But Jon's lack of direction isn't anything new. A top provider here went into details about how Coloncrossing is not worth dealing with either. What's more, it's not like he gave some guy with a sham benchmark tool the title of "Server Review King", instead of a guy who actually had some demonstrable level of competence to be actually entitled as such.

    @yoursunny said: LowEndDetectives ™️ is on LEB now.

    Instead of putting out a piece of crap that no person with two brain cells would spend their time reading, that time could have been spent more usefully writing an article named "Tracking tinyweasel" and actually doing some recon on the guy which would have gained far more interest. That recon work also doesn't take more than a few minutes, and it would have garnered more interest.

    Thanked by 3cybertech devp adly
  • FalzoFalzo Member

    @Nekki said:

    @Falzo said:
    oh, boi.

    PS: just to be clear, this is only pointing out again, what the issue is. removing the clear:both from the h3 might have other unwanted consequences, because most likely it is there for a reason.

    however, easy workaround could be to make sure your image is not in or before the h3, or do not use h3 at all in that context. done.

    Is there any legitimate reason to put an image within a heading tag?

    lol. not that I know of. it's probably not done intentionally but just the way those wysiwyg tools change things based on the actions of the clicketyclick millenial ;-)

    Thanked by 1yoursunny
  • My OCD gets triggered by the spacing he's inserting to "Low End Talk" and "Low End Box."

    Thanked by 1TimboJones
  • jbilohjbiloh Administrator, Veteran

    @Falzo said:
    oh, boi.

    PS: just to be clear, this is only pointing out again, what the issue is. removing the clear:both from the h3 might have other unwanted consequences, because most likely it is there for a reason.

    however, easy workaround could be to make sure your image is not in or before the h3, or do not use h3 at all in that context. done.

    I'm going to give this another look in a few hours, I didn't have time to return to my efforts to solve the problem yesterday.

Sign In or Register to comment.