After Blogger Import – Post Images Note Displayed Correctly

How these images display within your site is either going to be based on the inline HTML in the post or page, or the the CSS associated with them.

You should not have to fix 3000 posts at all.

First, you could create a function to strip specific text from a post and replace it with another (or even use MySQL to do so), if it is inline.

Second, what you most likely need to review is the CSS of the old site related to images and mimic that in your theme:

To discover what CSS is output by your theme, use a web inspection tool such as Firebug: https://getfirebug.com/ , Chrome Inspect Element: https://developers.google.com/chrome-developer-tools/ or Internet Explorer 9+ F12 Dev. Tools: https://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx#csstool

There are others.

When editing CSS, use a Child Theme
https://codex.www.ads-software.com/Child_Themes
Custom CSS Plugin, or Theme provided custom CSS option.
Edits to parent themes are lost on theme update.

Learn CSS: https://www.w3schools.com/css/

Here are my concerns. First, when I was doing my testing, I made the child theme so that my images would display the way I wanted. Unfortunately, I didn’t do a test migration. I simply copied the HTML of various Blogger posts, pasted them into WordPress, and voilà! I did notice that the “imported” article vs. one I actually wrote in WP looked a bit different in image placement, but I wasn’t too concerned about that (mainly due to padding — the imported images had slightly less).

Second, not all of my images are inline. Some are centered, and some I even experimented with other things while on Blogger.

Anyway, my mistake was assuming that when the posts were imported, the code would survive with the left/right/center markers intact. As I look, those markers were stripped out. Since my Blogger blog was being scraped by two pirate blogs using WordPress, and the formatting was coming up perfect, I assumed that the WordPress importer tool would do likewise. ^_^;

I’ll take a gander at the CSS, as you suggest, but I don’t want to jack with what it took me weeks to figure out and tweak in the child theme (I know nothing much about CSS, but I do have the gift of figuring things out with time, which is how I was able to make my child theme). In the end, I may have to do the image tweaks manually, as a couple of others have already suggested to me via other means.

Still, I’m open to all suggestions and I DO appreciate you taking the time to reply to this. ^_^

not all of my images are inline

I was referring to styling the img element inline (old school).

Example:

<img style="padding-left:10px;" ..../>

These were at times created instead of classes or ID’s with the proper corresponding styles in the stylesheet usually needing !important to override:

.some_div img {padding-left:0 !important;}

!important

So review this by looking at the output HTML (Source code) and remember that you can test your tweaks with one of the methods noted above. You can likely tweak fairly easily. You might apply, for example, styles for ones that have inline style of align:left, align:right, or text-align:center.

I can’t look at every case, but take the time to take careful notes about an image not aligning properly and review all above.

Here’s another issue. The image tags of the imported posts are not being flagged. For example…

<img alt="" src="https://anime.astronerdboy.com/wp-content/uploads/blogger/-JPErPySXdJs/UqSuCx185rI/AAAAAAAAjxk/7q2PCvAanfg/s200/01%2BRyuuko%2Bvs%2BHouka.jpg" width="200" height="112" border="0" />

There’s nothing here to indicate whether this was a left-justified image or a centered image. Yet that’s how the imported code is for all images, the variables being the width/height, but that’s not constant as an indicator. ^_^;

Your second link is a 404, btw.

Yeah, that was done for the 301 redirects from Blogger. ^_^; Here’s the updated URL:

https://anime.astronerdboy.com/2013/12/kill-la-kill-12-mc-nui-sez-cant-touch.html