search

pivotal / blog

Pivotal Engineering Blog
https://engineering.pivotal.io/
40 stars 47 forks source link

Duplicate images show up in the RSS feed #150

Closed osis closed 7 years ago

osis commented 7 years ago

From @ihuston in https://github.com/pivotal/blog/issues/139...

The duplicate image issue is caused by using the responsive-figure short-code, which creates two images in the HTML, one fixed size, one responsive, and hides one depending on the viewport size.

In the RSS feed both images are displayed because the display:none attribute from the CSS is not processed.

There are a few options for fixing this that I can see:

include style info in the HTML pages so they get rendered by RSS readers correctly. change the html processor used in the RSS template somehow to strip the extra image. only use figure instead of responsive-figure in posts that will get picked up from RSS In the interest of time I have chosen option 3 above for this particular post in 484cdb1.

This solution came about due to the fact that we didn't want to touch PivotalUI styling in any way to keep things lean. Maybe it's time to revisit that decision.

osis commented 7 years ago

Using the media queries in PUI that @tsaleh mentioned isn't going to work if we want to have control over the size of the image. I'm trying an example and it only likes statically set width/height, which raises other issues.

The other way of solving this is to start generating different sizes for assets, but that's a rabbit hole that I don't want to go down atm.

There might be some Javascript solutions but I'm personally not a fan of the division of responsibility in that case. 🤔

osis commented 7 years ago

Opted to just make our own media query until we want to upgrade the version of PUI.