Amazon has a facility that generates HTML snippets for you to show images of products from their store.
However when running locally the image is not displayed, when run on jsbin it is.
The local code is:
<img border="0" src="//ws-eu.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=0789722569&Format=_SL160_&ID=AsinImage&MarketPlace=GB&ServiceVersion=20070822&WS=1&tag=valuehistor0e-21"><img src="https://ir-uk.amazon-adsystem.com/e/ir?t=valuehistor0e-21&l=li2&o=2&a=0789722569"
width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
The JSBIN example is here.
You don't state how you run the page: locally from file or via a local server.
In the former case all links with "//*" will adopt the protocol (e.g. "file://") which won't be a valid link.
You can hard-code the protocol instead:
<a href="https://www.amazon.co.uk/Complete-Idiots-Guide-Creating-Page/dp/0789722569/ref=as_li_ss_il?ie=UTF8&qid=1506425682&sr=8-10&keywords=web+development+for+idiots&linkCode=li2&tag=valuehistor0e-21&linkId=fc910756748618e2854e81a581107b24" target="_blank">
<!-- The img src below -->
<img border="0" src="https://ws-eu.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=0789722569&Format=_SL160_&ID=AsinImage&MarketPlace=GB&ServiceVersion=20070822&WS=1&tag=valuehistor0e-21"></a>
<img src="https://ir-uk.amazon-adsystem.com/e/ir?t=valuehistor0e-21&l=li2&o=2&a=0789722569" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
Proper set img src tag in image url.
For example:
<img border="0" src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" width="1000" height="300">
Related
I'm struggling with the html in this email (for a booking management tool called [https://www.checkfront.com/][1]).
This code works fine sent from gmail to gmail, Office to gmail, pagebuilder to gmail, etc. When sent from Checkfront's HTML editor as a booking notification to gmail, my "justify-content" styling is stripped away.
<tr id="5imagesSection" class="ordenTable" style="display: flex; justify-content: center !important;">
<td id="smileyImage1"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle1300.png" height="100" width="100" alt="My Marbella Weekender" data-image="dhvrprieupdm"></td>
<td id="smileyImage2" style="margin-top:10%;"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle2300.png" height="100" width="100" alt="My Marbella Weekender" data-image="un1eob2gwjf1"></td>
<td id="smileyImage3" style="margin-top:20%"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle3300.png" height="100" width="100" alt="My Marbella Weekender" data-image="veaowxr4ebv6"></td>
<td id="smileyImage4" style="margin-top:10%;"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle4300.png" height="100" width="100" alt="My Marbella Weekender" data-image="oxyhrbhzvjhi"></td>
<td id="smileyImage5"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle5300.png" height="100" width="100" alt="My Marbella Weekender" data-image="uy3cf06q540k"></td></tr>
Image of HTML not being justified to center and justify-content:center being 'removed'
Here is the code for the whole email:
https://codepen.io/Grabgooglesgoogles/pen/OJOGjYz
I would love feedback in case there is an aspect of the code which doesn't follow best practices and in case these other clients are all making allowances for my lack of knowledge 😊
Can I provide more information? Let me know!
Jack
Edit: I've also now tried changing the table row and table data to divs, but this hasn't helped either.
You need to force each <td> to width: 20%, otherwise it is only as wide as its contents.
have you tried with margin: auto in your tr container?
I'm wondering if anyone can help me. I am working on a website and one of the pages has a weird overflow to the right of the page. I honestly cannot work out what is causing it after inspecting all of the elements. Would anyone mind taking a look to see if you can see what's causing this as I am stuck. Very grateful for any help! The url is: https://diabetesand.me/recipes/quick-and-easy-tacos
You problem:
<img src="//ir-uk.amazon-adsystem.com/e/ir?t=diabetesandme-21&l=ur2&o=2" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important; position: absolute!important;">
The quick solution is:
<img src="//ir-uk.amazon-adsystem.com/e/ir?t=diabetesandme-21&l=ur2&o=2" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important; position: absolute!important; width: 1px;">
I just want to decrease the size of space between this two images I put in the table. I'm so sorry I know this is just a basic html code. Please help me.
This is the code:
<table class="sample" width="200" border="0" cellpadding="1" cellspacing="1" >
<tr>
<td align="center" valign="center">
<a href="#" ><img src="images/reception2.png" alt="" /></a>
</br>
SERVICES
</td>
<td align="center" valign="center">
<img src="images/services2.png" alt="" />
</br>
OFFERS
</td>
</tr>
</table>
It's hard to advise without seeing the CSS you are using. You could try adjusting the width of the table.
Demo here: http://codepen.io/sol_b/pen/VmQGzr
You can remove the inline style on your table and then target it in your CSS, like this:
.sample {
width: 200px;
}
Change the width to whatever works.
you can use margin property of CSS. for your question margin-right for the SERVICES img and margin-left for the OFFERS img are proper solutions.
Try to add this snippet:
<img src="images/reception2.png" alt="" style="margin-right: -25px"/>
<img src="images/services2.png" alt="" style="margin-left: -25px"/>
Also, You can change the number range to finally find the suitable numbers.
I am not a html programmer but I have to fix an urgent problem. Since this is a private project, I can't post the code here. But here is the obfuscated page source (Note: a href tag is created by Spring Security tag)
<td width="359">
<table style="margin-left:auto; margin-right:8px">
<tbody><tr>
<td>
<img src="/img/Login.gif" alt="Login" height="18" border="0" width="120">
<br>
<br>
<img src="/img/newAct.gif" alt="new account" height="18" border="0" width="120">
</td>
</tr>
</tbody></table>
</td>
Above html code creates a 1 pixel shadow right under the second image. Please see attached picture and red arrow pointing to 1 pixel line.
Thank you for your help in advance!
<img src="..." style="margin-top:0px;">
Okay im creating a mobile site and I have a page of images and when someone clicks on a image I want it to go to that same image on a different page so im marking the images with <a name="picname"> and then linking them like this:
<img src="filepath/picname.jpg" border="1">
But when I click on a image in a mobile browser it will skip to like right under the image (so you cant see it till you scroll up) what am I doing wrong?
Snippet on page_1.html
<img src="gallery/1.jpg" width="95%" border="1">
<br><br>
<img src="gallery/2.jpg" width="95%" border="1">
<br><br>
<img src="gallery/3.jpg" width="95%" border="1">
<br><br>
<img src="gallery/4.jpg" width="95%" border="1">
<br><br>
<img src="gallery/5.jpg" width="95%" border="1">
<br><br>
<img src="gallery/6.jpg" width="95%" border="1">
Snippet on gallery.html
<a name="1"></a><img width="95%" border="2" alt="" src="gallery/1.jpg"><br>
<a name="2"></a><img width="95%" border="2" alt="" src="gallery/2.jpg"><br>
<a name="3"></a><img width="95%" border="2" alt="" src="gallery/3.jpg"><br>
<a name="4"></a><img width="95%" border="2" alt="" src="gallery/4.jpg"><br>
<a name="5"></a><img width="95%" border="2" alt="" src="gallery/5.jpg"><br>
<a name="6"></a><img width="95%" border="2" alt="" src="gallery/6.jpg"><br>
Any ideas would be great!
Did you try put the anchor close tag before the image?
<!-- -->
<img src="file.jpg" />
Typically you create an individual anchor tag preceding the content you wish to "scroll" to and create a link in another location (either above/below in the same page or on another page).
It sounds like you want a new window to pop up and scroll down to the image? If that's the case, you're going to want to do something like this:
(For this example, we'll pretend that the page name is 'gallery.html')
Click here for this image
And lower on the page (or where ever it may be):
<a name="picid"></a>
<img src="image.png" border="0" />
This will work. I have tested it. If you don't actually want it to open in a new window, just remove the 'target="_blank" ' from the initial hyperlink anchor tag. The problem is that once you add an href, it becomes a hyperlink instead of a standard anchor.
If you wish to have the image clickable and have the page open in a new window (and automatically scroll to the image's location) when you click on the image, the proper setup would be:
<a name="picid"></a>
<img src="image.png" border="0" />