search

couds / react-bulma-components

React components for Bulma framework
MIT License
1.2k stars 126 forks source link

Add standard img tag attribute support. #353

Open Cleanshooter opened 3 years ago

Cleanshooter commented 3 years ago

While using this tool I came across the need to use the srcset attribute on my img tag but found that the attribute was being applied to the figure instead of the img tag. This change should add support for all standard img tag attibutes so they go where they belong.

Example:

<figure class="image jumbotron-img is-16by9" srcset="/images/homepage-main-768.jpg 768w, /images/homepage-main-1024.jpg 1024w, /images/homepage-main-1216.jpg 1216w, /images/homepage-main-1408.jpg 1408w, /images/homepage-main.jpg 6720w" sizes="100vw">
  <img class="" src="/images/homepage-main.jpg" alt="Homepage Main Image">
</figure>

Should output as:

<figure class="image jumbotron-img is-16by9" >
  <img class="" src="/images/homepage-main.jpg" alt="Homepage Main Image" srcset="/images/homepage-main-768.jpg 768w, /images/homepage-main-1024.jpg 1024w, /images/homepage-main-1216.jpg 1216w, /images/homepage-main-1408.jpg 1408w, /images/homepage-main.jpg 6720w" sizes="100vw">
</figure>

This is my first attempt at modifying code on this project so please feel free to provide corrections or request adjustments. I'm not really familiar with TypeScript so I didn't modify that part and was unsure if I needed to.

Ohhh and the prettier mod was to remove some line ending issue I was seeing (similar to: https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-delete-cr-prettier-prettier). I use Windows for dev, I'm guessing you use Mac. Let me know if it causes issues on your end. 😄