Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Gert Kjerslev 16 posts 67 karma points
    Apr 27, 2015 @ 10:23
    Gert Kjerslev
    0

    Dynamic re-size logo image

    Using Umbraco 7

    Hi, I’m new to umbraco so I’ve started out with the Fanø starter-kit. I can see that the image on the pages are resizing perfect but not the logo image, can some one tell me how to make the logo re-size from a max to a minimum fixed size? Thanks

    Copy Link
  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Apr 27, 2015 @ 10:44
    Dennis Aaen
    100

    Hi Gert and welcome to our :-),

    You can do it by find this line in the master template under settings --> Templates --> Master and add max-with: 100%;

    <div class="brand" style="background-image:url('@(home.SiteLogo)?height=65&width=205&bgcolor=000')"></div>

    So the full line looks like this:

    <div class="brand" style="background-image:url('@(home.SiteLogo)?height=65&width=205&bgcolor=000'); max-width: 100%;"></div>

    You can also do it in the stylesheet find the rule for the brand class.

    Hope this helps,

    /Dennis

    Copy Link
  • Gert Kjerslev 16 posts 67 karma points
    Apr 27, 2015 @ 11:57
    Gert Kjerslev
    0

    Thank! works like a charm...guess I need a brush up on my HTML/CSS as well :-)

    /Gert

    Copy Link
  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Apr 27, 2015 @ 12:12
    Jan Skovgaard
    0

    Hi guys

    I just want to encourage you to add the max-width declaration in an external stylesheet rather than doing it inline. Just to keep things clean. Since the logo is pulled from Umbraco then it of course needs to be inlined.

    But put this in an external css file :) - I think that the fanoe.css is located in the /css/ folder if I remember correctly.

    .brand{
  max-width:100%;
}

    /Jan

    Copy Link
  • Gert Kjerslev 16 posts 67 karma points
    Apr 27, 2015 @ 12:30
    Gert Kjerslev
    0

     

    I agrre with you Jan. Keep it clean J But why are the height, width and background color in-line in the master template? I can see that the height and width are in the css as well…

    Copy Link
  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Apr 27, 2015 @ 12:33
    Jan Skovgaard
    0

    Hi Gert

    It's not set using CSS properties - It's parameters for the image handler that scales the selected image.

    /Jan

    Copy Link
  • Gert Kjerslev 16 posts 67 karma points
    Apr 27, 2015 @ 12:37
    Gert Kjerslev
    0

    okay.. I see

    Copy Link
  • James Jackson-South 489 posts 1747 karma points c-trib
    Apr 27, 2015 @ 13:42
    James Jackson-South
    0

    I'd recommend actually using a combination of both css and ImageProcessor for this.

    1. Use Imageprocessor to set a maximum possible width/height in-line, that way you ensure that the file size is kept low - A 4MB image is still 4MB if you are only scaling via CSS.
    2. Use CSS max-width in your external style-sheet to determine the width for whatever breakpoints you have determined.
    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft