I am trying to use the nuxt.js Nuxt.js content module. Is there a way to display images we refer to in our blogpost.md file? I know that we can put images in the front matter, but I want the create of the articles to put images inside their created .md file. Lets say we have a file:
-- start of .md file --
# some text
some description
# some text
some description
-- end of .md file --
I end up seeing the image that is linked using https. But the other image is not displayed?? When checking the page I see an <img> tag is created, but no image to be seen...
When I check the structure using any other markdown editor, I see the image.
Including links to images does display images. But I need to include locally stored images.
any help greatly appreciated
Partially solving the issue, some images can be added using metadata (like cover images), those cannot be added within the content itself, just above or bellow actual content.
---
title: Sample
image: test.jpg
---
Here the markdown (without images)
In the view you can render that image after or before the content using something like:
<img :src="require(`~/assets/images/${ page.image }`)">
<nuxt-content :document="page"/>
Related
I'm doing a custom game which I'd like to change the background and a character picture according to a file they upload.
The input file is outside phaser. If possible, I'd like to show the picture directly without uploading to the server.
If you use a file loader to get the base64 encoding of the image, you can use this.textures.addBase64 to load the image into the texture manager, after that loads you can create new objects with that image tag, or set existing images to that texture.
Working Example =>
https://stackblitz.com/edit/phaser-use-uploaded-image
Is it possible to add additional file types to be recognised as images and thus trigger automatic creation of an image view when a resource is uploaded?
SVG files will preview in CKAN, but we have to manually add the image view e.g.
https://datastore.landcareresearch.co.nz/dataset/novel-yeasts-from-new-zealand-forests/resource/3812ee6b-dd45-45c9-b425-6a18375e5727
With text (for example) we can specify file format extensions to recognise as text and automatically create a text preview (ckan.preview.text_formats...). Is there an equivalent for images?
Thanks
It would only be possible by modifying the source code for your instance:
https://github.com/ckan/ckan/blob/master/ckanext/imageview/plugin.py#L9
Seems like a great idea to have the image view on a par with the text view in this regard, so I made a pull request:
https://github.com/ckan/ckan/pull/3380
I optimised my images and converted them into WebP format... image.webp
It seems to improve page speed significantly.
However, I have a template-variable IMAGE [blogpost-image] defined.
Now with this .webp extension (= Chrome HTML document), I cannot open the IMAGES directory and add the images to my resource docs. I tried changing the input type to URL and also to FILE for my template-variable, but none seems to work.
How can I get my images in .webp on front-end with a template variable?
Take a look at the System Settings. Under Area: File System you should see the Uploadable Image Type setting (or similar depending on your MODX version). The default is a list of usual image file types: .jpg, .png etc. You probably need to add the .webp extension in order to upload those to the image browser.
I am trying to download all the images from a webpage. The images are included as follows:
How should I parametrize my wget command to specify that I only want the images where the link starts with "https://alwaysSamePart.com/"? because what follows varies avery time so I cant just specify a hardcoded link.
Ideally I should scrape all the urls af all the images out of the html code. Surf to each link individually and save each image individually.
All,
Simple question: I want to include an image "logo.png" as the background for my-app. Where should I put the file and how should I refer to it in the CSS file which is in the resources folder along with the main_page.js?
Here is the rest of the story:
I have a CSS class called doc-background. I know this class works because when I set the color of the background in a CSS file like so:
.doc-background { background-color: red} it has the desired effect and Firebug shows me that the class doc-background is being used.
However, when I add a line like
.doc-background { background-image: url('logo.png'); }, there is no effect. Firebug shows that the class doc-background is not applied. And when I modify the style in Firebug to add the line about the background-image it says "Failed to load URL" in the tooltip.
Can someone please point me to a guide on how to work with resources and images and where to put them if I want to use CSS? I have successfully used them using the image-view and coding them into the HTML.
Here is what I have already tried:
Using static-url instead
Moving the image file to images folder under resources
Referred to the image by using all variations on the path - including resources/images only including images, not including either...
Lot of Googling for the answer, Reading create your own app tutorials etc.
If you have an example app that uses colors and images from a CSS that will be the ultimate! But a location and some help with the background-image CSS property will get me started!
Thanks much,
Vis
Place your image somewhere relative to your css:
resources/style.css
resources/images/logo.png
Then use static_url to refer to the image:
background-image: static_url('images/logo.png');