I am using Drupal's hook_form_alter to add a stylesheet into one of my forms (user registration form). My code does add the stylesheet to jquery.extend(Drupal.settings) as sites\/all\/themes\/mytheme\/css\/font-awesome-min.css:1, but this does not allow me to use the stylesheet as when I reference classes that are in it, they don't load as the CSS file does not show up as an import URL or link in <head>. Any help would be appreciated.
function mytheme_form_alter(&$form, &$form_state, $form_id) {
if ( $form_id == 'user_register_form' )
{
$form['#attached']['css'] = array(drupal_get_path('theme', 'mytheme') . '/css/font-awesome-min.css');
}
Add 'file' at the end of $form['#attached']['css'] array, like this:
$form['#attached']['css'] = array(drupal_get_path('theme', 'mytheme') . '/css/font-awesome-min.css', 'file');
Related
I'm getting this error: InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/showcaseimage.c2c0ae9f.jpg') is not a valid name.
Why do I get it on an image import ? (I'll include my file tree. but i think the issue is not with that). The name of the image inside of the image folder is showcaseimage.jpg
my file tree and how i imported an image inside of my component
Imported images are not components, they are URLs (or they will be by the time a bundler has worked its magic).
You need an img element or other thing that accepts a URL to use it.
import myImage from '../images/foo.jpeg';
const MyComponent = () => {
return <img src={myImage} alt="Alternative text goes here as usual" />;
}
I want to use file-viewer in Next.js, but I get this error:
./public/pdf.pdf Module parse failed: Unexpected token (1:0) You may
need an appropriate loader to handle this file type, currently no
loaders are configured to process this file. See
> %PDF-1.3
| %����
|
How can I solve this problem?
my code:
import FileViewer from "react-file-viewer/src/components";
import pdf from "../../../public/pdf.pdf"
...(in component)
{openFileViewer ? <FileViewer fileType="pdf" filePath={pdf} /> : null}
Since your PDF file is located in the public folder, you can reference the image's path directly in the filePath prop.
You also need to make sure react-file-viewer is only imported in the browser as it depends on window being present to work properly. You can do so by dynamically importing the component through next/dynamic with ssr: false.
import dynamic from 'next/dynamic';
const FileViewer = dynamic(() => import('react-file-viewer'), {
ssr: false
});
export default function Index() {
return (
<FileViewer fileType="pdf" filePath="/pdf.pdf" />
);
};
You still can import a .pdf file in Next.js without the need to a third party module, simply by using <iframe> HTML tag instead.
If you uploaded your file on a cloud storage; say google drive, dropbox, S3 ..etc
you can embed its link in your website as such:
const PreviewFile = () => {
return (
<iframe
src="https://drive.google.com/file/d/11h3WlhD221wMuXyXWPsdmXb4UNM-qaot/preview"
title="Async & Performance"
width="800"
height="600"
/>
)
}
*Note that a google drive link is used here but it's an embed link not the one you get when you click on share button.
as attached below:
Do I need to add GTM initializing(the following code) for every page?
Or Do I just need to add that at only the app.js file?
import TagManager from 'react-gtm-module'
const tagManagerArgs = {
gtmId: 'GTM-000000',
events: {
sendUserInfo: 'userInfo'
}
}
TagManager.initialize(tagManagerArgs)
You just need to initialize it once in the app.js file.
You only need to initialize the GTM code once and then use TagManager.dataLayer() to send you data on the page you need.
You can read more in the document with sample code.
https://www.npmjs.com/package/react-gtm-module#datalayer
I just finished making a plugin but my javascript & css are being loaded into every page of the site rather than just on my admin settings page. This is the code I have in my Plugin's class:
public function onBeforeCompileHead(){
$app = JFactory::getApplication();
if ($app->isSite()) {
return;
}
$document = JFactory::getDocument();
$document->addScript(JUri::root() . 'plugins/system/plugin_name/js/jquery-ui.js');
$document->addScript(JUri::root() . 'plugins/system/plugin_name/js/custom.js');
$document->addStyleSheet(JUri::root() . 'plugins/system/plugin_name/css/style.css');
}
I have a data file api that has bunch of images url stored locally
const url =[
{ title:img1,
img_src="./img/img1.png"
},
{ title:img2,
img_src="./img/img2.png"
},
{ title:img3,
img_src="./img/img3.png"
}
]
And using react/redux I pass the url state as props to my react components.Next I want to display them in my components by using require
<img src=require(?)/>
What's the appropriate syntax here? I've used es6 template string ${this.props.urls.img_src} but it throws an error that it couldn't resolve the path. I've tried to require("./img/img1.png") just to test to rule out broken path and it worked. But still wouldnt work if you reference it using a prop.
Solution
After researching, and thanks to Rei Dien for the input, I now can use variables in require by using context require
<img src={require("./img/"+this.props.img_src)}/>
Since you passed the url in the props, you can do this :
this.props.url.map(n => {
return (
<img src={n.img_src}/>
)
})
this will diplay all the images.
since require works in static mode during build process on node only so follow following steps.
1) take all image urls and store them in a javascript file
so
//imageURLs.js
import image1 from "path_to_image_file_1";
import image2 from "path_to_image_file_2";
import image3 from "path_to_image_file_3";/**do like this for all images stored locally, image1, image2,.. are the image identifiers(title in your case) you would get in api call**/
export const urls = {image1, image2, image3};
//image usage file
read api for identifier and
import imageURLs from './imageURLs.js';
<img src={imageURLs[image_id_from_api]}/>