TinyMCE popups not loading when using S3 and setting document.domain - django

My main domain is 'btaylorweb.com'. I have a subdomain 'static.btaylorweb.com' that uses a CNAME to point to my CloudFront URL.
TinyMCE is loading just fine from S3, however, my popups are blank. I've set the domain as such:
document.domain = 'btaylorweb.com';
in tiny_mce_popup.js and in tiny_mce.js, but that's still not working. Can anyone please point out what I'm doing wrong?

I ended up leveraging the Image plugin in DjangoCMS, which can be used in conjunction with django-storages to push files directly to the S3 bucket. It works, but the Image plugin isn't quite as nice as seeing the images inline with the rest of the content.

Related

Images not rendering on-page in vue v-for from S3 uploaded into Strapi admin

I have an API call that is publically accessible:
https://g1c0r7af15.execute-api.eu-west-1.amazonaws.com/dev/api/portfolio-items?filters[category][$eq]=Portraits&populate=image
The API is a strapi app that has had images uploaded to it and the images are hosted in S3.
I am trying to render the images in a v-for in a Gridsome app but all I see is an empty page with the images visible in the inspector but not on the page - the URL's of the images when individually accessed display the images fine in a browser:
All my <li> items are like this, the images are "there" but aren't being displayed. Can anyone offer any insight as to why? They show fine in the Strapi admin and when placed in the HTML statically, my S3 bucket is public and I have no issues accessing the individual image URL's that render inside the v-for and seeing the images in a new tab:
An example URL of the image in the screenshot here:
https://nazart-backend-dev-s3staticbucket-1w4isti2cbult.s3.eu-west-1.amazonaws.com/Karoline_01_b3af2ebc3e.jpg
I have double checked in Chrome also. It's completely baffling me.
.drag-galery__item class is setting the opacity 0, this is making the image invisible

How to host images stored inside S3 static website, over HTTPS?

I have an S3 bucket which I'm using for storing images uploaded by users. Then I save paths to those images in my database, each path looks like so https://bucket-name.s3.eu-central-1...
I then added an image resizing feature which requires the S3 bucket to be a static website, so that redirection rules can be used.
Appearantly this static website thingy made it impossible to download those pictures using old paths with https protocol, and because my website is using https - I can't make http requests. So now all the profile pictures of the users aren't displayed at all.
I'm looking for a solution to this problem. I can change pictures' paths stored in the database if needed.
One possible solution I have in mind is using a subdomain with CloudFront, e.g. pictures.my-website.com/name-of-the-picture.png
Do you think it'll work and it's a good solution, or there is a better way?
Use CloudFront as a server with predefined domain and SSL certificates https://medium.com/#tsubasakondo_36683/serve-images-with-cloudfront-s3-8691d5c387b6

Why isn't AWS CloudFront updating my files?

I'm new to AWS.
But, I have an S3 Bucket containing a static website and it is hooked up to CloudFront. Originally, I had just a "under construction" HTML file. But since I removed it and actually added my website, I'm still seeing the old HTML.
If I browse to the cloudfront.net or the us-east-1.amazonaws.com I can see my full website. But its when I browse to my actual domain name when I see the old HTML.
I have changed the meta-data to to one hour and I also tried the same within CloudFront TTLs.
I also read that I had to invalidate my old file, which I did do but it doesnt seem to be doing anything.
Any suggestions would be appreciated!

Whole new project inside a jekyll project

I have some website projects that I want to show case that have their own index.html files.
I want to make a route in my Jekyll website so that if I go asdf.com/project1/ I would see simply my project1.
Is this possible to do?
My project is deployed on amazon AWS S3 buckets, hosted on Cloudfront. Should I upload to the bucket and set up some kind of routing?
How would I go about doing this?
Thanks.
If you want S3 to show a specific HTML page when navigating to asdf.com/project1/ the easiest way to achieve this is by creating a file with corresponding key project1/index.html in that bucket.
Source here (bottom of page): http://docs.aws.amazon.com/AmazonS3/latest/dev/IndexDocumentSupport.html
You have two options, put those pages inside Jekyll as "projectname/index.html" or an html file without extension.
If you don't want Jekyll to process them and just use the html do not add front matter to it and jekyll will just copy them to the output folder.
Then you may need to set the right content type when uploading the website to the S3 bucket.
You may find helpful to put that into a script: https://simpleit.rocks/having-pretty-urls-in-a-jekyll-website-hosted-in-amazon-s3/

S3 Static Website Only Displays Index.html (but not other dependent files)

I've been messing around with AWS lately and it definitely great. As a first test I'm trying to host the most basic static website via S3. The site is simply just one html file and a few javascript, css and image files.
Whenever I load the static URL the only thing that loads is the index.html file, its contents and for some strange reason the only image that loads is my avatar, yet all the images are stored in the same folder. All of the css, js and image files are also written as relative links too of course.
I've made sure all the files and folders permissions are set to "world" multiple times.
I also looked at the network tab in dev tools and its giving me 200's on every GET request.
I'm completely stumped as to why this is happening. Does anyone have an idea of what I'm missing?
The url is available at http://www.mikefisher.io.s3-website-us-east-1.amazonaws.com/
I should add that the site works perfectly locally as well as on a traditional web server.
I checked my browser console and it gives me this error which I think might have something to do with it.
Resource interpreted as Stylesheet but transferred with MIME type binary/octet-stream:
Fixed it!
The issue I was having is the metadata for the CSS files in Amazon S3 were set to 'binary/octet-stream' by default.
The way I fixed this was selecting the individual files in the bucket, clicking the properties tab, then in the meta-data section typing in 'text/css' as the value.