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?)
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).
freewaytalk mailing list
email@hidden
Update your subscriptions at:
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
freewaytalk mailing list
email@hidden
Update your subscriptions at:
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.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
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.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
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
freewaytalk mailing list
email@hidden
Update your subscriptions at:
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:
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@hidden 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
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 (SMOOTH Image Zoom on Hover Effects with CSS) so I can accomplish the point-zoom effect, examples here (10 Slick n' Simple CSS-only Image Hover-Zoom Effects). What steps must I use to accomplish this (or is it even possible)? Thank you! Marcos
freewaytalk mailing list
email@hidden
Update your subscriptions at:
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@hidden 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 (SMOOTH Image Zoom on Hover Effects with CSS) so I can accomplish the point-zoom effect, examples here (10 Slick n' Simple CSS-only Image Hover-Zoom Effects). What steps must I use to accomplish this (or is it even possible)? Thank you! Marcos
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 (SMOOTH Image Zoom on Hover Effects with CSS) so I can accomplish the point-zoom effect, examples here (10 Slick n' Simple CSS-only Image Hover-Zoom Effects). What steps must I use to accomplish this (or is it even possible)?
Thank you! Marcos
freewaytalk mailing list
email@hidden
Update your subscriptions at:
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).
Draw an HTML box on the page somewhere visible. Make it large enough to hold your image.
While that box is selected (all the corner handles showing) choose Item / Extended from the main menu. The
button should be highlighted within the resulting dialog box.
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.)
Okay out of the dialog.
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@hidden 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 (SMOOTH Image Zoom on Hover Effects with CSS) so I can accomplish the point-zoom effect, examples here (10 Slick n' Simple CSS-only Image Hover-Zoom Effects). What steps must I use to accomplish this (or is it even possible)?
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
freewaytalk mailing list
email@hidden
Update your subscriptions at:
