CKEditor 4 add space between images

AMota · March 22, 2021, 4:21pm

Hello,

I upgraded my old server from 2.10.10 to the great 3.6.1, it works very well and I love the new layout, functions and especially the tracking function.

But I have a small “problem”, when I create a message with the new editor (CKEditor) there is some space between the images. With the old editor (I also tested disabling CKEditor and enabling the old one), it doesn’t happen.

I try to remove the space in the html code, but it doesn’t work. Any solution? I need to use split images because I need to create hyperlinks for each product.

Thank you

duncanc · March 23, 2021, 10:43am

@AMota can you show the html generated by the two editors, so see what is different?

I tried doing this and both editors wrapped each image with a <p> element that probably causes the gap.

If you edit the html source you can change it to be just one <p> with a <br/> separating the two images.

<p>
<img alt="" src="https://www.dcameron.me.uk/uploadimages/image/dog.jpg" style="width: 208px; height: 171px;" />
<br />
<img alt="" src="https://www.dcameron.me.uk/uploadimages/image/dog.jpg" style="width: 208px; height: 171px;" />
</p>

The editor displays a gap that does not appear in the actual email.

AMota · March 23, 2021, 12:39pm

Thank you so much for your reply.

There is the html code with the new editor:

I also detect that depends where we receive the e-mail.

On Outlook 2007 no gap:
next post because I’m new user, only allow post one media

On gmail (with Firefox) have gaps:
next post because I’m new user, only allow post one media

I try remove the cell, gap keeps. But if choose “Title 6” from the format selection the gap reduce a lot but still present.

I know that isn’t a big problem, but with this gap my design for the Newsletter looks amateur.

AMota · March 23, 2021, 12:40pm

On Outlook 2007 no gap:

AMota · March 23, 2021, 12:41pm

On gmail (with Firefox) have gaps:

AMota · March 23, 2021, 12:50pm

I also try your sugestion (remove cells, only use images) but the gap still appers on gmail.
In fact on PhpList preview message where is no gaps, so the issue maybe is on the gmail viewer

duncanc · March 23, 2021, 2:48pm

@AMota This displays without a gap in gmail and yahoo mail, by adding display: block to the img elements and padding: 0px to the table and td elements

<table style="padding: 0px; border-collapse: collapse;">
	<tbody>
		<tr>
			<td style="padding: 0px;"><img alt="" src="https://www.dcameron.me.uk/uploadimages/image/dog.jpg" style="width: 208px; height: 171px; display: block;" /></td>
		</tr>
		<tr>
			<td style="padding: 0px;"><img alt="" src="https://www.dcameron.me.uk/uploadimages/image/dog.jpg" style="width: 208px; height: 171px; display: block;" /></td>
		</tr>
	</tbody>
</table>

AMota · March 24, 2021, 10:39am

@duncanc WOW you are my savior!!! Works perfect, thank you so much! You are a HTML God!!

Now I’m explore all new phplist features, and I found the Template option. With this I can make my header and bottom common to all campaign one time only and works very well.

With your new code to remove the gaps on GMail viewer I do the same on template and fantastic. But I have one line with 3 images, sellers contacts, if I use “display: block” is one image for line, I try “display: inline” and “display: inline-block” with no success to remove the gap to the next image.