I have a site and I'm using Simple Pie to bring in external rss feeds. I'm displaying images, but they are showing up very blurry. When I click through to the story, they look fine on the original site. Why are they showing up blurry on my site?
Here's my site: http://leadgenixhosting.com/~freepub/
The reason these images are "blurry" is because they're much smaller than the size you're scaling them to. Without seeing the feeds you're using, there's no way of knowing if that can be fixed, but my suspicion is that only the thumbnail images are included in the feed.
Related
My website uploads texts some fraction of a second before the images or graphic appears.
I use elementor pro as my website builder and hello theme. Please wish to know how to tackle this issue. Thanks for helping.
The simple answer is: your browser prioritizes smaller file sizes. Use properly optimized images and make sure to use the webm format for optimal user experience.
That's it. There's nothing more to it than that. Use smaller images. You can look through google's do's and don'ts here.
tl;dr I'm wanting to specify NO image by default in my og:image tag.
I've been googling like a madman to figure this one out, but everything I find are questions from people who can't get their images to show up instead of preventing their images from showing up.
So, here's the deal. On my personal website in my master page is a picture of my face. Now, it's a nice picture (because, hey, it's a nice face) and I'd like to keep it, but I don't like that it's picked up by social media scrapers whenever my links are shared - that just seems a little too egotistical.
I DO like that it picks up other images, like the ones I occasionally include in my blog posts, but if there aren't any other images on a page then I want the scrapers to ignore my face.
I've experimented with commenting out the code that generates the og:image tag in my Yoast plugin, then hard coding the tag with an empty content attribute into my header.php:
<meta property="og:image" content="" />
This partially achieved the desired effect - Facebook's scraper detects that no image url is specified, but is still seems to be defaulting to whatever other image it can find.
The Open Graph protocol doesn't appear to include behavior for specifying no images, either.
Any thoughts on how I could do this?
EDIT: I just found some workarounds in this question that will probably do the trick, but if anyone has any other ideas, I would appreciate hearing them as well.
Upload a blank or 100% transparent image with at least 200x200px and use it in the og:image tag.
I have searched quite a bit for a solution and can't seem to find anything on this topic so I thought I would reach out to this amazing community.
I will try to provide enough context here so that others may be able to see what is going wrong.
Up till a few days ago I have been able to use the standard pinterest bookmarklet to pin images from my blog's main page (Forged Photography) to pinterest. I tried pinning some images today and realized that it is only finding my header image and none of the other content.
It is a wordpress blog and I have deactivated my plugins and changed my theme to eliminate those aspects as a cause and the behavior still remains.
I have uploaded content in two ways:
Uploaded photos via Wordpress and created galleries
Pinterest bookmarklet only finds the header image and the featured gallery image
Embedding images that are hosted on facebook
I can still pin them if I click on individual pictures but I can't pin from the main page of the blog.
When I used to click the bookmarklet from the main page of my blog it used to pull up all of the images contained in all of the posts and enable me to pin them, now it only finds my header image.
Any ideas on what may have happened or what is preventing the bookmarklet from finding the images?
Well, it isn't the answer that I was looking for but it seems to work out. A nice lady reached out to me on Facebook who was experiencing the same issue, turns out Pinterest won't find images that are under 200px...
Doesn't explain why I was able to pin them in the past but now I can't. I am not crazy about the way the thumbnails look # 200px, any other ideas on how to get around this issue?
Try this:
<img src="smallimage.jpg" data-pin-media="largeimage.jpg" />
The bookmarklet should pick up the image you send in data-pin-media. Also worth trying out: data-pin-url, which will make the bookmarklet pin the URL you suggest rather than the URL of the page you're on right now.
I installed the FeedWordpress plugin but I noticed it was not posting the images in the media attachment of the feeds, but only the text. I found a little script that helped me a bit (the images are added to a custom field without actually downloading them). The problem is I need thumbnail images and of course.. you can't have thumbnail images without downloading the image.
Is there any way I could download automatically the images in the media attachments ? Or, is there any other way I could have my thumbnails fixed ?
I would honestly appreciate any help
rss feed: http://www.antena3.ro/rss/politica.xml
my website: http://www.rolportal.info
I am major armature in the developer domain, however, my PHP guy sorted it out by downloading another plugin called Auto Post Thumbnail, they did a small hack so it would constantly check for feature images.
You have to make sure you sure your CSS person tells the feature image grabber to only grab images of a certain size, and crop if necessary, this will prevent it pulling social media icons in as feature images :)
**I did have a duplicating image problem recently, i disabled Jetpack which fixed the problem, but I want Jetpack back :(
Good luck, if you need more detailed information, I will ask my developer.
Sincerely,
Brook
This is my first question on Stack Overflow. I heard this site was a great resource for website developers. I'm new and still learning so this should be easy.
I am making a photo gallery that has a few small thumbnail images and a large image in the middle, all on the same page. I want to make it so that when you click on each thumbnail the large image in the middle of the page changes.
Is there a way to do this with pure CSS and no javascript? Is it also possible to preload all the large images so that each time you click a thumbnail the large image in the middle just pops right up?
Thank you in advance for any help! I look forward to participating here often!
Is there a way to do this with pure CSS and no javascript?
It is possible, but not well supported in browsers.
You could link to the images and use :target to change the display property from none to block.
The problem with this is that if the browser supports display (i.e. almost all of them) but not :target (i.e. lots of them) then some images will simply be unavailable.
Is it also possible to preload all the large images so that each time you click a thumbnail the large image in the middle just pops right up?
This would achieve that.
However, preloading the large versions of all the images would be quite a painful load on users' bandwidth.
Individual pages which use some form of include or server side process to duplicate the navigation are still the way to go.
I don't think there's a good way to do this with no Javascript.
With minimal Javascript, you could have all of the large images hidden, and use onClick on the thumbnails to un-hide the appropriate image.
With more Javascript, you could keep changing the src attribute of the large image and preload images using Javascript as well (see http://www.pageresource.com/jscript/jpreload.htm).
A google search brought back some methods using pure CSS but I would suggest using a jquery plug-in like galleria. JQuery Plugins make this easy.