My website is not loading the background images on live version - it just shows the text and a grey screen.
I built the site using Elementor.
Here are the pages
(all service pages).
I compressed all images to about 100K so they shouldn't be too big to load. The one one the homepage is 99K and it loads.
Thanks
Looking at the page you linked the path to the background image you are trying to have show up has this path: http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg
You can solve it
Step 1 - Elementor -> Tools -> Replace URL -> http://localhost/ -> https://wwlandscaping.com -> Replace URL
Step 2 - Elementor -> Tools -> General -> Regenerate CSS -> Regenerate Files & Sync Library -> Sync Library
I had similar challenges getting Elementor background images to load on devices in local environments using Local WP with live link.
Here's how I solved for it. The Elementor Migration Guide was super helpful.
From the elementor migration guide:
Background images are saved in a CSS file which has an absolute URL.
To avoid migrating issues with the background images without having to
write a script, you can define the CSS Print Method to be inline
instead of using external files, if you want. This can be done by
going to Elementor > Settings > Advanced > CSS Print Method > Internal
Embedding> CSS print method: inline, on your WP dashboard.
Here's what got elementor background images working on local devices for me. I'm using Local WP with live links for device testing:
In your local environment set the local Elementor css print method
to "internal embedding" (Elementor > Settings > Advance)
Conduct a url rewrite (old environment URL to new environment URL)
Regenerate Elementor files (Elementor > Tools > General)
After I did this, in my local environment, my background images showed up in local devices. I then did a push to staging and prod (database included) to see if the background images were still visible and they were. Everything worked.
For production - Elementor cites performance enhancements when having Elementor's css print method set to "external".
If you want to do this on prod, after you're done with your device testing, follow these steps:
In your prod environment set the local Elementor css print method to "external file" (Elementor > Settings > Advance)
Conduct a url rewrite (old environment URL to new environment URL)
Regenerate Elementor files (Elementor > Tools > General)
I think this should solve the Elementor background image conundrum when developing sites locally and on devices. Please let me know if I'm wrong here.
Your images are still referencing localhost. for example http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg. I advise you to export your site using something like all in one wp migration, so that it fixes the links or find a way of fixing these image links.
Looking at the page you linked the path to the background image you are trying to have show up has this path: http://localhost/woodworks/wp-content/uploads/2019/01/services-decking.jpeg You can see you are still referencing your localhost which is your internal webserver and not the one you are using now. If you remove the localhost domain it should work correct provided the image is in the correct path.
Step 1 - Elementor -> Tools -> Replace URL -> http://localhost/ -> https://wwlandscaping.com -> Replace URL
Step 2 - Elementor -> Tools -> General -> Regenerate CSS -> Regenerate Files & Sync Library -> Sync Library
Step 3 - go to page and click edit page from elementor. Select image background and remove image.
step 4 - click update.
step 5 - upload image again and click update.
Please try to replace your URLs. Log in to your Wordpress account on whichever server it is hosted.
On your Dashboard screen, navigate to Elementor -> Tools. In General tab, regenerate CSS files.
A simple workaround because the tools from Elementor didn't helped: connect via FTP to your website.
Go to the following folder: /wp-content/uploads/elementor/css
download them and search and replace the old background URLs
For me I had some CSS in another folder: /wp-content/uploads/ao_ccss
I changed the background URLs there and it fixed the problem.
Anyone who has this problem (on laptop) and is at the end of there wits.... check the background on android.....if the background shows then the issue is with breakpoints. For some reason settings for laptop/pc were not set. Only mobile/tablet were preset for me.enter image description here
This thread helped me find the issue I was having with background images not showing but in my case it was a permissions issue. Make sure that the /wp-content/uploads/elementor/css folder is writeable by the webserver.
Related
Live Site
Repo
I just uploaded this project and the live site works fine. But for some reason the images are now gone when viewing it on localhost. It worked fine until I pushed and published the project.
The images folder is inside the public folder.
Also I just realized that when viewing the site on mobile, I seem to be able to scroll beyond the content (right and down). I’m not sure why that is..I also noticed that when viewing the site in the browser and enable touch simulation. Disabling it, it doesn't scroll beyond the content.
you have specified the file location as "./images/client-databiz.svg" for images
which is need to open the folder named images under the current JS file presents.
since during deploying it will build and make your code into static file
refer
you need to use "../../public/images/client-databiz.svg" to preview that actually.
I hope it will also work in production.
Started using Azure data studio and creating documentation for some SQL processes in our system.
As part of that I need to include a flow diagram in the document. Currently I have uploaded an image to a URL and am able to embed the image in document from the URL.
But is there any way to include an image from a local folder? Please assist.
I think this is what you want.
from IPython.display import Image
Image(filename='C:/your_path/your_image.PNG',width=200, height=100)
I was interested in this also. Syntax should be (if you store images in subfolder relative to notebook):
This didn't work for me initially: rendered as a broken image icon.
Things I tried:
Make sure you have a workspace defined for your root folder. Create the folder, then select "File > Add Folder to Workspace ..."
If that does nothing, try closing and restarting ADS. I've found the rendering to be flaky from time to time after awhile or if you have been opening/closing notebooks a lot.
Related topic has been discussed previously for markdown in general (but worth asking again for ADS!), eg. How to display local image in markdown
I am trying to add images to my Joomla article page. They do not display. Only the path is showed, like the following
{gallery}hotel/Al-Bandary-Tower{/gallery}
Please help me to find out the reason.
Thanks in advance.
1) Go to Extensions -> Plugin Manager and make sure that Simple Image Gallery that you use is turned on. Click on it to open settings.
2) You should have a name of root images directory - directory above "Hotel" in your case - under Images root.
3) In the very end of the settings check that GD library is supported by the server. Otherwise, ask your hoster to turn it on for your account.
4) In the details panel set the radiobutton to "Enabled". Save the settings.
(source)
If you use K2, note that you can use Simple Image Gallery tags only in K2's introtext or fulltext blocks.
I am working with Drupal 7 and need to create some alternate page tpl's so that I can have pages full width as well as a page with one right sidebar. I have read the documentation and scoured the net and at this point am totally stumped.
Step 1: I created a new content type called test and made it a basic page.
Step 2: I went to the template.php file and added the following code for the pre_process page function:
if (isset($vars['node'])) {
$vars['theme_hook_suggestions'][] = 'page__'. $vars['node']->type;
}
Step 3: I created a new page named page--test.tpl.php
Step 4: In admin > configuration > I cleared the site cache
Step 5: Epic failure... the newly created page does not render and the page.tpl.php is still displaying. I tried different browsers & cleared cache to no avail. I don't know what I did wrong as my procedure seems to follow the correct steps that I have studied.
A search here landed me at custom page-xxxx.tpl.php doesnt works but the suggestion there is to implement the same preprocess code that I have already installed.
I found some great information at https://drupal.stackexchange.com/questions/36054/how-to-have-a-another-page-tpl-php-file-in-drupal-with-different-regions-and-blo which enabled me to solve this issue.
The solution:
Instead of naming your custom page page--yourcustompagename.tpl.php use a format like this: page--node--23.tpl.php If you are unsure of the node number of your custom page navigate to the content section and hover your mouse over the edit option for your custom created basic page and Drupal will display the node number for you.
As mentioned in one comment you will also need to clear your cache by clicking the clear cache button in Configuration > Performance > Clear Cache. You should also clear the theme registry as mentioned in a comment above. A helpful tool I found for clearing the theme registry is the Magic Module which you can find at https://www.drupal.org/project/magic After you install this module go to Appearance > (Your Active Theme) Settings > Development Enhancements and check the box for "Rebuild Theme Registry on Reload"
This thread works well in a mobile app but in a desktop app it would seem I cant add the reference to the external JS in an extjs desktop app.
The instructions from Sencha somehow don't correspond or it doesn't work for me when I try and follow them. So, I am selecting Resources->Library and can see the attribute Include JavaScript (ticked) and Library Base Path:/ext.
The JS file I am using I use in a phone app and its fine - I added it to the app.json in that and compiling the app copies the file over to the target and defers the loading.
In this case with SA I am not seeing the file copied to the target - nor can I follow the instructions with SA 3 that are documented. The only way I can add an external JS is by dropping it onto the filesystem into the ext folder manually. Again, it doesn't appear in the target and certainly errors when I run the app with
Uncaught ReferenceError: hex_sha512 is not defined
This JS has been used in other apps, is proved and tested but just relates to SA or my wrong use of SA.
The proper way to add a resource in Sencha Architect, regardless of framework, is to add it as a JS resource.
This is most easily done by hitting ctrl-t (or cmd-t on a mac) and typing "js resource" (or some shortened string thereof to get autocompletion)...
Alternatively, you can use the toolbox, click "Resources", and drag out or double click "JS Resource"
These are just different user interfaces to accomplish the same task.
Once you've added your JS resource using one of the above methods, you need to set the URL in the config pane (at bottom right unless you've configured Architect to swap the left and right panes)...
The URL is to be set relative to your project folder. If you copy the JS file into your project root under a folder called "lib" for example, then you'd set the url config to "lib/foo.js" - where foo.js is the filename, of course.
Hope that helps!
My lack of understanding of the instructions or they are not clear:
It would seem the way to do it is take eyes up to the top right of SA and spot the + button as shown in the image.
Add the JS resource and scroll up because it may be hidden behind the property inspector.
On setting the url field under properties, the source of the JS appears in the main editing window.
Certainly works fine after the app is built.