How Do I Get Edited WordPress Images On A Web Page?
This is the original image
https://gyazo.com/5ca0bca647edb139b85bf623c71d873b
This image is in the media section of Wordpress and I went in and edited the picture in the form of downsizing and cropping.
Here it is after the editing
https://gyazo.com/2d5102e93b597b2234767a8b3649fc69
Yet when I go back into the media section or if I use the image on a webpage it shows up like the original.
I have deleted browser cache, I closed the admin section and re-logged in. I reloaded the image into the page by deleting the old copy and then selecting the new image but it still shows the unedited version.
I am on Wordpress 5.03.
Please tell me how I can get the edited image on my webpage. You can see the web page at http://www.thenewyou.live just scroll down to see the image in question.
Thanks,
https://gyazo.com/5ca0bca647edb139b85bf623c71d873b
This image is in the media section of Wordpress and I went in and edited the picture in the form of downsizing and cropping.
Here it is after the editing
https://gyazo.com/2d5102e93b597b2234767a8b3649fc69
Yet when I go back into the media section or if I use the image on a webpage it shows up like the original.
I have deleted browser cache, I closed the admin section and re-logged in. I reloaded the image into the page by deleting the old copy and then selecting the new image but it still shows the unedited version.
I am on Wordpress 5.03.
Please tell me how I can get the edited image on my webpage. You can see the web page at http://www.thenewyou.live just scroll down to see the image in question.
Thanks,
Terry Woods
Do you have a caching plugin installed in WordPress, such as "WP Fastest Cache"? Also, some WordPress themes have a built in cache, such as the "Jupiter" theme. In most cases, while you're in the WP Dashboard, there will be a link in the bar across the top of the page that empties the cache. I suggest you start by having a look there. I'm also aware of one caching plugin that has a menu labelled "Performance" on the top bar, and the empty cache option is in a list of menu items.
ASKER
no cache at all, I am using the flatsome child theme
What about sizing the image in photoshop or https://pixlr.com/ to the size you need and upload to WP to use?
sharingsunshine,
have you tried clearing your browser cache? Sometimes that can be an issue.
https://www.pcmag.com/article/333441/how-to-clear-your-cache-on-any-browser
Also, it's best practice to edit the image before uploading to WordPress. I know it looks like an attractive option to edit in Media Library, but that rarely diminishes the file size, which is the big issue when it comes to site speed. All your hard work goes to naught if Google penalizes you for a slow loading site.
Scott Fell suggested Pixlr. It's a good resource if you can't afford to shell out for photoshop.
have you tried clearing your browser cache? Sometimes that can be an issue.
https://www.pcmag.com/article/333441/how-to-clear-your-cache-on-any-browser
Also, it's best practice to edit the image before uploading to WordPress. I know it looks like an attractive option to edit in Media Library, but that rarely diminishes the file size, which is the big issue when it comes to site speed. All your hard work goes to naught if Google penalizes you for a slow loading site.
Scott Fell suggested Pixlr. It's a good resource if you can't afford to shell out for photoshop.
So, if I understand it correctly, when you view the image in the media library, the original image is shown.
When you edited the image, it's possible you didn't click the Save button to save the changes. I'm pretty sure that's a step that's required during the editing process. Can you confirm?
When you edited the image, it's possible you didn't click the Save button to save the changes. I'm pretty sure that's a step that's required during the editing process. Can you confirm?
ASKER
that's correct. Yes, I can confirm that the image has been saved. In fact, I cropped it some more and you can see from this screenshot
https://gyazo.com/a9ba9009fb49b0a2b544d9f47fdaf595
If you compare it to the original screenshot and even the 2nd one, the dimension and size are smaller.
Making the change in Photoshop will not work any better. Because it is already changed.
https://gyazo.com/d20a9758acd2f31bd9fdd453f089b031
These are all of my plugins in case something is caching the content
https://gyazo.com/a9ba9009fb49b0a2b544d9f47fdaf595
If you compare it to the original screenshot and even the 2nd one, the dimension and size are smaller.
Making the change in Photoshop will not work any better. Because it is already changed.
https://gyazo.com/d20a9758acd2f31bd9fdd453f089b031
These are all of my plugins in case something is caching the content
Plugins list
Select All
Plugin Description
Select Akismet Anti-Spam
Akismet Anti-Spam
Activate | Delete
Used by millions, Akismet is quite possibly the best way in the world to protect your blog from spam. It keeps your site protected even while you sleep. To get started: activate the Akismet plugin and then go to your Akismet Settings page to set up your API key.
Version 4.1.1 | By Automattic | View details
Select Category and Taxonomy Image
Category and Taxonomy Image
Deactivate
Category and Taxonomy Image Plugin allow you to add image with category/taxonomy.
Version 1.0.0 | By Aftab Husain | View details
Select Classic Editor
Classic Editor
Deactivate | Settings
Enables the WordPress classic editor and the old-style Edit Post screen with TinyMCE, Meta Boxes, etc. Supports the older plugins that extend this screen.
Version 1.4 | By WordPress Contributors | View details
Select Contact Form 7
Contact Form 7
Settings | Deactivate
Just another contact form plugin. Simple but flexible.
Version 5.1.1 | By Takayuki Miyoshi | View details
Select Exif Caption
Exif Caption
Deactivate | Settings
Insert the Exif data to the caption of the media. Also replaced caption of content.
Version 2.13 | By Katsushi Kawamori | View details
Select Hello Dolly
Hello Dolly
Activate | Delete
This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from Hello, Dolly in the upper right of your admin screen on every page.
Version 1.7.1 | By Matt Mullenweg | View details
Select Imagify
Imagify
Settings | Bulk Optimization | Documentation | Deactivate
Dramaticaly reduce image file sizes without losing quality, make your website load faster, boost your SEO and save money on your bandwidth using Imagify, the new most advanced image optimization tool.
Version 1.8.4.1 | By WP Media | View details
Select Nextend Social Login
Nextend Social Login
Settings | Deactivate
Nextend Social Login displays social login buttons for Facebook, Google and Twitter.
Version 3.0.17 | By Nextendweb | View details
Select Post SMTP
Post SMTP
Settings | Visit us | Deactivate
Email not reliable? Post SMTP is the first and only WordPress SMTP plugin to implement OAuth 2.0 for Gmail, Hotmail and Yahoo Mail. Setup is a breeze with the Configuration Wizard and integrated Port Tester. Enjoy worry-free delivery even if your password changes!
Version 1.9.8 | By Yehuda Hassine | View details
Select Regenerate Thumbnails
Regenerate Thumbnails
Deactivate
Regenerate the thumbnails for one or more of your image uploads. Useful when changing their sizes or your theme.
Version 3.1.0 | By Alex Mills (Viper007Bond) | View details
Select Stop Spammers
Stop Spammers
Deactivate
The Stop Spammers plugin blocks spammers from leaving comments or logging in. It protects sites from robot registrations and malicious attacks.
Version 7.1 | By Bryan Hadaway | View details
Select StopBadBots
StopBadBots
Deactivate
The easiest way to stop bad bots and spiders.
Version 5.34 | By Bill Minozzi | View details | OnLine Guide | Go Pro
Select WooCommerce
WooCommerce
Activate | Delete
An eCommerce toolkit that helps you sell anything. Beautifully.
Version 3.5.5 | By Automattic | View details
Select WooSidebars
WooSidebars
Activate | Delete
Replace widget areas in your theme for specific pages, archives and other sections of WordPress.
Version 1.4.5 | By WooCommerce | View details
Select Wordfence Security
Wordfence Security
Upgrade To Premium | Deactivate
Wordfence Security - Anti-virus, Firewall and Malware Scan
Version 7.2.2 | By Wordfence | View details
Select YITH WooCommerce Wishlist
YITH WooCommerce Wishlist
Deactivate
YITH WooCommerce Wishlist gives your users the possibility to create, fill, manage and share their wishlists allowing you to analyze their interests and needs to improve your marketing strategies. Get more plugins for your e-commerce on YITH
Version 2.2.8 | By YITH | View details
Select All
Plugin Description
Select bulk action
16 items
If you click on the image in the media library, which version do you see?
ASKER
the unedited one 482 x 251
I wonder if the edits are being saved correctly; there may be a javascript error. I suggest opening the Dev Tools console in your browser (hit F12 in Chrome or FF), and making the edit again.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I just use the ux bbuilder option with the theme I am using. Which is flatsome-child. When I am in the ux builder option I delete the image I don't want by pressing the remove button.
https://gyazo.com/8df9760c9c7e457d9e1b482bd15b8a7e
I then press select media
https://gyazo.com/d523136377b65e88b30818a778679770
I select the image that has been edited. I can tell because the size is different and the image displaying over at the top right is the image I want to use.
https://gyazo.com/49ec4772851543b5386ea370d0ca3a25
But, as you can see it puts back the unedited image.
https://gyazo.com/5a803ba008f2d4bd43fa4cda7aac7e0e
Since I am using the UX Builder option I can't see the code either before or after the update. If you can tell me how to find it I will gladly note what takes place.
https://gyazo.com/8df9760c9c7e457d9e1b482bd15b8a7e
I then press select media
https://gyazo.com/d523136377b65e88b30818a778679770
I select the image that has been edited. I can tell because the size is different and the image displaying over at the top right is the image I want to use.
https://gyazo.com/49ec4772851543b5386ea370d0ca3a25
But, as you can see it puts back the unedited image.
https://gyazo.com/5a803ba008f2d4bd43fa4cda7aac7e0e
Since I am using the UX Builder option I can't see the code either before or after the update. If you can tell me how to find it I will gladly note what takes place.
What happens if you select a totally different image?
ASKER
Julian, you were correct it wasn't a caching issue.
Your comment is what caused me to try the regenerate button. Even though I didn't consider the image sizes to be thumbnails it still was necessary to press the "regenerate thumbnails" button. Once I did that jI ust pressed the update button and now it is the correct image.
Your comment is what caused me to try the regenerate button. Even though I didn't consider the image sizes to be thumbnails it still was necessary to press the "regenerate thumbnails" button. Once I did that jI ust pressed the update button and now it is the correct image.
Ah, of course!! That one catches me sometimes, too!
"Thumbnail" in WordSpeak means an attachment image size. It's not really related to image dimensions. So, the image could still be rather large and considered a Thumbnail.
Once you attach an image to anything, it's stuck in that particular attachment size unless you regenerate it!
"Thumbnail" in WordSpeak means an attachment image size. It's not really related to image dimensions. So, the image could still be rather large and considered a Thumbnail.
Once you attach an image to anything, it's stuck in that particular attachment size unless you regenerate it!
ASKER
Thanks for the clarification and your inputs. I guess it caught all of us. :-)
Yep! And now going forward you've got at least one debugging trick under your belt!
WordPress is definitely a "Live and Learn" Adventure!
:)
WordPress is definitely a "Live and Learn" Adventure!
:)