Fixes #1791: Handling with inline img #1910

rjayroso · 2021-03-12T14:36:44Z

Issue This PR Addresses

Type of Change

Bugfix: Change which fixes an issue
New Feature: Change which adds functionality
Documentation Update: Change which improves documentation
UI: Change which improves UI

Description

I piggy-backed off of @huynguyez 's solution that he posted in issue #1791 (see here) and just added an extra line vertical-align:50%; to center the inline images.

Before

After

Checklist

Quality: This PR builds and passes our npm test and works locally
Tests: This PR includes thorough tests or an explanation of why it does not
Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

izhuravlev · 2021-03-12T14:41:51Z

I was not sure how to test this, so I opened the deployment and saw this:

So I assume some of the regular blogpost images are getting shrunk as well, which is not great.

huyxgit · 2021-03-12T14:55:59Z

I was not sure how to test this, so I opened the deployment and saw this:

So I assume some of the regular blogpost images are getting shrunk as well, which is not great.

@izhuravlev Yes I mentioned this issue on Tuesday about this

huyxgit

Like I talked about this in the last call.

Using telescope-post-content div will also affect those blogs from blogspot.

izhuravlev · 2021-03-12T15:06:28Z

Like I talked about this in the last call.

Using telescope-post-content div will also affect those blogs from blogspot.

Oh that's what you meant, I just was not sure what blogspot is

rjayroso · 2021-03-12T15:45:54Z

I was not sure how to test this, so I opened the deployment and saw this:

So I assume some of the regular blogpost images are getting shrunk as well, which is not great.

Hmm, do you think we should just keep what we have now and scrap this along with closing the addressed issue?

izhuravlev · 2021-03-12T15:52:35Z

@rjayroso I think we should leave this for now, until any other idea pops up

yuanLeeMidori · 2021-03-12T16:04:36Z

@rjayroso I think we should leave this for now, until any other idea pops up

Agree. I believe currently there is no one method to take care of all the cases.

rjayroso · 2021-03-16T09:13:01Z

I removed the styling for the images to be inline as it would, unfortunately, ruin some posts by making the images too small. I'm thinking of keeping it to what we had before but implement the styling for the GitHub links so it matches the font size as the rest of the post (1.8rem). This would at least make the links look less out of place, but it doesn't really deal with the images being too big (see below):

Before (i.e. No div > h1 styling)

After (set to 1.8rem)

birtony

I think this image on the bottom of @yuanLeeMidori's post does not display properly:

I think we should address it in this issue @rjayroso

rjayroso · 2021-03-17T11:33:07Z

@birtony I checked it out and I agree the photo was not being displayed properly. I rebased and added a max-height to make tall pictures more friendly to view, see below (ignore red border):

a. Before

a. After

b. Before

b. After

I think the photo on the bottom of Yuan's post is a bit trippy because of how it was screenshotted, but either way let me know if you like this change otherwise I can revert it.

UPDATE: I think I finally got everything working properly:

birtony

Please, file another issue for cases like below before merging this PR @rjayroso

birtony · 2021-03-17T15:58:00Z

src/web/src/styles/telescope-post-content.css

+.telescope-post-content div > a > img {
+  width: 32px;
+  display: inline;
+  vertical-align: middle;
+}
+
+.telescope-post-content h1 > a > img {


You could group these like:

.telescope-post-content div, h1 > a > img { ... }

I tried this just now and it seems to ignore the CSS completely (as if it ain't there), I don't know why - thoughts?

huyxgit

Nice for other blogs, but Blogspot image issue still there (32px).

rjayroso · 2021-03-18T22:55:50Z

@huynguyez I can file an issue to fix the BlogSpot bug and merge this

I created another issue here of a potential fix for this

* Added styling for div img [Removed] * Added styling for div > h1 and div > div [Removed] * Removed styling for div > div and div img, kept styling for div > h1 * Added max-height for tall pictures * Fixed inline images without affecting posts (BlogSpot still affected) * Fixed prettier complaint

huyxgit

Since you gonna break it into another issue for Blogspot, this looks good to me!

chrispinkney

LGTM! Also very curious to see what happens with your blogspot idea 😄

vercel bot deployed to Preview March 12, 2021 14:36 View deployment

izhuravlev requested review from PedroFonsecaDEV, izhuravlev, huyxgit and yuanLeeMidori March 12, 2021 14:43

izhuravlev assigned rjayroso Mar 12, 2021

izhuravlev added area: css styling Anything related to CSS styling area: front-end area: nextjs Nextjs related issues labels Mar 12, 2021

huyxgit suggested changes Mar 12, 2021

View reviewed changes

vercel bot deployed to Preview March 16, 2021 09:05 View deployment

rjayroso force-pushed the issue-1791 branch from 8bf7206 to 3dca5a9 Compare March 16, 2021 09:32

vercel bot deployed to Preview March 16, 2021 09:32 View deployment

rjayroso requested a review from huyxgit March 16, 2021 12:29

chrispinkney linked an issue Mar 16, 2021 that may be closed by this pull request

Deal with inline images being streched (aka reduce the size of Tony) #1412

Closed

chrispinkney added this to the 1.9 Release milestone Mar 16, 2021

birtony suggested changes Mar 16, 2021

View reviewed changes

rjayroso force-pushed the issue-1791 branch from 3dca5a9 to 48ea7a2 Compare March 17, 2021 11:21

vercel bot had a problem deploying to Preview March 17, 2021 11:22 Failure

vercel bot deployed to Preview March 17, 2021 12:04 View deployment

birtony suggested changes Mar 17, 2021

View reviewed changes

rjayroso dismissed yuanLeeMidori’s stale review via e2e7896 March 18, 2021 11:50

vercel bot deployed to Preview March 18, 2021 11:50 View deployment

rjayroso force-pushed the issue-1791 branch from e2e7896 to bb368c1 Compare March 18, 2021 11:59

vercel bot deployed to Preview March 18, 2021 11:59 View deployment

rjayroso force-pushed the issue-1791 branch from bb368c1 to 746e1e2 Compare March 18, 2021 16:04

vercel bot deployed to Preview March 18, 2021 16:04 View deployment

rjayroso requested a review from yuanLeeMidori March 18, 2021 16:30

rjayroso mentioned this pull request Mar 18, 2021

Decorate each post with a class that matches the blog host platform #1975

Closed

rjayroso linked an issue Mar 18, 2021 that may be closed by this pull request

Decorate each post with a class that matches the blog host platform #1975

Closed

rjayroso removed a link to an issue Mar 18, 2021

Decorate each post with a class that matches the blog host platform #1975

Closed

yuanLeeMidori previously approved these changes Mar 18, 2021

View reviewed changes

huyxgit reviewed Mar 18, 2021

View reviewed changes

humphd requested review from huyxgit and birtony March 19, 2021 17:47

huyxgit previously approved these changes Mar 19, 2021

View reviewed changes

rjayroso dismissed stale reviews from huyxgit and yuanLeeMidori via b603542 March 19, 2021 18:03

rjayroso force-pushed the issue-1791 branch from 746e1e2 to b603542 Compare March 19, 2021 18:03

vercel bot deployed to Preview March 19, 2021 18:03 View deployment

PedroFonsecaDEV requested review from huyxgit and yuanLeeMidori March 19, 2021 19:38

chrispinkney approved these changes Mar 19, 2021

View reviewed changes

yuanLeeMidori approved these changes Mar 21, 2021

View reviewed changes

rjayroso merged commit fc4fb0d into Seneca-CDOT:master Mar 23, 2021

HyperTHD mentioned this pull request Mar 23, 2021

Fixes SearchResults not displaying posts when searching #2012

Closed

8 tasks

rjayroso mentioned this pull request Mar 28, 2021

BlogSpot images are scaled down the same as inline images #2039

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixes #1791: Handling with inline img #1910

Fixes #1791: Handling with inline img #1910

rjayroso commented Mar 12, 2021 •

edited

Loading

izhuravlev commented Mar 12, 2021 •

edited

Loading

huyxgit commented Mar 12, 2021

huyxgit left a comment

izhuravlev commented Mar 12, 2021

rjayroso commented Mar 12, 2021

izhuravlev commented Mar 12, 2021

yuanLeeMidori commented Mar 12, 2021

rjayroso commented Mar 16, 2021

birtony left a comment

rjayroso commented Mar 17, 2021 •

edited

Loading

birtony left a comment

birtony Mar 17, 2021

rjayroso Mar 18, 2021

huyxgit left a comment

rjayroso commented Mar 18, 2021

huyxgit left a comment

chrispinkney left a comment

Fixes #1791: Handling with inline img #1910

Fixes #1791: Handling with inline img #1910

Conversation

rjayroso commented Mar 12, 2021 • edited Loading

Issue This PR Addresses

Type of Change

Description

Checklist

izhuravlev commented Mar 12, 2021 • edited Loading

huyxgit commented Mar 12, 2021

huyxgit left a comment

Choose a reason for hiding this comment

izhuravlev commented Mar 12, 2021

rjayroso commented Mar 12, 2021

izhuravlev commented Mar 12, 2021

yuanLeeMidori commented Mar 12, 2021

rjayroso commented Mar 16, 2021

Before (i.e. No div > h1 styling)

After (set to 1.8rem)

birtony left a comment

Choose a reason for hiding this comment

rjayroso commented Mar 17, 2021 • edited Loading

UPDATE: I think I finally got everything working properly:

birtony left a comment

Choose a reason for hiding this comment

birtony Mar 17, 2021

Choose a reason for hiding this comment

rjayroso Mar 18, 2021

Choose a reason for hiding this comment

huyxgit left a comment

Choose a reason for hiding this comment

rjayroso commented Mar 18, 2021

huyxgit left a comment

Choose a reason for hiding this comment

chrispinkney left a comment

Choose a reason for hiding this comment

rjayroso commented Mar 12, 2021 •

edited

Loading

izhuravlev commented Mar 12, 2021 •

edited

Loading

rjayroso commented Mar 17, 2021 •

edited

Loading