I have a wordpress website for a client.
The client reported a problem that the website home page shows blur images on first load. After a refresh or second run the images load fine.
url: slmp.com.pk
How to fix this issue?
Disable Adaptive images in the theme control panel.
On the first load the image is coming from this:
<img src="https://www.slmp.com.pk/wp-content/uploads/2016/12/Screenshot_16-uai-258x26.png" alt="logo" width="258" height="26" class="img-responsive adaptive-async adaptive-fetching" data-uniqueid="93-141064" data-guid="https://www.slmp.com.pk/wp-content/uploads/2016/12/Screenshot_16.png" data-path="2016/12/Screenshot_16.png" data-width="999" data-height="100" data-singlew="null" data-singleh="null" data-crop="" data-fixed="height">
and second load is coming from this
<img src="https://www.slmp.com.pk/wp-content/uploads/2016/12/Screenshot_16.png" alt="logo" width="999" height="100" class="img-responsive">
if you change the image src on the first load to https://www.slmp.com.pk/wp-content/uploads/2016/12/Screenshot_16.png it will load fine.
In the div with a class of background-wrapper there is another div with a background image.
Whatever calls that background image should be something like get_post_thumbnail( $post_id )
Add a second parameter of full to the call like this get_post_thumbnail( $post_id, 'full' ) to ensure that the full sized image is always pulled in.
Related
I have a gallery page that looks pretty good, but I need to add my own pictures of myself and/or family... I've tried to do so but it isn't working the way it should.
Here a codepen of the problem: https://codepen.io/AJ2021/pen/EOWYvmenter code here
I need my photos to be in a shadowbox so I have a thumbnail on the page and when I click on it, it opens in a large view.
If the codepen has the exact same code your dreamweaver does, I found an error in the snippet.
It originally was:
" alt=""/> rel="shadowbox[picture]" title="a">
<img src="../Documents/SU Fall 2017/Foltz class/tmb_Lawtons_Marina.jpg">
</a>
Now it's:
<a href="../Documents/SU Fall 2017/Foltz_class/img_Lawtons_Marina.jpg" alt="" rel="shadowbox[picture]" title="a">
<img src="../Documents/SU Fall 2017/Foltz class/tmb_Lawtons_Marina.jpg">
</a>
It looks like the anchor tag <a> had closed too early.
Recently I noticed in my Wordpress website that in all the pages, when I have an image to display, it displays the image and right after it displays the path to the image, including the image properties. The entire
Can someone helpe, please?
enter image description here
Seems like your HTML Structure breaks with your PHP Code. you need to check your code where you getting this Image. This is how its showing from Inspect Element:
<img src="http://antiparosbeauty.gr/wp-content/uploads/2014/03/weding.jpg" alt="weding" class="alignleft size-full wp-image-140" srcset="http://antiparosbeauty.gr/wp-content/uploads/2014/03/weding.jpg 345w, <a href=" http:="" antiparosbeauty.gr="" wp-content="" uploads="" 2014="" 03="" weding-300x141.jpg"="" target="_blank" height="163" width="345">
While working on a project, I discovered some of my images on Tumblr are not displaying. The only clue I've found is that within the responsive-level-1 class (see below for html code), the height of the iFrame is set to 0. If I pop open a dev console in Chrome and set that to be, e.g., 1632 (not 0), the image appears. I'm using a theme (Brick theme/theme garden) , but am able to edit the html and css. Can I modify my css and/or HTML to fix this? The issue occurs across device platforms (desktop/phone/tablet).
Example of no image displayed- http://deligrossery.com/post/149661412746/gawad-deli-grocery-207-hart-st-brooklyn-ny
corresponding css files:
responsive.css: http://static.tumblr.com/eftyn9y/kc0og8vio/responsive.css
style.css: static.tumblr.com/3zmswwt/Fmkmwgp8e/style.css
(^ I can't post more than 2 links until my reputation is at least 10/add an https:// to the style.css).
<iframe id="photoset_iframe_149661412746" class="photoset" scrolling="no" frameborder="0" height="0" width="500" style="border:0px; background-color:transparent; overflow:hidden;" src="http://deligrossery.com/post/149661412746/photoset_iframe/deligrossery/tumblr_ocn1e9dTfK1txl3g8/500/false" name="photoset_iframe_149661412746"></iframe>
Try changing your photoset layout block to something like this (you may need to tweak this slightly):
{block:Photoset}
<div class="content photoset">
{block:Photos}
<img src="{PhotoURL-500}"/>
{/block:Photos}
{block:Caption}
<div class="description">{Caption}</div>
{/block:Caption}
<p></p>
</div>
{/block:Photoset}
Keep a backup of your current theme.
This should output the photoset in the normal html template (not iframe). From there it should be much easier to control the height of the content, in fact by default it should just output the content and the height will be fixed automatically. But there might be other issues to investigate after this.
I'm currently using DYI app builder platform and they have a <>source code page. So I put in
<img src="URL.png"/>
And it worked! But when I tried to shrink the image (original image is width=256 height 256)
<img src="URL.png" Width="100" Height="100"/>
Nothing happens to the size of the image.
So I tried
<div style="width:100px;height:100px;overflow:hidden;" >
<img src="URL.png" width="100px" height="auto">
</div>
Which I picked up on StackOverflow.. But it doesn't work.
Please help. BTW I have no knowledge of coding so please do not skip a step assuming I would know it.
(When I apply the code and go back to the source code page width and height disappeared from the source code page except the bare bone Img src="URL")
Something in your program is overriding it or disabling it (filtering it away). If it is another css rule that is overriding your css, then you could try:
width:100px !important;height:100px !important;
if this doesn't work then apparently the css gets filtered out, you might check the program's settings if this behavior can be changed
Try to save the page, in the DYI app builder you're using.
I'm somewhat perplexed by this.
..
The page im working on is located in
www.gd-gaming.com/wordpress/
However, for the background image to show, instead of putting it in
www.gd-gaming.com/wordpress/images
I've had to put it in
www.gd-gaming.com/images
Now, When I visit an additional page from the one im working on, (www.gd-gaming.com/wordpress/breakout-canidates/)
That background image dissapears. I cant understand why, I use the same code on a vbulletin website and the background displays everywhere. If I firebug it, it tells me the image didnt load, meaning the path is incorrect. I'm not sure where to put it though.
For actual reference..
http://www.gd-gaming.com/wordpress
http://www.gd-gaming.com/wordpress/breakout-canidates/
Code: <div id="background">
<img class="background" src="images/bgmain.jpg">
</div>
use absolute:
<div id="background"> <img class="background" src="/images/bgmain.jpg"> </div>
instead of relative one