Aby obrazek pojawił się po lewej stronie, tekst po prawej, a wszystko było ładnie wyjustowane i wyrównane w pionie, musiałem ułożyć wszystko wewnątrz tabeli HTML. Układ tabeli jest nieco mylący w pracy, ponieważ w rzeczywistości istnieje tabela zagnieżdżona w tabeli, aby osiągnąć pożądane wyrównanie. Oto jak wygląda szkielet tabeli HTML (przygotuj się):
Headshot Image
.
Element obrazu jest zagnieżdżony wewnątrz elementu komórki tabeli <td> i jest pionowo wyśrodkowany w tabeli przy użyciu valign="middle" dla atrybutu i wartości elementu komórki tabeli. Dodałem również atrybut vertical-align: middle i wartość na samym elemencie obrazu na wszelki wypadek.
Źródło obrazu jest zawarte w moim osobistym dysku Google Drive, gdzie obraz ma ustawienia udostępniania, które pozwalają każdemu zobaczyć obraz. Jako uwaga, musiałem zmienić link udostępniania dostarczony przez Google, aby zawierał uc?id= na początku żądania GET w adresie URL. To pozwala na bezpośrednie pobranie z Google Drive i upewnia się, że obraz pojawia się poprawnie w podpisie e-mail.
Aby osiągnąć efekt zaokrąglonego obrazu, dodałem border-radius: 100% jako CSS na elemencie obrazu.
Ikony społecznościowe i linki
Ikony mediów społecznościowych użyte w podpisie składają się z elementu image owiniętego elementem anchor zawierającym link do odpowiedniej strony mediów społecznościowych. Szerokość i wysokość są określone w obu atrybutach elementów obrazu (25 pikseli to dobra szerokość/wysokość do użycia IMO). Atrybut source zawiera link do pliku ikony na moim własnym Google Drive, tak jak w przypadku obrazu headshot. Pamiętaj, aby zawrzeć uc?id= w swoim źródłowym adresie URL, gdy łączysz się z obrazem na Google Drive.
Ikony społecznościowe mają strukturę elementów listy wewnątrz listy nieuporządkowanej, aby pomóc w dostępności (dzięki Scott Vinkle za tę sugestię). CSS zastosowany na ul usuwa punkty wypunktowania i dodatkową przestrzeń wokół całej listy nieuporządkowanej. Element display: inline-block na liście pozwala na wyświetlanie każdej ikony obok siebie.