It always show the smaller version of thumbnails
Permalink
Hello,
I have a image of size 700x100px in a content block.
Now the problem is that on the desktop also it is showing the thumbnail image but it modifies the height and width of the image to actual size of the image. So It is showing thumbnail of 320xauto with width 700x100 px which blurs out the image.
I checked the image source and doing few experiment found that if i remove vew_inline from image url it show the original image but doing that removes the thumbnails images completely which I would like to use it for mobile devices.
I have a image of size 700x100px in a content block.
Now the problem is that on the desktop also it is showing the thumbnail image but it modifies the height and width of the image to actual size of the image. So It is showing thumbnail of 320xauto with width 700x100 px which blurs out the image.
I checked the image source and doing few experiment found that if i remove vew_inline from image url it show the original image but doing that removes the thumbnails images completely which I would like to use it for mobile devices.
The url to the page would help...
https://exrx.net/Store/Other/TrainerClipArt, here it is
Your picture code is actually calling the 'small' thumbnail for media with a minimum width of 1200px
<source srcset="/application/files/thumbnails/small/1914/4965/4441/StrenconSampleRow.jpg" media="(min-width: 1200px)">
Can you guide me how to change that?
It needs to changed to from 'small' to 'file_manager_detail_2x'
<source srcset="/application/files/thumbnails/file_manager_detail_2x/1914/4965/4441/StrenconSampleRow.jpg" media="(min-width: 1200px)">
You need to change all three instances of the code for this page...
If it is in a content block, try looking at the html.
If you are struggling with it, post back here.
If you are struggling with it, post back here.
Do you mean the source code of the the content block,
If so than there no where mentioning of which thumbnails needs to be used.
The code is following
If so than there no where mentioning of which thumbnails needs to be used.
The code is following
<p data-redactor-inserted-image="true"><img alt="" height="776" id="image-marker" rel="float: right; width: 500px; height: auto; margin: 0px 0px 10px 10px;" src="https://exrx.net/download_file/view_inline/5189" style="float: right; width: 500px; height: auto; margin: 0px 0px 10px 10px;" width="647" /></p>
Are you using a Redactor wysiwyg editor?
I believe 8.5.1 uses the CKEditor wysiwyg editor.
If so, this could be a problem with the Redactor Plugin.
I believe 8.5.1 uses the CKEditor wysiwyg editor.
If so, this could be a problem with the Redactor Plugin.
Can you please guide me how to look for which editor it is and how to change it
I am not sure, you may not be using the Redactor wysiwyg editor but I will do some searching...
Meanwhile can you take a screen shot of the content block in edit mode and attach it here?
Meanwhile can you take a screen shot of the content block in edit mode and attach it here?
Here it is
Are you using a custom template?
Left click the block, don't click 'Edit Block' instead click on 'Design & Custom Template' and click the little gear wheel...
Left click the block, don't click 'Edit Block' instead click on 'Design & Custom Template' and click the little gear wheel...
Here is the screenshot
No help, I am at a loss to suggest anything more...
I advise you to check the image source and his px if there pc are small and not in jpg and in png so this is offcoursely thumbnail beacause the images are always depend on jpg and png.
The source file is jpg and is with proper resolution px but somehow instead of showing original image it is showing the small thumbnail in size of original widht
<picture><!--[if IE 9]><video style='display: none;'><![endif]--><source srcset="/application/files/thumbnails/small/1914/4965/4441/StrenconSampleRow.jpg" media="(min-width: 1200px)"><source srcset="/application/files/thumbnails/thumb_640/1914/4965/4441/StrenconSampleRow.jpg" media="(min-width: 992px)"><source srcset="/application/files/thumbnails/thumb_480/1914/4965/4441/StrenconSampleRow.jpg" media="(min-width: 600px)"><source srcset="/application/files/thumbnails/thumb_320/1914/4965/4441/StrenconSampleRow.jpg" media="(min-width: 320px)"><!--[if IE 9]></video><![endif]--><img src="/application/files/1914/4965/4441/StrenconSampleRow.jpg" alt="" class="redactor-selected-image" id="image-marker" rel="display: block; margin: auto; width: 702px; height: auto;" style="display: block; margin: auto;" width="702"></picture>
