The new Gmail Grid view displays selected images within emails in a grid like page. I've found a case where Gmail's image auto selection routine may get into a state that results in no image displayed in the Grid View even though there are ample image candidates in the email.
I believe this is caused by a conflict between the routine that selects the image and the routine that processes the image.
When using the Offer schema markup (bypassing the auto selection process), Gmail allows me to use images as small as 233x161 - this shows that the image processor's minimum is 233x161.
For emails without Offer schema, Gmail selects an image within an email as small as 100x100 by scanning through the HTML image width and height attributes.
If an image that falls between 100x100 and 233x161 is selected, it is never rendered, causing an email that may have other larger images in the email to be displayed without a featured image in Grid View.
Here's how I came to this conclusion.
Here is the code I'm referring to:
<html><body>
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td align="center" valign="top" bgcolor="#ffffff">
<table width="560" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_01_01.gif" alt="American Eagle Outfitters" width="154" height="74" border="0"></td>
</tr>
</table>
<table width="560" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_02_01.gif" alt="Men" width="58" height="43" border="0"></td>
<td><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_02_02.gif" alt="Women" width="91" height="43" border="0"></td>
<td><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_02_03.gif" alt="Aerie" width="78" height="43" border="0"></td>
<td><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_02_04.gif" alt="Shoes" width="83" height="43" border="0"></td>
<td><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_02_05.gif" width="120" height="43" alt="Clearance" border="0"></td>
<td><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_header_02_06.gif" width="130" height="43" alt="AEO Factory" border="0"></td>
</tr>
</table>
<table width="560" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td><img style="display:block;" src="http://placehold.it/560x117" alt="Just Because It's April 1st Doesn't Mean It's April Fools..." width="560" height="117" border="0"></td>
</tr>
</table>
BANNER 1 560x117 (above)<BR><BR>
<table width="560" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td><img style="display:block;" src="http://f.e.ae.com/i/35/2075863384/AE_Email_140326_3_body_01.gif" alt="Est. 2014 | American Beagle Outfitters" width="560" height="209" border="0"></td>
</tr>
</table>
<BR>BANNER 2 560x209 (above)<BR><BR>
</td>
</tr>
</table>
</body></html>
This email contains two "main images":
560x117
560x209
If you sent this email to yourself, there will be no Featured Image.
However, if you swapped the image referenced in 560x117 with an image that is taller than 161 pixels ie. 560x162 then the 560x162 image will be featured in the Grid View.
This leads me to believe that the following is happening:
The image selection routine selected the 560x117 image because it "passed" its minimum size (100x100).
Then it sent it to the image processor.
In the first scenario, the processor retrieved the image and realized its smaller than its minimum dimension (233x161) and rejected it and no image is shown in Grid View.
In the second scenario, when the image is retrieved, although the HTML width and height attributes says its 560x117, the image processor retrieves the image and detects the real image dimension as 560x162. Since this is above its minimum, the image is processed and displayed in the Grid View.
I added the second image to show that if you merely removed the first image (in a separate test), the 560x209 image will be featured - which lead me to believe the first image is causing a problem since no image is featured at all originally.
Possible resolution:
Change the image auto-selection routine to only select images that are 233x161 or larger
Related
I've run into some issues with vertical alignment for an image (using bootstrap 5).
In the index.html I've created a number of thick strips that alternate being colour and then white, with each about 800 px each. I've set the height of each strip in css to 800px.
I'm trying to place an image in each strip and the image sizes will differ in width but none will be greater than 800 px in height. The image doesn't seem to be vertically centred when I used the suggestions from the post below:
Bootstrap Center Vertical and Horizontal Alignment
There is this example given https://www.codeply.com/p/0VM5MJ7Had
And the div tag used to center everything is
<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
In the tag above if the min-vh-100 is removed then the content just moves up to the top of the screen even though it's still justify-content-center and align-items-center.
I'm still struggling to get my head around how vertical alignment works and the relationship between containers and rows to aligning an image vertically.
<!-- color background -->
<div id="first_strip" >
<img src="../images/" class="img-fluid" alt="" />
</div>
<!-- white background -->
<div id="second_strip">
<img src="../images/" class="img-fluid" alt="" />
</div>
<!-- color background -->
<div id="third_strip" >
<img src="../images/" class="img-fluid" alt="" />
</div>
etc.
How can I control the width of the columns in MatBlazor MatTable
I have fiddled a bit around, and by disabling the css class mdc-table in the browser 'inspector'... it seems to be possible to get 'normal' table behavior.
right now all column except the last column is quite narrow, (actual widths: 119, 153, 460)
the last columns is just two icons, so it should be about 100px width, and the middle column is a quite long text string, so I would like that to be much wider.
There isn't much drama about the code, but here it is anyway...
<MatDialog #bind-IsOpen="#ShowBeginCreateNewSLA">
<MatDialogTitle>Service level agremeents</MatDialogTitle>
<MatDialogContent>
<MatTable ShowPaging="false" Items="SLAOptions">
<MatTableHeader>
<th>Id</th>
<th>Description</th>
<th>Action</th>
</MatTableHeader>
<MatTableRow>
<td>#context.Id</td>
<td>#context.Description</td>
<td><MatIconButton Icon="delete" /></td>
</MatTableRow>
</MatTable>
</MatDialogContent>
<MatDialogActions>
<MatButton>Close</MatButton>
</MatDialogActions>
</MatDialog>
Any idea what I can do?
I found that the way to set it, also mentioned in the documentation, is simply to insert a div with a fixed with in the table header, such as
<th><div style="width: 200px">Options</div></th>
I am using mat-toolbar and I would like to create bottom navigation. Similar to this enter image description here
I am not able to get a curve at top border
My result:
enter image description here
Here is my code:
HTML
<div class="footer">
<mat-toolbar class="toolbarNav">
<mat-icon class="material-icons color_blue" >home</mat-icon>
<mat-icon class="material-icons color_blue">question_answer</mat-icon>
<div class="create"> <button type="button" class="btn btn_create"
(click)="openDialog()"><img src="../../../assets/icons/Group 2090.svg"></button></div>
<mat-icon class="material-icons color_blue" >notifications</mat-icon>
<mat-icon class="material-icons color_blue" >person</mat-icon>
</mat-toolbar>
</div>
I suppose one good solution is using background svg's in your proposed forms, have you tried it out? There is one example https://stackblitz.com/edit/angular-8uxnb4?file=src/app/toolbar-overview-example.css showing to add an image as background, if you utilize SVG, it will allow you all shapes you like, if you need an simple svg for test purpose let me know and I create you one for test purpose.
So I've been dealing with an issue with printing table elements in IE 10 only, where portions of the border will be missing/cutoff. The weird part is that looks to be only the first row of the tbody, and only the first and last cells of that row are affected.
Here some of the things I have found so far:
The table on screen looks just fine, but only when printing will the borders be missing.
I get the same behavior in Standards and Quirks mode.
It looks like it is a combination of using border-collapse, borders on both cells and the table elements, and using thead/tbody. If I remove any of these parts, the borders will re-appear and everything looks as they should.
Here's a test page that I wrote that shows the issue:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
table {
border-collapse: collapse;
border: 2px solid black;
}
td {
border: 1px solid black;
}
th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Type</th>
<th>Champion</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>UI Team Meeting</td>
<td>3/5/2013 1:00 PM</td>
<td>User Interface</td>
<td>John Doe</td>
<td></td>
</tr>
<tr>
<td>PM Meeting</td>
<td>3/4/2013 10:00 AM</td>
<td>PMs</td>
<td>Jane Doe</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
So has anyone else seen this before and has found a solution? I haven't even been able to find anyone else talking about this issue.
Thanks!
I came across a similar issue in IE 9. The top half of the border on the first row of the first table on a page would not appear on the paper version of the page. When I load your code I see the same symptom.
I worked around our problem by combining the border rules for the table, th, and td into a single rule. The trick appears to work for yours as well, but it means the outer border will be the same size as the inner border:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
I am trying to align a ui-icon from a jquery theme to the right of a textbox element with no luck.
I've tried different floats (floating left pushes it to the left side of my textbox, floating right pushes it all the way to the end of my parent element so it doesn't sit snug next to my textbox), I've tried display:inline, I've tried display:inline-block...nothing seems to work.
Shouldn't a span just render the html inline anyway, right where I put it on the page?
<td><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><span class="ui-icon ui-icon-help ui-state-default" id="tbHelp" style="inline-block;" title="What's This?"></span></td>
You could assign class or id to the td and assign width to this element. This width should be assigned taking in mind the icon size. Then proceed with float right. Span elements are used for text so why don't you use image tag for this icon?
<head>
<style type="text/css">
.tdd{
width: 50px;
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<table>
<td class="tdd"><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><img src="img/bgFlag.png" width="16" height="16" class="ui" id="tbHelp" style="inline-block;" title="What's This?"></td>
</table>