Hello all,
I'm using the thumbnail functionality (with pop-up) to avoid that the images take to much space on my HTML output pages. This is done from within the stylesheet (style img.large)
What happens now is that if I look at the image in output (or preview mode) it is blurry. When I click on it, the pop up appears and is perfectly sharp. See samples attached.
Stylesheet entry looks like this:
img.Large
{
mc-thumbnail: popup;
title: Click to enlarge;
vertical-align: baseline;
mc-float: none;
mc-thumbnail-max-width: auto;
mc-thumbnail-max-height: 48px;
border-left-style: none;
border-right-style: none;
border-top-style: none;
border-bottom-style: none;
xml of the sample image in output:
<p><a class="MCPopupThumbnailLink MCPopupThumbnailPopup" href="../../../Images/SUM_Users_ShortcutMenu350.png"><img class="MCPopupThumbnail img imgLarge" data-mc-width="460" data-mc-height="282" src="../../../Images/SUM_Users_ShortcutMenu350_thumb_0_48.png" style="width: 306.6667px;height: 187.9994px;" tabindex="" /></a>
After playing around with the settings I found out that in the local image properties there is a width and height defined. It looks like these data came in with the original image and create kind of an override of the stylesheet settings. If I change those values to default, the picture appears nice and sharp and the pop up keeps working as expected as well.
Of course I don't like to go and change manually the dimensions of all those images, and probably this is not a best practice in such a case either. Does anyone have a better solution or can you point out what I'm doing wrong?
thank you
regards
Dave
Thumbnail vs original image
Thumbnail vs original image
You do not have the required permissions to view the files attached to this post.
Re: Thumbnail vs original image
This is a general issue with thumbnails. My procedure for creating thumbnails has always been to right-click the image and Reset Size, then apply the thumbnail style.
It's also an issue to consider any time you import content. Image sizes set in the original document may not be appropriate in the Flare output.
It's also an issue to consider any time you import content. Image sizes set in the original document may not be appropriate in the Flare output.
-
- Jr. Propeller Head
- Posts: 5
- Joined: Thu Jul 13, 2017 12:05 am
Re: Thumbnail vs original image
I get this kind of thing also when I import from Word, so I do a find and replace, post-import.
In your case, if all your images are png then you could do the following:
Find:
png" style="width: .+px;height: .+px;"
Replace with:
png"
Make sure and select Find in Source Code, using search type Regular Expressions. Oh, and remember to back up your project before doing a find and replace across all topics! Or do them one-by-one.
In your case, if all your images are png then you could do the following:
Find:
png" style="width: .+px;height: .+px;"
Replace with:
png"
Make sure and select Find in Source Code, using search type Regular Expressions. Oh, and remember to back up your project before doing a find and replace across all topics! Or do them one-by-one.
-
- Propellus Maximus
- Posts: 608
- Joined: Wed Feb 01, 2006 6:21 am
- Location: Off in the dark....
Re: Thumbnail vs original image
Are you using the "Advanced > Generate resized copies of scaled images" setting in your project? If not, the browser is scaling the thumbnail image as it renders the page. if you can afford the drive space it might help. I have 450px set for my max thumbnail dimensions and get decent looking thumbnails.
Trent.
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Re: Thumbnail vs original image
@Stuart: new images that I am adding are *.png but unfortunately there is quite a lot of "heritage" in all sorts of image formats. It is however a good suggestion that I will try out.
@Trent: I don't have that option ticked but will give it a go and look at the result.
The "resize" option does indeed help as well.
thanks for your suggestions!
@Trent: I don't have that option ticked but will give it a go and look at the result.
The "resize" option does indeed help as well.
thanks for your suggestions!
Re: Thumbnail vs original image
I've done this through the Flare GUI, but checked the code (inserted by Flare) and moved it to my stylesheet -- I hadn't thought to do that before.
This is what I have for my images:
img.centered
{
display: block;
margin-left: auto;
margin-right: auto;
mc-thumbnail: popup;
max-width: 550px;
mc-thumbnail-max-height: auto;
mc-thumbnail-max-width: 150px;
}
My XML:
<img src="Images/filename.png" class="centered" title="Click to view" />
I don't make them hyperlinks, as you did. I have a combination of jpg, bmp, and png images, and it looks fine on all of them.
This is what I have for my images:
img.centered
{
display: block;
margin-left: auto;
margin-right: auto;
mc-thumbnail: popup;
max-width: 550px;
mc-thumbnail-max-height: auto;
mc-thumbnail-max-width: 150px;
}
My XML:
<img src="Images/filename.png" class="centered" title="Click to view" />
I don't make them hyperlinks, as you did. I have a combination of jpg, bmp, and png images, and it looks fine on all of them.
-
- Propellus Maximus
- Posts: 608
- Joined: Wed Feb 01, 2006 6:21 am
- Location: Off in the dark....
Re: Thumbnail vs original image
@Dave1975 - That option generates a thumbnail that is included in the output. That avoids issues with browsers not rendering a decent image using the width/height tags.
@slpha66
@slpha66
That's what I started with, too. I replace mine when the opportunity arises. It never will for some, but that's how it goes.I have a combination of jpg, bmp, and png images, and it looks fine on all of them.
Trent.
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!