Sorry for the long story but it’s a complicated matter.
With the transfer to a new template I noticed some of the jpgs got lost. They’re still in the Media Lib but show up blind in the post. It also happens in my blog with the old template, it’s obviously a general hitch.
But I noticed that the code tags of images are not always the same. A centered image for instance, has the preceding code
and in the following, actual code tag once more a ‘center’ indication, but sometimes there’s a residue of the initial Left position: ‘alignnone’.
Others don’t show that prefixed code, just ‘center’ in the main code tag. I wonder why.
The pixel width/height details are mostly placed at the end of the code, but once in a while they are somewhere in the middle. These measurement details I was advised to remove, which I do consequently, although I’m not sure anymore that this helps to ‘fix’ the jpeg better, and it’s all extra work…
But the fixation of placed jpegs is my main concern. Is there a standard arrangement/lay-out for these codes that works best?
Another slight nuisance: a row of images that all have different widths, I center. It simply looks better. But on Dusk to Dawn, they get spaced out too far. 0,7 inches (18 millimeters). With ten images in a row, that’s an extra – gasp! – 7 inches to scroll…
Editing the codes without line break doesn’t help, and when I edit the codes running continuously – tail to head – they either, Bingo! show the desired smaller space diversion, or get, Bummer! glued together. It’s a struggle to get them the way I want.
I also use a font text code, and it has the indication ‘line-height X %’. I wonder, isn’t there something alike that I can add in the image code tag? Or is it fixed or play-restricted in the CSS of the template? (I know how to manipulate a cascade, but I don’t have the upgrade as yet)
Due to the ‘Mature’ application on my weblogs (my own choice) my nickname here in this forum is not linkable.
some of the jpgs got lost. They’re still in the Media Lib but show up blind in the post
Do you expect us to search the whole blog and click the read more tag for every post? Link to or point to a post where this is happening please!
A centered image for instance, has the preceding code p style=”text-align:center
Others don’t show that prefixed code
I wonder why.
That’s not the coding for centering an image, it’s the coding for centering the text of a paragraph. Obviously you have centered some paragraphs yourself but haven’t centered others (the default in most themes is left-aligned text).
The pixel width/height details are mostly placed at the end of the code, but once in a while they are somewhere in the middle.
Is there a standard arrangement/lay-out for these codes that works best?
The order of commands inside an HTML tag usually doesn’t matter. Again, pointing to specific examples would help clear this up. (Note: if you point to a post, we can see your HTML).
a row of images that all have different widths, I center.
isn’t there something alike that I can add in the image code tag?
I guess you mean a column, not a row. Yes you can change the distance between each image and the next. But first point to such a post please.
Link to or point to a post where this is happening please!
I have re-posted these images by now (in posts that are relatively recent), and other missing items I haven’t detected so far simply because I’m talking 100-200 posts here… I’ll go on a search right away but it may take some time.
it’s the coding for centering the text of a paragraph. Obviously you have centered some paragraphs yourself
Makes sense. I’ll check it out.
(Note: if you point to a post, we can see your HTML)
You’ll get your postlink. I didn’t give it because I thought this peek-into was only done after Admin itself got contacted by the requester…
I can of course post fresh images in a Test item to show where these pixel measures are positioned, but look, is it necessary? I just wanted to know if leaving or removing these details makes any difference.
I realize that I should have put it in a separate Question item.
I guess you mean a column, not a row
I thought ‘row’ would paint the picture. My knowledge of English is average,panaghiotisadam, I sometimes cannot find the right word immediately.
Okay, I’ll report back.
Re your last reply: I’m not a native English speaker either, but here we’re not talking literature, we’re talking technical advice, so to give you the right advice I must first make sure I have understood correctly. Arranging images in rows and/or columns is standard jargon: row = horizontal series, column = vertical series.
I’ll remember that.
Here an example of wide spacing in centered images (sorry for the shlockhorror picture on top, I’m the type that doesn’t know what ‘tact’ and ‘good taste’ means. hence the darned Mature Contents)
Page 1, scroll to the bottom:
The ‘center’ prefix. This is an interesting example.
The first and smallest jpeg in the column of six (scroll to the bottom, Kadyrov red boxing gloves) has no text prefix.
However, the spacing between this and the next photograph is still a bit wider than in the post I laboriously corrected yesterday by ‘tail-head’ editing technique. Page 1, scroll to halfway:
The five successive ones in the post about Kadyrov have a text prefix, (and ‘alignnone’ in the image code), and show extra spacing. Not evident in the text in the Visual editor field, only visible after appearing in the homepage.
In both posts I changed the ‘Line-height 130%’ to 100%, but it doesn’t do anything to the spacing of the jpegs.
In both posts no text has been centered. There are Quotes, however, and some Right aligned pictures with TextWrap, and I always end with a disclaimer aligned to the right side.
It does sometimes happen that by accident I center an image and take the text underneath or above in the process along because image and text were to close together in the editor. Which is easily corrected. But could it be that after the correction, the prefix stays attached to the image code?
I have no example of ‘glued together’ pictures, what I found earlier I already corrected last night. My decision to post the matter here came after that.
Haven’t found other missing jpegs so far, but if it helps, the one I had to replace showed no empty field in the original picture format, only a tiny Broken-File icon. After uploading it anew it appeared and it’s still there. If you want to check the code anyway, click the top link once more, Page 1, and look for the third picture; Nepali policemen. I know from experience that disappeared images tend to re-appear at the next blog visit, but one or two may simply never return. As I can’t stand closed jpegs I never wait long enough to find that out.
3) No, checking the code of an image that was re-inserted and does show up cannot help find out what was wrong when it wouldn’t show up.
2) The red gloves image has much space below it because it has been inserted as a paragraph of its own (whether the paragraph has a text-align attribute or not makes no difference: as you know, paragraphs are separated by blank space – no matter what the alignment of the text). The five images in the other example have been inserted the one after the other with no line or paragraph breaks between them (so they’re all like one continuous chunk of text broken into successive lines because it won’t fit horizontally), so no extra space.
1) And that’s the easy solution to your first question. But if you want to have precise control over the amount of space between images, you’ll need to add negative margins to reduce the space (when you add line or paragraph breaks between them).* In the visual editor, click on each image, click the Edit icon, click Advanced Settings, type -8 in the “Vertical space” field, click Update (image); click Update (post) when you’re done with all the images. Or, in the HTML editor, change this:
<img ETC ETC ETC
<img style="margin-top:-8px; margin-bottom:-8px;" ETC ETC ETC
If you don’t add
Of course you realize that -8 is just an example: the whole point is that this allows you to freely adjust the space by changing the numbers.
* When you don’t add line breaks, you’ll need plain instead of negative numbers, to increase the space.
The HTML way is faster, I guess, plus it allows you to set a number for the top and a different one for the bottom, if necessary.
And much faster: when I want to apply the same change to many similar items (in an already published post), I copypaste the content from the HTML editor into a simple text file, use the find-and-replace tool and replace them all at once, then copypaste back to the HTML editor.
By the way, as we had already said, in some cases you have centered images by centering the paragraphs that enclose them (I guess by highlighting the images in the visual editor and clicking the align-center tool). That happens to work in the theme you’re using, but it’s not really the right thing to do, as in many themes it won’t work. Better forget that and select the image alignment option upon inserting each image. Note that the image tool always remembers your last selection, so you won’t have to click Center or whatever every time you insert an image, you’ll only have to click it when you want a different alignment than the pre-selected one.
(Strike out the junk “If you don’t add” before “Of course”)
Yes, this is it.
With some codes it worked, with others not, I had to delete them and reloaded them, with the ‘center’ prefixed in the uploader. Great!
I’ll experiment further with your copy/paste trick for all images in older posts, because it won’t do to reload all images, there are simply too many. Also, I’ve been messing in older posts a lot, which seems a risk for invalidly nested XHTML (I activated the correction option) as I read somewhere. Nevertheless, for future posts I’m going to maintain this procedure.
panaghiotisadam, thanks, this was most helpful.
The topic ‘Jpeg codes’ is closed to new replies.