search

CuBoulder / express_mono

Monolithic Express Profile - contains all bundles
GNU General Public License v2.0
1 stars 2 forks source link

Images displaying at incorrect sizes #782

Closed kevincrafts closed 3 years ago

kevincrafts commented 3 years ago

A recent change to the people css has caused small and medium images to not display at their proper sizes. This change is forcing these image styles to display at 100%, even though the image size may be much smaller, resulting in very pixelated images. Example: https://www.colorado.edu/cwa/2020/12/07/dont-label-me-cwa-book-study-virtual-event

kevincrafts commented 3 years ago

What is looks like now vs what it should look like... Screen Shot 2020-12-14 at 9 47 54 AM

Screen Shot 2020-12-14 at 9 48 01 AM

AlanBCole commented 3 years ago

@kevincrafts Do you know how this image was added to the page? Shortcode? Also when I go to the page you have linked to in the description I see the page "what it should look like..." page. Were changes made to that page in particular so that the book cover shows up correctly?

AlanBCole commented 3 years ago

Using the following steps (sorry if they are way off...) I have not been able to reproduce this:

  1. Upload a picture by going to /node/add/file
    • This adds a node with some urls for different image sizes.
    • Copy the url for the small image
  2. Create a new article:
    • click the image tab/short code and paste in the image url
    • select "right" option in Alignment dropdown
    • save the image
  3. Add some text with the styles set to "lead"
  4. Add a bunch of other text with no styles option selected (just regular text)
  5. Click save and look at the page.
  6. See that the image is floated to the right as expected
AlanBCole commented 3 years ago

Also, I am not sure how the recent changes you linked to apply as the css classes image-small or image-medium are not found in the page linked or the one produced by following the steps I outlined above.

cathysnider commented 3 years ago

@AlanBCole Here's how to add an image into the body of a page: Add or Edit a Basic Page Below the body field, there is button to upload an image. Upload an image, then place cursor in body field where you'd like image to appear. Select Image Size from Style drop-down, then click 'Insert'

Screen Shot 2021-01-07 at 1 16 51 PM

You can view all the Image Styles on my sandbox site page All Image Sizes, where the medium and small sized images are displaying at 100%.

Screen Shot 2021-01-07 at 1 37 53 PM
AlanBCole commented 3 years ago

The reason I could not reproduce the bug is because I recently spun up a new Lando environment and did not enable the cu_people_bundle or people_content_type modules. I have reproduced the bug.