[Resolved] Using an image from amazon s3 as header image in Generatepress

[Ben Foo]

Hi,

Is there any way to use an image from amazon s3 as header image in Generatepress? Thank you.

Best Regards,
Ben Foo

[Tom]

Hi Ben,

The “Image” tab in Page Header won’t work with external URLs, but you can use the “Content” tab and then use HTML in the textarea:

<img src="URL TO YOUR AMAZON S3 IMAGE" alt="" />

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ben Foo]

Thanks very much Tom!

Best Regards,
Ben Foo

[Ben Foo]

One more question Tom,

If I successfully place the picture in the header using the content tab as instructed above, does it mean that the picture will appear in Masonry? Thanks again.

Best Regards,
Ben Foo

[Tom]

It should – as long as you’re adding a post and you check the “Add to blog excerpt” option.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ben Foo]

Hi Tom,

Thanks. I’ve got the picture up. At the same time, I can’t seem to change the size of the image like you did in the video. How do I go about doing it?

[Tom]

Since you’re adding it as HTML, GP doesn’t have as much control over it.

If you can’t control the dimensions of the image before uploading it to Amazon, you can use CSS:

<img src="URL TO YOUR AMAZON S3 IMAGE" alt="" style="max-width:1000px;" />

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ben Foo]

Hi Tom,

I do not know much about css. Can you help me on this? If I want to change the height and the width, what do I key. I believe the css below is only for width right?

Thanks again Tom!

Best Regards,
Ben Foo

[Tom]

You can also do height, but it may cause quality loss if you use both:

<img src="URL TO YOUR AMAZON S3 IMAGE" alt="" style="height:300px;" />

It’s best if your resize your image to the dimensions you want before uploading it to Amazon.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ben Foo]

Thanks again Tom!

[Tom]

No worries 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ben Foo]

Hi Tom,

What is the optimal dimensions I should resize my image to so that I can do what you did in the video with the masonry? What I’m planning to do is to get all the pictures to one side of the webpage. Like what you did with your website under masonry. Thank you.

Best Rgds,
Ben Foo

[Tom]

Hi Ben,

It’s really your preference/whatever looks good.

You want to resize your images to be as close to the displayable size as possible, but GP will make sure they fit in their container no matter how big they as (as long as they’re not too small).

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts