Mahangu Weerasinghe

I am unable to load a media also. the error message is “Failed to write file to disk.”

Given this error message, something could be mis-configured on your hosting account.

Since your web host Hostinger has access to your WordPress installation, including the database and all the files, I would see if they can help you safely upgrade WordPress.

You can reach their support at – https://www.hostinger.com/contacts

I see! Thanks for clarifying. It looks like you are using Optimole to process your images. Let’s look at one example:

For this post – https://knewsgr.com/2024/07/01/review-aria-glow-the-asian-and-korean-pop-culture-music-event/

• The front page thumbnail is – https://ml5uhqjiebyr.i.optimole.com/w:400/h:200/q:mauto/rt:fill/g:ce/ig:avif/https://knewsgr.com/wp-content/uploads/2024/06/IMG_0682.jpg
• The image on the post is – https://ml5uhqjiebyr.i.optimole.com/w:816/h:458/q:mauto/ig:avif/https://knewsgr.com/wp-content/uploads/2024/06/IMG_0682.jpg
• If you look at the URLs above, you can see that your front-page thumbnail is being rendered at 400x200 pixels, and the image on your post is being rendered at 816x458 pixels.

Thus, it looks like Optimole is doing some cropping and resizing for you here, and if you noticed your front page images becoming blurry recently, the support forum for the Optimole WordPress plugin may be able to help.

I see. Thank you for clarifying. The issue could be the <style></style> tags not being picked up correctly when pasted into the editor. You can try adding the CSS to your site via your theme’s Custom CSS screen in the Customizer. If your theme doesn’t have a Custom CSS option, you can try using the Simple Custom CSS and JS plugin.

I used the said plugin and added this Custom CSS snippet and activated it on the site:

.textimageblockwrap {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.textimageblockwrap > div {
  flex: 1 1 50%;
  padding: 1rem;
  box-sizing: border-box;
}

.img-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-container img {
  max-width: 100%;
  height: auto;
  max-height: 350px;
}

I then added the following HTML in the editor:

<div class="textimageblockwrap">
<div>
<h2>Feedback vs Zero feedback</h2>
Canor Virtus M1 enables instant switching between the connection with the feedback or with zero global feedback. This has an influence on the overall performance of the power amplifier which results in a different listening experience.

</div>
<div class="img-container"><img src="https://www.canor-audio.com/thumbs/460x340-drop-90/42-3985-feedback.jpg" alt="Feedback vs Zero feedback" /></div>
</div>
<div class="textimageblockwrap">
<div class="img-container"><img src="https://www.canor-audio.com/thumbs/460x340-drop-90/42-3985-feedback.jpg" alt="Feedback vs Zero feedback" /></div>
<div>
<h2>Feedback vs Zero feedback</h2>
Canor Virtus M1 enables instant switching between the connection with the feedback or with zero global feedback. This has an influence on the overall performance of the power amplifier which results in a different listening experience.

</div>
</div>

This seemed to work locally for me (see screenshot): https://d.pr/i/XwLvNy

If you’d rather not add separate Custom CSS to your site, you can also define the styles inline, though this may become cumbersome if you ever want to change the styles across all your products:

<div style="display: flex; flex-wrap: wrap; margin-bottom: 20px;">
  <div style="flex: 1 1 50%; padding: 1rem; box-sizing: border-box;">
    <h2>Feedback vs Zero feedback</h2>
    <p>Canor Virtus M1 enables instant switching between the connection with the feedback or with zero global feedback. This has an influence on the overall performance of the power amplifier which results in a different listening experience.</p>
  </div>
  <div style="flex: 1 1 50%; padding: 1rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center;">
    <img src="https://www.canor-audio.com/thumbs/460x340-drop-90/42-3985-feedback.jpg" alt="Feedback vs Zero feedback" style="max-width: 100%; height: auto; max-height: 350px;">
  </div>
</div>

<div style="display: flex; flex-wrap: wrap; margin-bottom: 20px;">
  <div style="flex: 1 1 50%; padding: 1rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center;">
    <img src="https://www.canor-audio.com/thumbs/460x340-drop-90/42-3985-feedback.jpg" alt="Feedback vs Zero feedback" style="max-width: 100%; height: auto; max-height: 350px;">
  </div>
  <div style="flex: 1 1 50%; padding: 1rem; box-sizing: border-box;">
    <h2>Feedback vs Zero feedback</h2>
    <p>Canor Virtus M1 enables instant switching between the connection with the feedback or with zero global feedback. This has an influence on the overall performance of the power amplifier which results in a different listening experience.</p>
  </div>
</div>

Hopefully this should give you a starting point to work from!

Could you please link to the thumbnails you think are fine and the ones that you think are blurry? You can right click the thumbnails and select Copy Image Link to get their image URLs.

I ask because none of the thumbnails currently on the frontpage of https://knewsgr.com seem to look much worse than the rest to me. They all look around the same quality.

Since this is related to Elementor, the folks over at the Elementor plugin support forum will be able to look into this for you.

Since these two plugins seem to be conflicting with one another, you ask about this on the Elementor support forum and/or the BA Book Everything support forum.

I cannot see a WordPress site at https://jwhitech.com (I only see a blank white page)

I would like to enable a mobile phone feature for my company number at the bottom of the main page (footer).

You should be able to do this by adding the phone number to a Text Widget.

Also, I have added an image of our authorized certification logo, and I would like to make the certificate pop up when clicked.

You can look into using a popup plugin for this. If you just want to link to your certificate and don’t mind it opening in a new browser tab instead of a popup, you can add the logo using an Image Widget and then link to your certificate using the Image Widget’s Link to: field.

• This reply was modified 1 year, 10 months ago by Mahangu Weerasinghe.

The layout of your site is managed by your theme. It looks like the theme you are running is called IKnowledgeBase, by a developer called Wow-Company. Since this theme is created by them, they are the best point of contact for help with it.