Two Random Quote Generator Issues

Two Random Quote Generator Issues
0
#1

Here is my Random Quote Generator: https://codepen.io/scalish/pen/LOgjGb

There are two issue of concern to me that I have not been able to solve:

  1. img-responsive class tag seems not to work for the image that accompanies each quote and I cannot figure out why. It doesn’t seem to work for the landing page image either. The landing page image does have width and height, the other images do not. I believe I have added the library link. Do I have the right one? Is there something else I need to do?

  2. I would like to be able to share each image that accompanies the quote on twitter but am not readily seeing how to do that, Is it simple or is it something that may become apparent as I proceed with the other projects?

Any suggestions or comments would be appreciated.

Sheryl Calish

#2

You are trying to use two different versions of Bootstrap (3 and 4). Your html section references Bootstrap 3, but you have added the Bootstrap 4 external library via the setting gear of the CSS module of Codepen. I believe it might be using the Bootstrap 4 library, because Codepen places it at the end of your head section. If that is the case, “img-responsive” is not a valid class in Bootstrap 4. It was replaced with “img-fluid”.

[quote="scalish, post:1, topic:168530"] I would like to be able to share each image that accompanies the quote on twitter but am not readily seeing how to do that, Is it simple or is it something that may become apparent as I proceed with the other projects? [/quote]

I am not sure it is even possible to do this. You could share a link to an image, but the twitter intent API you are using with the following url, does not allow you to insert the image itself into the tweet.

https://twitter.com/intent/tweet/
#3

Thank you for your advice.

I have changed the setting in CodePen to use Bootstrap 3. However, img-responsive is still not resizing when I make the window smaller.

Is that the correct link for Bootstrap 3?

I am able to get the url into the tweet but not the actual image. Thank you for your input on this as well.

Sheryl

#4

In general when you are using Codepen, use the settings gear for the JS module to add the external libraries such as jQuery and Bootstrap 3, just like you did for the css section. Also, add the font-awesome and google fonts links in the CSS module. If you add some in the html section and use the settings gear to add libraries, sometimes there are some incompatibilities because of the order that Codepen adds things behind-the-scenes for you.

You need to change the following bit of code from:

to

<div class="img img-responsive"><img src= "http://gdurl.com/gimF" alt="Outdoor photograph of The Thinker by Rodin. "></div>

The “img-responsive” class is used on img elements and not the div containing an image element. Make that change and let me know if you get the desired effect you want.

Yes, that is the correct link for Bootstrap 3.

You can not add the image directly to the tweet using the particular API (the intent API) you are using.

#5

Made the change you suggested : switching img-responsive with img. Still no luck.

I guess I have more learning to do on the different twitter APIs.

Thank.

#6

It should be “img-fluid” not “img”. What exactly are you expecting it to do that it is not doing. It seems like it is responsive to me. Can you take a screenshot of what you are seeing that you don’t want to happen and then explain how it should look?

#7

I got it! Thank you for your patience with me.

Sheryl