Images work on normal page but the amp-version the images doesn't show.
here is a HTML code of a picture, I use WordPress and upload via media library and insert:
<img class="aligncenter wp-image-312" src="http://mysiteexample.com/wp-content/uploads/2016/11/review-1024x768.jpg" alt="Stanley Review" width="256" height="192" />
"
Is there a script I need to insert or something for it to work on amp?
Thanks for your time, I appreciate it.
Use amp-img instead of img for the amp version of your site.
<a href="#">
<amp-img src="http://mysiteexample.com/wp-content/uploads/2016/11/review-1024x768.jpg" width="256" height="192" layout="responsive" alt="Stanley Review"></amp-img>
</a>
Related
I have a site at https://arvikamagasinet.com
At the top, there is a header image/banner, which links to the original homepage. I would like to change the link so that the header image links to a specific URL.
I need to use CSS to edit this. There is no built-in function in WordPress to change the URL-link of the header image.
Thanks in advance,
Sakeus
the matter is very easy, you should go to your Wordpress theme folder in wp-content then you will find the header.php which display the header or you can search for it in index.php and you find the image and you will find that code :
<a href="https://arvikamagasinet.com/" title="Arvikamagasinet" rel="home" class="header-image">
<img src="https://arvikamagasinet.files.wordpress.com/2020/09/untitled-6-2.png" width="1250" height="400" alt="">
</a>
you will change a href to your ned link :
<a href="link here" title="Arvikamagasinet" rel="home" class="header-image">
<img src="https://arvikamagasinet.files.wordpress.com/2020/09/untitled-6-2.png" width="1250" height="400" alt="">
</a>
I was wondering if it is possible to stop WordPress from creating multiple copies of imagens, but still keeping, let's say, "medium" size.
I already edited my functions.php and the media options, leaving it all to "0", and it's fine. But, when I add an image do my post, the code reads as follow:
<img src="http://example.com/wp-content/uploads/2019/08/image.jpg" alt="" width="2008" height="1004" class="aligncenter size-full wp-image-XXXX" /></a>
I am using Jetpack and, for design reasons, I need the code to add the size to the image and change the "size-xxxx" class. For example:
<img src="http://example.com/wp-content/uploads/2019/08/image-1280x600.jpg" alt="" width="1280" class="aligncenter size-large wp-image-XXXX" /></a>
I can do this all manually, yes. But is there a way that I don't need to type this things everytime? Thank you!
I am trying to use some images with ASP.NET MVC. I've created a folder to store them and then I've pulled them from the solution explorer to code.
View code :
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">
<img src="~/Images/Logo.png" width="125" height="74" class="img-responsive" />
<img src="~/Images/Logo.png" />
</a>
Code of the page when inspected on Google Chrome :
<img src="/Images/Logo.png" width="125" height="74" class="img-responsive">
When I run the application they appeared broken on the browser. I have checked the path, properties, and everything is correct, but I can't fix this.
you could trying using #Raw
<dd>
<img src="~/Images/#Html.Raw(Model.PhotoUrl)" alt="Image" style="width: 500px; height: 300px;"/>
</dd>
Just found the problem. I create a folder name "Images" in solution explorer to store all my images, but that was conflit with the forder "images" in the "CSS" folder. I move my image to the "image" folder in "CSS" folder and everything works perfect.
I have to image with the following code:
echo '<div class="thumb" style="width: '.$array['thumb_width'].'px; height: '.$array['thumb_height'].'px;">
<a class="lightbox" width="72" height="72" href="showfile.php?image_id='.$array['before_image_id'].'" >
<img src="showthumbs.php?image_id='.$array['before_image_id'].'"/">
</a>
<a class="lightbox" width="72" height="72" href="showfile.php?image_id='.$array['after_image_id'].'" >
<img src="showthumbs.php?image_id='.$array['after_image_id'].'"/">
</a>
</div><p><p/>';
The issue is that it is displayed separately in the lightbox. I want it to show two image side by side in one lightbox.. How do I do this?
There are 2 options, depending on the lightbox you're using:
Some lightboxes (colorbox, DOM window, facybox, thickbox) support loading html pages into an iframe rather than just images. If you can try loading html with the two tags into the lightbox.
If you have a lightbox that only supports images (like squarespace's crappy lightbox) you may have to merge the images together using PHP's GD library.
See this question:
Merge Two images together on Server, then save
If I unput a certain piece html into my page, it seems to be truncating:
<div id="slideshow">
<img style="cursor: pointer;" src="files:img/slideshow/3.png" id="left_slide" alt=""/>
<img style="cursor: pointer;" src="files:img/slideshow/1.png" id="center_slide" alt=""/>
<img style="cursor: pointer;" src="files:img/slideshow/2.png" id="right_slide" alt=""/>
</div>
It all looks good in the preview, but when I save it it becomes:
<div id="slideshow">
<img style="cursor: pointer;" src="http://local.drupal.com/sites/default/files/img/slideshow/3.png" id="left_slide" alt="" />
</div>
I'm at a loss! I'm not using any nasty WYSIWYG editors and the input format is full html. The second code example indicates that I'm using the path filter module but I've also tried disabling that and resaving. It still truncates.
I'm using Drupal 6.19.
You certainly print the teaser only.
To publish to the front page the complete node Go to Administer > Content Management > Post Settings > Choose 'unlimited' from the 'length of trimmed post' select box.
You can also manually controlling the teaser break point by inserting:
<!--break-->
If you use a views you can control if you want to show the complete node or the teaser in the settings of the view.