I have a feeling this is a simple question that I'm just missing something, but I've thought about it and Googled a bit and haven't come up with anything yet.
I am running a Rails app on Heroku, using the asset pipeline, and serving static assets through a CDN using asset_sync. However, for my super simple blog I realized that it's serving assets through the app itself because I simply call in my view:
<%= #blog.body %>
The blog model is title (string), body (text), description (string). And the body is just a text blob of html. So for an image I'd include a line like the following as part of #blog.body:
<img alt="Clever alt tag" src="/assets/blog/my_image.jpg">
Is there a way to use this simple approach but have the image assets served from the CDN instead of the Heroku app?
You probably need to write your blog post using something like ckeditor, which can play nicely with the asset pipeline.
Related
I am working on a project using Gatsby, Strapi and Cloudinary. I am deploying the frontend on Netlify and the Strapi app on Heroku (with the addition of a Postgresql database instance).
I have been searching for weeks now and but I cannot seem to find a way to lazy-load images sourced through Cloudinary.
I have replaced the default rich content editor on Strapi with the ckeditor so editors can add photos to their content. These are automatically uploaded and served by Cloudinary.
My question is, is there a way to lazy-load the images, and if so, should this be done when serving them from Cloudinary, should I do this as a Strapi middleware or simply through Gatsby?
Note: I am not sourcing the images anywhere on the front-end since it's parsed as html from Strapi. All I'm currently doing in passing the fetched content to a div using
dangerouslySetInnerHtml.
With dangerouslySetInnerHtml directive you are inserting whatever is inside your rich text as HTML content so you lose control of customizing the behavior of that content. Hence, it will be rendered all at once.
There's no built-in way of doing this except by parsing your rich text with a third-party dependency (which I haven't been able to find)/custom method that will give you the capability of wrapping your images with any custom component. The idea, either way, is to parse your rich text blocks to customize the output.
In addition, check if the images tag (<img>) comes with the loading=lazy property attached:
<img src="image.jpg" alt="..." loading="lazy">
Cornerstone's carousel didn't work for my client's design, and so I built a custom hero component that I've included on several custom page templates. To allow the client to manually update images, I've set the hero images to use the {{cdn}} handlebars helper to pull images down from WebDAV.
E.g. background-image: url('{{cdn "webdav:img/home-hero.jpg"}}');
The issue we're running into now, is that, because the CDN caches asset files for the site on the server, when my client updates home-hero.jpg through WebDAV, the server has no way of knowing, and so it continues to serve the old version of home-hero.jpg.
Is there a way for my client to force re-caching of assets, or to bypass it altogether? I've attempted to use the imbypass parameter (webdav:img/home-hero.jpg?imgbypass=on), but this apparently just serves the unoptimized, but already cached, image.
One solution would be to append a random query string to the image src URL to prevent caching. If you're developing on a Stencil theme, the easiest way to accomplish this would be to use the {{moment}} helper to generate a date string so you can be sure you're getting a unique value each time.
<img src="/content/home-hero.jpg?{{moment}}"/>
will render as:
<img src="/content/home-hero.jpg?2018-08-23T00:00:00-05:00">
More info on using query strings to prevent caching: https://css-tricks.com/strategies-for-cache-busting-css/
What's the recommended way to add content to my rails app ? pages with cloud hosted images like amazon s3& formatted text ?
What I want is just to create a tutorial pages that are easily linked with an index page.
Is there a recommended approach rather than re-inventing the wheel ? what's the popular gems out there ?
If you need fixed content you have just to create an html in the public folder with the html that you need, and link directly from your index view to them.
In order to store the images in the cloud, just upload them and put a reference link to your page fixed content to it.
Otherwise, if you are building a dynamic page that you may upload new images and etc...
Use the paperclip gem. It is a good way to not reinvent the wheel!
So I am storing the whole embed code from youtube into my database and then outputting it like this.
<%= raw(people.video) %>
which outputs the general iframe tag copied from youtube:
<iframe src="foo" width=400 height=380></iframe>
the problem is that it actually displays that tag instead of embedding the video into the page itself. I can get around this just by storing the src in the database.... but this is part of a mini cms system and the site admins would find it much easier just to copy and past the embed code from youtube. Is there someway I can specify for the iframe to actually render instead of just spitting out the html on the page?
You can use the raw method to render the HTML of a string, are you storing it that way? You can also try the RedCloth gem - I was able to get this working like so:
<%= raw RedCloth.new(#page_content.content).to_html %>
Which allowed for my custom CMS to use the Textile markup
http://en.wikipedia.org/wiki/Textile_%28markup_language%29
I'm not 100% on what you're seeing, since raw should render HTML, but you might also try to include the embed tag using a JavaScript.write, since there are some issues related to Flash objects embedded in HTML vs JavaScript.
Let me know if this doesn't work, and if so, can you provide screenshots or copy what you're seeing on the page?
Am currently using Rails 3.0 to develop my app.
How to handle a form in the public/index.html file which I'm planning to use as my Home page.
Usually a view's action buttons gets paired with the corresponding method of its controller.
But how to handle this in case the index file in public directory?
This is possible, so long as the form's action attribute is pointing at an action of a Rails controller. However, it is not the norm in Rails to use a static HTML page to capture data. The norm is to use the MVC architecture of Rails.
I have to ask: Have you read the documentation provided on the Ruby on Rails website? Check out http://edgeguides.rubyonrails.org and read the Getting Started section.
Now, I think you might be using public/index.html because you don't know how to use a controller to serve the root of your website. Here's a quick example of how to use a controller instead of public/index.html:
Create a controller (i.e., home via rails g controller Home index)
Modify routes.rb and add root :to=>"home#index"
Delete public/index.html
The above is actually in the Edge Guides, Getting Stated section. So again, I strongly recommend you read the documentation. It will honestly save you a lot of trouble.