search

developer-portal / content

Content for the Fedora Developer Portal
https://developer.fedoraproject.org/
GNU General Public License v2.0
106 stars 250 forks source link

r-ide page: rstudio.png is too large #383

Closed jackorp closed 3 years ago

jackorp commented 3 years ago

The newly added R language page r-ide contains an image rstudio.png.

The image is too big and it stretches out the site forcing user to scroll sideways to see the full image

My proposed solution is to add the image downscaled to more acceptable proportions, and maybe encase the image in a clickable link so the full size is available, like so: [![RStudio Desktop](/content/tech/languages/r/rstudio-downscaled.png)](/content/tech/languages/r/rstudio.png)

Attached here is a screenshot, from the staging developer portal website, of how I see the content image when I scroll down to its place. Screenshot-r-ide

jackorp commented 3 years ago

Introduced by PR#374

pvalena commented 3 years ago

@Enchufa2 probably not what you had in mind :) can you post a fix (resized image)?

https://developer.stg.fedoraproject.org/tech/languages/r/r-ide.html

Enchufa2 commented 3 years ago

A quick solution would be to add width="100%" to the img tag, but I'm not sure if this can be done via Markdown.

Enchufa2 commented 3 years ago

In fact, if we don't do that, the downscaled image will work only for the full resolution. See e.g. the image in here, resize the browser window and see what happens. So given that this is a general issue, I would suggest solving this for all images via CSS:

img { width: 100%; }
pvalena commented 3 years ago

In fact, if we don't do that, the downscaled image will work only for the full resolution. See e.g. the image in here, resize the browser window and see what happens. So given that this is a general issue, I would suggest solving this for all images via CSS:

img { width: 100%; }

Firstly, that is correct, and I like it - if you can, please submit a PR. But please note that it has to be set only in for the proper content / not site-wide settting. Please also test it prior to submission.

A quick solution would be to add width="100%" to the img tag, but I'm not sure if this can be done via Markdown.

I think addressing this in Markdown would be suboptimal. In any case, having some smaller width (image) also helps with better loading times = better user experience.

In case some larger image is really needed I'd (1) Investigate if it can be split into multiple images. (2) If that's not possible, implement "clickable" images, link to the large version.

As the website is currently built is on staging, please submit a quick-fix (resized image), for us to be able to proceed with release. We can target ehancements for the next release (July).