FreewayTalk

14 replies to this thread. Most Recent

grantsymon

18 Nov 2015, 10:18 am

[Pro] How to have image in html item, not pushing other items down?

Can anyone help me with this?

I am building a page for my responsive site. I want to have 2 images (maybe 3 or 4) side-by-side, each with an html text item below (using the html block action as a link). I intend to repeat this layout moving down the page. It is very similar to the Floral template design. However, unlike the Floral design, I don’t want text to be included in the the 2nd inline item, I want it to be in a separate item. I also want to images to resize, so unlike the Floral design, I am not inserting them as graphic items, but importing (Cmd-E) into an html item.

(First question: Is this the best approach for the images?)

So my design is s follows:

Body Container1 ImageBox1 Image1 ImageText1 ImageBox2 Image2 ImageText2 Container2 ImageBox3 Image3 ImageText3 ImageBox4 Image4 ImageText4

etc. etc. etc.

The question I have … and I’ve had this before, a year ago when I first tried experimenting with this layout, is no matter what I do, as soon as I import an image into the Image1 (html item), the ImageText1 (html item) is pushed down and there is a gap between them. There appears to be some sort of hard return in there, because if I’m careful I can highlight it, but deleting it simply deletes the Image1 item above.

If I import the image as a graphic item, then the ImageText can sit happily and snuggly right up underneath it, but of course, then the image has to have specific dimensions and will not resize to fit different browser windows.

So, my real question:

How can I have a resizable image, with a text item below and no gap!? (Driving me nuts). :)

Grant

grantsymon

18 Nov 2015, 12:00 pm

Oops! Forgot that returns and extra spaces are removed when posting here.

Try again:

screenshot

Grant

Thomas Kimmich

18 Nov 2015, 3:09 pm

It’s pretty complicated to explain and to understand (perhaps):

In both cases, whether doing a graphic item or a HTML-item, you create exactly the same:

The

<img-Tag>

This img-Tag is wrapped in Freeway by a paragraph by default - so your text is. It’s as you would separate two paragraphs by hit the hard return.

The “gap” is the separator between two paragraphs and its amount can be caused by many things, such as line-height or even the so called user-agent-style-sheet (browsers’ default behavior).

Sometimes it helps to play with the alignment of the image. In other cases, it’s smarter to use the Remove Paragraph Action which is (I suppose) by Tim.

Without seeing an example live, I can’t judge, honestly (cause what happens in Freeway isn’t much of interest - the truth is in the browser.

Best Practices

Is an expression that doesn’t really exist in my world. For nearby everything - there is an alternative. Regarding images it’s pretty simple:

CMD-E in HTML Container:

No dimensions applied by default - setting this to fixed (%) will make it responsive.

CMD-E in a Graphic Item

Dimensions applied. The image is as is and won’t change. Fine as well if required.

So best practice is exactly this solution that you need. And sometimes, even applying an “image” as background is a handy solution - perhaps not the best, who knows?

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

grantsymon

5 Jan 2016, 8:01 pm

Thanks Thomas,

I got sidetracked somewhat, but this has helped. I set the type size to 1px and that is ok(ish). Seems like this should be something that should be addressed by Softpress though.

Grant

DeltaDave

5 Jan 2016, 8:28 pm

I set the type size to 1px and that is ok(ish).

But as Thomas suggested did you try using the Remove Paragraph Tags action

it’s smarter to use the Remove Paragraph Action

The default behaviour in Webkit browsers is

    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;

for a Paragraph Tag

David

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

grantsymon

5 Jan 2016, 9:27 pm

I did try the Remove Paragraphs action, but it resulted in the element from below jumping above the html graphic.

However … I found that by reducing the html graphic percentage from 100% wide, to 94% with a 5% margin to the left … leaving 1% unused and all of a sudden … the lower element jumped up flush with the graphic. Bloomin’ eck. No need to worry about the returns :)

The reason I stumbled on this, is because the graphic wasn’t resizing properly, so I left some space … didn’t even notice straight away that the elements were flush.

Grant

DeltaDave

5 Jan 2016, 10:16 pm

but it resulted in the element from below jumping above the html graphic.

Probably a floats and clears issue.

But as is said many times - without a live example we can only guess what is actually happening.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

Marcos Gonzalez

7 Apr 2020, 4:17 pm

Hi. How do I apply html code to a particular image? I know and have used the “insert - mark up item ” feature before many times. Would I create a mark up item, insert the code, and point it to the image? Or is there a way to insert the code directly to the image. Perhaps its not possible :) but if it is, could use your help. Many thanks! Marcos

waltd

7 Apr 2020, 4:38 pm

If you draw an image box on the page, you can select in the output tab how you want that image to be output. One of the options is URL, which lets you enter any sort of code you want. In my test here, I typed in <?php echo $foo; ?> in the URL field. In my published page, I got this code:

    <div id="item11"><img src="<?php echo $foo; ?>" alt="item11" style="float:left"></div>

That looks pretty useful as it is, if you know you can load your image file path into a variable, that’s a simple way to get code into an image. If you need something else, please explain exactly what you’re trying to accomplish.

Walter

On Apr 7, 2020, at 12:17 PM, Marcos Gonzalez <[email protected]> wrote:

Hi. How do I apply html code to a particular image? I know and have used the “insert - mark up item ” feature before many times. Would I create a mark up item, insert the code, and point it to the image? Or is there a way to insert the code directly to the image. Perhaps its not possible :) but if it is, could use your help. Many thanks! Marcos

Freeway user since 1997

http://www.walterdavisstudio.com

Marcos Gonzalez

