Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

File Preview Solution for muse ( How do I add in width and height Restrictions?)

New Here ,
Sep 21, 2015 Sep 21, 2015

Right so i have this HTML code that I can embed into Muse which is -

<input type="file" accept="image/*" onchange="loadFile(event)">

<img id="output" />

<script>

    var loadFile = function(event) {

        var reader = new FileReader();

        reader.onload = function() {

            var output = document.getElementById('output');

            output.src = reader.result;

        };

        reader.readAsDataURL(event.target.files[0]);

    };

</script>

This code allows me to preview files but how do I add what width and height I want the file to be previewed at? Please help, many thanks!

568
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 22, 2015 Sep 22, 2015

I imagine you could use CSS to define the height & width of your #output selector.

CSS:

     #output {

     /**adjust numeric values in px as desired**/

          height: xxxpx;

          width: xxxpx;

     }

HTML:

     <img id="output" />

         result comes out here...

     </div>

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 28, 2015 Sep 28, 2015

Im adding this code into Adobe Muse which allows you to insert HTML but not CSS, is there any other way about this?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 29, 2015 Sep 29, 2015
LATEST

You add the CSS in the page properties in the Meta data section for <head> code.

You would add:

     <style>

     #output {

     /**adjust numeric values in px as desired**/

          height: xxxpx;

          width: xxxpx;

     }

     </style>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 28, 2015 Sep 28, 2015

Its okay I've found the solution, thank you for your help

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines