Problem resizing embedded image, Web Designer 365

**JFry** · 16 February 2017, 04:01 PM

I am putting together a website for my village History Society and want to use some Francis Frith photographs. They allow this as long as the images are embedded. When I paste in the HTML code, the image appears larger than I want it. I have tried using the handles to make the image smaller and also I have tried the % resize buttons. In both cases I end up with a resized portion of the image, not the entire resized image. Would appreciate any help you can give me.

**gwpriester** · 16 February 2017, 05:48 PM

Welcome to TalkGraphics

How exactly are you embedding the images in the HTML?

**Acorn** · 16 February 2017, 08:43 PM

Let's assume you are using a Placeholder of the same ration as the image.
The body code of the Placeholder would be <img src="image.jpg">

To make it scale to the Placeholder size, change this to <img src="image.jpg" width="pHWidth" height="pHHeight">, where pHWidth and pHHeight are the pixel sizes of the Placeholder.

You can also try: <img src="image.jpg" width=100% height=100%>

Acorn

**JFry** · 17 February 2017, 01:50 PM

Thank you both for responding. I should have mentioned that I only downloaded Xara 365 yesterday so I am probably trying to run before I can walk.

As I mentioned, I am trying to embed (because that's a condition of use) photographs from the Francis Frith website:
https://www.francisfrith.com/uk/wonersh/photos

I click on a photo and the embed <> sign which gives me three options - S,M,L. I have tried all three. Each of the options brings up HTML code to copy and paste into my website. This is the code for Medium:


<script async id="embed-42228f0a4fed7e88bb5a6771ae51ea5a526b7b97" src="https://www.francisfrith.com/wonersh/wonersh-the-village-c1955_w127002?embed=true&signature=42228f0a4fed7e8 8bb5a6771ae51ea5a526b7b97">
</script>

I thought just pasting into blank space created a placeholder but obviously not. I have tried all of the different paste options. Sometimes, but not often, the photo pastes in as quite small. More often it pastes as very large. Regardless, I am unable to resize the entire photo - it just seems to crop it.

I have looked in the manual and have tried Googling but I'm no further forward.

**Acorn** · 17 February 2017, 03:07 PM

Originally Posted by JFry

Thank you both for responding. I should have mentioned that I only downloaded Xara 365 yesterday so I am probably trying to run before I can walk.

As I mentioned, I am trying to embed (because that's a condition of use) photographs from the Francis Frith website:
https://www.francisfrith.com/uk/wonersh/photos

I click on a photo and the embed <> sign which gives me three options - S,M,L. I have tried all three. Each of the options brings up HTML code to copy and paste into my website. This is the code for Medium:


<script async id="embed-42228f0a4fed7e88bb5a6771ae51ea5a526b7b97" src="https://www.francisfrith.com/wonersh/wonersh-the-village-c1955_w127002?embed=true&signature=42228f0a4fed7e8 8bb5a6771ae51ea5a526b7b97">
</script>

I thought just pasting into blank space created a placeholder but obviously not. I have tried all of the different paste options. Sometimes, but not often, the photo pastes in as quite small. More often it pastes as very large. Regardless, I am unable to resize the entire photo - it just seems to crop it.

I have looked in the manual and have tried Googling but I'm no further forward.

Frith is less than helpful. You need to delete the comments . You then copy everything from <script> to </script>

For Medium, you need to create a rectangle 250px high. At this point, you don't know the width.
Open Web Properties > Placeholder > HTML code (body) and paste in:

and click the OK button and the Placeholder Apply / OK button.

Preview the result.

I find Frith overpowering in the control of copyright over the image and the pop-ups and the bar across.
I have changed all these with CSS to keep them but fit what I want.

Acorn

**Egg Bramhill** · 18 February 2017, 05:14 AM

I tried your suggestion Acorn and no image was loaded?

**JFry** · 18 February 2017, 08:00 AM

As I was unsure what you meant, I tried this two ways: I pasted into a rectangle the HTML code from the Frith site, deleted  and in its place pasted the code you gave which left the rest of the code intact. I also tried inserting just the code you gave instead of Frith. Neither option worked for me. The image showed on preview but I still can't resize it. Sorry if I missed the point.

**Acorn** · 18 February 2017, 10:33 AM

Originally Posted by JFry

As I was unsure what you meant, I tried this two ways: I pasted into a rectangle the HTML code from the Frith site, deleted  and in its place pasted the code you gave which left the rest of the code intact. I also tried inserting just the code you gave instead of Frith. Neither option worked for me. The image showed on preview but I still can't resize it. Sorry if I missed the point.

Frith's site is quite emphatic that you cannot resize; you can only display S, M or L.

Acorn

**JFry** · 18 February 2017, 11:40 AM

Originally Posted by Acorn

Frith's site is quite emphatic that you cannot resize; you can only display S, M or L.

Acorn

The problem seems to be that regardless of whether I choose S, M or L the image comes across as 200 x 120 even though, as you suggested, I am pasting into a placeholder 250 high.