I'm using the vue-markdown package to render markdown. It seems to work except the images don't display. The file path is correct as I can have an img show up correctly
<img src="#/assets/7801_4_lang_image.png"><!-- shows up -->
<vue-markdown></vue-markdown><!-- doesn't show up -->
Changing the # to .. doesn't change anything either, the top one displays but the bottom one doesn't. The case of png/PNG also doesn't matter. Am I referencing the image wrong?
The file loader doesn't know about images in Markdown so Webpack doesn't know to bundle them.
Typically you need to require() the image source (see https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports)
You could try this but I'm not entirely sure if it will work with the vue-markdown component.
 }})
To use the source prop, you would use something like
<vue-markdown :source="`})`">
See https://v2.vuejs.org/v2/guide/syntax.html#Attributes
You could also use the public folder who's contents are always bundled. For example, for a file public/images/7801_4_lang_image.PNG and assuming your app runs at the domain root
Related
I built a website in plain html/css with my own design. Now I need to put this website in TYPO3 CMS 9.5.4. Unfortunately it's my first time working with TYPO3 and I don't really know what I'm doing.
What I got so far:
Most of the website is already working fine. I included fluid_styled_content and my setup basically looks like this:
page = PAGE
page.1 = FLUIDTEMPLATE
page.1 {
file = fileadmin/sitedesign/Resources/Private/Templates/Page.html
variables {
content < styles.content.get
}
}
The Page.html file is basically my whole html template and I put
{content->f:format.raw()}
where I want my content.
All content I create in the backend is displayed as I want except of images.
My question:
I can display images by creating a "Text & Images" content element and adding the images in the "Images" tab. In the "Media Adjustments" section I can now set the width and height of each element and below I can choose the number of columns.
However these do not change anything in the source code of my website i.e. in the content variable, so all images are displayed in full size.
What can I do to make the width/height appear in the source code (ideally as width/height attribute of that element)?
Hey Erik and welcome to TYPO3. Usually TYPO3 will take care of the correct images sizes when using the default Content Elements (e.g. Text & Images). But TYPO3 requires ImageMagick or GraphicsMagick installed on the server to modify the pictures.
You can check out if your system matches all requirements using the "Environment" module in the TYPO3 backend (modules on the left side of the backend). Then you will see a function called "Image processing" which will test the required image functions of your server.
I have the following codes to test the image_style_url() on the latest drupal(v7.59)
<img src=“<?= file_create_url($fileuri); ?>” />
<img src=“<?= image_style_url(“medium”, $fileuri); ?>” />
The file_create_url() can show the original image properly, and the image_style_url() can only give the styled image url, but not creating any styled image in the styled image folder.
the public:// and the /tmp directriea are in 777 permission setting, so it won’t be related to permission problem.
Can someone tell me what is wrong with my drupal?
Seems you have to create the image derivate first. Normally this happens automatically when uploading an image via an image field upload. But the automatic derivate creating might simply get skipped on file field uploads, or when using some other image which isn't managed by Drupal at all, or when you added an image style after you already uploaded the image.
Have a look at image_style_create_derivative($style, $source, $destination). Check out the comments as well as $style needs to be an array returned by image_style_load('MYSTYLE').
Creates a new image derivative based on an image style.
Only issue left open is how to check first if the derivate already exists before calling that function. Maybe you can check what file_exists(image_style_path($style_name, $file_uri)) returns, first.
Read more: https://drupal.stackexchange.com/a/22555/15055
Nothing wrong with your Drupal. Derivative image is not physically created until someone visits the listing where that style is used.
Example: You create new node and upload an image on it. Original image is within files folder. But if you use for example teaser image style and if you go to teaser folder the image is not created there until someone visits the page where "teaser" image style is used. You can easily test this on clean Drupal. Basically the image is created on the fly on HTTP request.
I have changed my joomla! application to run at / (root) instead of /joomla/ by:
./bnconfig --appurl /
Everything works fine, except a Random Image Module, which no longer displays images.
Checking the html source, the link of the pictures looks like:
//folders/filename.jpg
which seems to be wrong.
Any hints how to influence that the src in the html is:
/folders/filename.jpg
like in case of other simple pictures displayed correctly.
Thanks in advance!
It looks like that changing the path of the pictures from absolute:
/opt/joomla-3.6.2-1/apps/joomla/htdocs/images/thumbnails
to relative
images/thumbnails
solves the issue.
So I want to use Lazysizes (lazy loading responsive images). Included in my Grunt stack is Responsive Images Extender, which outputs responsive image code (srcset) from simply including an "img" tag with a "src" attribute. Lazysizes requires the "data-srcset" attribute in replace of the "srcset" attribute, however. I added a script to my page that changes the "srcset" attributes to "data-srcset" attributes, but this isn't ideal as images are are already downloaded at runtime. It would be ideal if I could change the tags with Grunt, as there is no advantage in changing them live.
This seems like a very common thing, but I cannot find a good way to do it. String replace doesn't seem like an ideal solution, since it can cause problems if I ever use "srcset=" in my code.
I gave the grunt-responsive-images-extender a major makeover and added the possibility to change the attribute name of srcset to anything you want (data-srcset in your case) via the srcsetAttributeName option.
There is a grunt tans called dom_munger. With dom_munger you can change HTML attributes and do a lot of interesting stuff; however I cannot find a way to change an attribute name to another thing. Perhapse you can have a better luck checking it.
when there is some error in view, L4 shows a nice trace, but cached filename:
open: /var/www/webpage/app/storage/views/1154ef6ad153694fd0dbc90f28999013
howto during view-rendering-to-cache save view's path/name (in a comment or something)?
Or better yet - to show it in the debug-error-page (its called whoops or something?)
Thanks ;)
I don't know how to de encrypt view names , but one method i do is to
{{dd('will you reach here ')}}
Trying to move this line from view to another to watch where php render reach .
I know it is not the right way nor the professional one , but it may help in some cases .
This is not exactly a problema, this is a compiled version of your view.
Laravel Blade System will compile all your views and subviews into a single file and, if you didn't change anything on them it will always try to use the compiled version, to speed up your system.
Sometimes is hard to know wich one of our views is related to that error. Using Sublime text, what I do is to hit CTRL-P (windows) and paste the number of the compiled view (1154ef6ad153694fd0dbc90f28999013) and it will bring it to me right away.
Of course, you won't do any changes on it. This is just way to find the view you have problems in, so you can then find the real file and fix it. If you know wich file is the problematic one, you don't have to do this, go directly to your file.
One way to tackle this problem is add a html comments (not blade ones as they will not be rendered in compiled view) in sections which get echoed.
#section('content)
<!-- FILE: app/views/main/index.blade.php -->
<Your Content Goes Here>
#stop
This html comment will get rendered in the compiled source of the view. Of course you will have to inspect the compiled view first to identify which view is the problematic one. But in my experience, this method work almost all the time.
I created a helper that checks to see if you are working locally or in development mode, It then outputs an HTML comment.
{{ printViewComment('mockup/reports#content') }}
<!-- Template: mockup/reports#content -->
I chose to name the comments like this path.file_name#yeild_name but I only wish this was an automated featured.
I found my answer after looking into source,
when on the Whoops! page, just look for render in the sidebar, there will be the name of the view file...