8 Apr 2020, 1:32 pm

Thanks Walter! What I am trying to accomplish is applying a zoom effect on a map of the USA (said map is an .svg file, btw) I place the map into Freeway as a graphic (is this correct?). Next, I find the following code here (https://w3bits.com/css-image-hover-zoom/) so I can accomplish the point-zoom effect, examples here (https://w3bits.com/labs/css-image-hover-zoom/). What steps must I use to accomplish this (or is it even possible)? Thank you! Marcos

waltd

8 Apr 2020, 2:52 pm

You may have to create the SVG image by hand, using a Markup Item to code the entire thing. When Freeway encounters an SVG, it treats it the same way it treats a PDF or EPS image, and converts it to either a JPEG or GIF (depending on the number of colors in the underlying image).

So if you insert or draw a Markup Item on the page, and add the code:

<img src="path/to/your/svg.svg" id="my_svg">

Walter

On Apr 8, 2020, at 9:32 AM, Marcos Gonzalez <[email protected]> wrote:

Thanks Walter! What I am trying to accomplish is applying a zoom effect on a map of the USA (said map is an .svg file, btw) I place the map into Freeway as a graphic (is this correct?). Next, I find the following code here (https://w3bits.com/css-image-hover-zoom/) so I can accomplish the point-zoom effect, examples here (https://w3bits.com/labs/css-image-hover-zoom/). What steps must I use to accomplish this (or is it even possible)? Thank you! Marcos

Freeway user since 1997

http://www.walterdavisstudio.com

Marcos Gonzalez

8 Apr 2020, 3:31 pm

Thanks Walter! I’ve converted the .svg into a JPEG. Does doing this simplify things?

Ugh, sorry, but I’ll ask my ? again: I am trying to accomplish is applying a zoom effect on a map of the USA (said map is an .JPEG file,) I place the map into Freeway as a graphic (is this correct?). Next, I find the following code here (https://w3bits.com/css-image-hover-zoom/) so I can accomplish the point-zoom effect, examples here (https://w3bits.com/labs/css-image-hover-zoom/). What steps must I use to accomplish this (or is it even possible)?

Thank you! Marcos

waltd

8 Apr 2020, 3:56 pm

Aha. Okay. The format of the image doesn’t matter much to this code. I thought it was specific to SVG.

One aside: once you figure this out, you should try to add the SVG image back into the mix, because that will scale perfectly, never losing any sharpness, when it is resized.

Follow these steps to get this working (and then we can figure out how to make it fit your layout better later).

  1. Draw an HTML box on the page somewhere visible. Make it large enough to hold your image.
  2. While that box is selected (all the corner handles showing) choose Item / Extended from the main menu. The <div> button should be highlighted within the resulting dialog box.
  3. Click the New button, in the Name, enter ‘class’, in the value, enter ‘img-hover-zoom’. (Don’t enter any punctuation besides the hyphens in the classname. The single-quotes here are just to note what the exact value is you should enter.)
  4. Okay out of the dialog.
  5. Paste the following CSS into the Page / HTML Markup / Before /head interface:
<style>
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; 
}

.img-hover-zoom img {
  transition: transform .5s ease;
}

.img-hover-zoom:hover img {
  transform: scale(1.5);
}
</style>

Note where it recommends that you set a height — you may be able to just remove that line altogether. If it doesn’t work without it, try adding it back, and adjusting the value to whatever height you want your box to appear. Freeway is going to set the height of your box by default, and in an ID style, so it will likely override whatever you set here.

Now, double-click into the HTML box on the page, so you see a flashing cursor. From the main menu, choose Insert / Graphic Item. With that item selected (bottom-right handles showing) choose File / Import from the main menu to select your image. Resize as needed. Recommended is that you use a high-dpi image, and ensure that the High resolution checkbox is checked in the Output pane of the Inspector. This will give your zoom effect the best chance of appearing clear and sharp (short of using SVG).

Walter

On Apr 8, 2020, at 11:31 AM, Marcos Gonzalez <[email protected]> wrote:

Thanks Walter! I’ve converted the .svg into a JPEG. Does doing this simplify things?

Ugh, sorry, but I’ll ask my ? again: I am trying to accomplish is applying a zoom effect on a map of the USA (said map is an .JPEG file,) I place the map into Freeway as a graphic (is this correct?). Next, I find the following code here (https://w3bits.com/css-image-hover-zoom/) so I can accomplish the point-zoom effect, examples here (https://w3bits.com/labs/css-image-hover-zoom/). What steps must I use to accomplish this (or is it even possible)?

Thank you! Marcos

Freeway user since 1997

http://www.walterdavisstudio.com

Marcos Gonzalez

9 Apr 2020, 5:26 pm

I posted two replies to Walter D. but don’t see them. This is just a posting test, sorry!

Back to Top

Marcos Gonzalez

9 Apr 2020, 5:45 pm

Hey Walter, I now see after my test post that my 2 previous messages did not post and I have no idea why. So, firstly, let me thank you very much for your help and expert advise, the image-hover-zoom html guidance you provided worked perfectly. I posted a long message earlier today where I greedily asked for a little more help (I’ll stop it after this :) But I have discovered other code that will work better for my website (Image Magnifier Glass). It is many more lines of code and probably tricker and may not be possible. I tried on my own. I replaced the code for “image-hover-zoom” using all the steps you previously outlined with code for “Image Magnifier Glass” with no success. The page and image upload but there is no magnify action. What’s more, the cursor disappears when pass over the image. I’ll post my thanks and gratitude here and provide the link where to the page where the code is. Many thanks and best wishes! Marcos

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_magnifier_glass