I would like to add additional html into my cornerstone theme which is available by some url. For example, is there any helper like {{loadHtml http://example.com/mypage }} ?
Update
I do not need js implementation. I do not need to insert component or other theme specific file. I do not need an iframe. The html lives on another server which serves custom app. So I have an app and I need to inject html by some url from my app.
Related
By default, nuxt adds a route for each page in pages.
I want to make when going to the page e.g. project.local/id/ec29cjsa5fas512ik, the user goes to a page template and the Vue receives this ec29cjsa5fas512ik id from the url so it can make proper API calls later.
You can make a dynamic page in Nuxt2 with the following file, eg.
/pages/details/_id.vue
then you'll have a path like /details/:id.
More info can be found here: https://nuxtjs.org/docs/features/file-system-routing#dynamic-routes
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">
I have a dynamic page where I need to make an API request and update the Meta Tags dynamically.
I was able to achieve that by adding API request in App.js and updating the head tag HTML based on the response from API.
When I share the URL on social media, the tags are not showing up as it requires some loading time.
My application has a lot of dynamic pages with many routes. However, only 1 path in routes is important for me from an SEO standpoint.
What should be my approach here to make the Meta tags show up when shared on Social Media?
You can resolve this problem in two ways.
First: You need to turn on SSR Server Side Rendering. In this it will render all html on server side. Second: If you are using vue inside Laravel Blade template then you can handle meta and og tags on Laravel Blade file side. In this way before loading vue your meta and og tags will be loaded from Laravel.
I was hoping someone had any insight on this basic approach. Sample scenario:
I have a dashboard template with menu links a(href "/page") and I want to click the links to render a different section/view on the template. I used block content...but does it need a specific route?
If I understand correctly, you want to update the content of the page on click of the link without the page getting refreshed.
In that case, no you can't do it using block content.
The purpose of block content is to apply inheritance in your templates.
The typical use of block content would be creating a layout and then creating more specific page from the layout. This is what the official documentation says.
The reason why you cannot do it because, jade is server side templating library. This resolves the block content on server. Once rendered in client, the html looses all the information that was specific to jade (which is obvious because its an html afterall).
What you can do here is
Create a /page.jade and make a ajax call to a service. That service should return an already compiled html string. Since you are using jade, you can easily use jade.compile(source, options) to template / generate html.
Jade API documentation here
I'm developing a Shopify app.
On app installation, I want to create a snippet and upload some assets like images and JS.
That snippet should be injected in the product.liquid file.
You can use this for creating assets using API
https://docs.shopify.com/api/asset
While passing the key parameter you can pass whether it is going to be a snippet or asset.
{ "key" : "assets/bg-body-green.gif" }