Replacing "Home Project Details" photos in the PIONEER template

Discussion in 'Templates' started by Dr_E, Apr 1, 2016.

  1. Dr_E

    Dr_E Member

    19
    0
    Love the template. Great job.
    But I'm having problems replacing the images "home-thumb1(2)-big.jpg" on the Home Project Details page.
    I understand why the images are not included in the assets.
    When I replace these with my own images, they never look quite right when I preview in the browser.
    They look magnified.
    What size / resolution should this image ideally be?
    Sorry if this is a noob question, but it's my first template and I've really tried everything to determine the correct size.
    Thanks in advance for any help.
    Pete
     
  2. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,458
    255
    Dr, I'm sorry for the confusion, it's probably me cause it's late, but could you show me a screen shot of the images you are trying to change. I am missing something.
    Dj
     
  3. Dr_E

    Dr_E Member

    19
    0
    Hi DjHerold
    Thanks for the amazingly rapid response.
    Below is a screenshot of the original image and how it looks in the browser.
    I have tried re-sizing, rotating, etc. but just can't seem to get it right.
    I really hope you can help as this is a major sticking point.
    Also, how might I deal with this issue in future? I even tried using firebug / developer tools to look at the code of the webpage in the browser to see if that gave any clues regarding the img, but that didn't help either.
    screenshot_orig_image.png
    screenshot_webpage.png
     
  4. Dr_E

    Dr_E Member

    19
    0
    Another example.
    I've tried using the dimensions of the frame in Muse, the dimensions of the image in a an image capture from the browser, and random guesses to try and work it out. All the options in the widget are left as they were in the template, e.g., 'Fill Frame Proportionally'

    orig_2.png webpage_2.png
     
  5. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,458
    255
    DR. sorry, but the screen shots I am looking for, are the original ones in the template you want to change
    Dj
     
  6. Dr_E

    Dr_E Member

    19
    0
    Oops. No worries. I've attached a screenshot showing the layers too. I want to change both the images in the slideshow: home-thumb1-big.jpg and home-thumb2-big.jpg. home-thumb1-big.png
     
  7. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,458
    255
    Dr, again, sorry for the questions. I was looking at the Pioneer Dark, which has a different set of images.
    Ok, now to your question. Changing images can be done a bunch of ways, one can be adding them through the image add area in the slide show fly out. Another is to select them in the layers panel, then right click on the image and choose 'replace image'.
    The third and most informational, is to choose the image in the assets panel. This way when you mouse over the selected image, you get the image information including the original size. Now this tells me, that even though on the page the dimensions seem to be about 550x650, that this is an HiDPI site (which can be verified by going to file>site properties and seeing it has HiDPI selected).
    That means that your images should be at least twice the dimensions of the space they fill. Probably why your images seem a bit wonky.
    So, once I'm at the assets panel, I select the image, right click and choose 'relink'. Now although those images are not included and you can't relink them, it does give you a way to choose a file on your computer.
    I hope this helps, and if you need anything more, just holler.
    Dj
     
  8. Dr_E

    Dr_E Member

    19
    0
    Not at all, it was my fault - I assumed the images were the same in the light and dark versions of the template. You gave some useful tips there, but I am still having this problem. When I go to the original Pioneer-Light template and mouse over "home-thumb1-big.jpg" in the Assets panel, I see the following information: Original asset size / resampled asset size / Page item size are all equal to 2000 x 1500. So I first tried making my replacement image 2000 x 1500, then right clicking on home-thumb1-big.jpg in the Assets panel and choosing 'relink' . Same problem - it looks magnified in the browser. So I tried 2x - 4000 x 3000. Same problem. Then I looked at the dimensions of the image as it appears on the 'Home Project Details' page in Muse, and yes, it looks about 650 x 550. So I tried that, and then tried 2x that, and still exactly the same issue. I have tried all of this with several different replacement images. When using mouse over in my replacement image in the Assets panel, at no point did the Status read as HiDPI (2x). I am at a complete loss.
     
  9. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,458
    255
    DR, sorry I don't have a cut and dry answer if those didn't work. The only other thing I could have you check is to see if in your site properties, somehow the HiDPI got unchecked.
    Dj
     
  10. Dr_E

    Dr_E Member

    19
    0
    Thanks for trying, I guess I might have to abandon this project.
    It's still HiDPI in site properties.
    One last thing - have you tried replacing one of these images in the Pioneer template? If it worked, what dimensions did you use, and when you mouse over your replacement image, what did it say for: original asset size / resampled asset size / Page item size / Status?
     
  11. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,458
    255
    DR. , remember, you're slide show is set to 'fullscreen' , and the captions next to it are not part of the slide show. If you were to move those captions, the image would hae more to show, and if you set the slide show to something other than full screen, you can adjust the width and height.
    Dj
     
  12. Dr_E

    Dr_E Member

    19
    0
    Hi Dj ... all I have been doing in order to try and figure out what is going on, is opening up a fresh untouched copy of the Pioneer-Light template and immediately trying to replace one of those images. Nothing works. I'm completely baffled. I appreciate your efforts, but I guess this is a total bust, which is a shame because it's my first experience with a Muse Themes template and I have put a lot of work into the other pages. I'll keep trying a little longer and if I stumble upon an answer I'll post it up. I would still be curious to know if you were able to replace one of these images yourself without this 'magnification' issue.
     
  13. Dr_E

    Dr_E Member

    19
    0
    OK, I've made a little progress. First of all, the frame for the image is not 650 x 550. The 'side bar' (as named in Layers) to the right of the image is actually covering the image *slaps forehead*. The size of the frame for the image is 960 x 542. The image is therefore the full width of the page in the template. Therefore, the only way to get the image to look absolutely 'correct' for me, without any magnification or clipping of the edges, is to set it to some multiple of my browser window size, which is 1920 x 955. If I want to see whats underneath the sidebar, I need to change the opacity of the sidebar. The problem then is that you cannot make the image responsive in this slideshow widget - when you start to reduce the width of your browser, you lose part of the image. I was a little surprised by this as I had assumed all the widgets would be responsive in this template. Given that I am trying to show some biological detail in these images, this is still going to be very awkward. Perhaps I will look to see if I can replace the slideshow widget with a responsive one.
     
  14. Andrew Mount

    Andrew Mount Member

    5
    0
    reading this, i wouldn't say this is SOLVED, would you?
     
  15. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,458
    255
    Andrew, I'm sorry, I must be missing the question here.
    Is there something specific you're having an issue with?
    Dj
     
  16. Andrew Mount

    Andrew Mount Member

    5
    0
    I'm having a lot of problems with the functionality of the project details page, just as Dr. E has. Im my case, i am an artist trying to make a portfolio site. most of my images are different sizes, and therefore i need some very clear usage help on using this part of the template. the project details is where the viewer will either get frustrated with the design, or not see your work as it is intended, and misunderstand. i cannot afford to let either happen.
    i have tried replacing the placed asset image from the asset folder, with one scaled at 2000x1500, and it produced the same clipping for me. i tried to do the same thing with the flyout using the 'folder' icon to choose all images from my HD. same result. i tried clicking fill frame/fit content, and both display wrongly. in one case, the image is mostly hidden underneath the right sidebar, on the other, the image is approx 15% clipped on the right under sidebar again, yet there is lots of white space on the left of the page.

    as i have images with many dimension differences (some square, some long rectangle, some standard, some portrait format, some landscape, etc, etc) how will i be able to accommodate these image differences within this template?

    the differences in image sizes pose the same problems for DR. E as they do for me, and his issue wasn't resolved as per his last post, which is why i said this didnt look liked a solved issue. i'm not trying to be argumentative. i honestly thought that maybe i was missing something - i have read the posts again, and cannot find a solution.

    at one point you suggest moving the sidebar - how would you do that?

    why is it that in muse the original asset images in this project details template appear clipped yet in the browser, the slideshow appears to expand to accommodate them, yet with my own images - which are the same dimensions - they do not?

    please help me figure this part out. i put a lot of time into the structure of the site and i am ready to begin filling in the project details images and hopefully going live. i need to get this done asap, and was really looking forward to using the template.

    best
    Andrew
     
  17. Andrew Mount

    Andrew Mount Member

    5
    0
    to help you out with some visuals,
    i've just republished to andrewmount.businesscatalyst.com
    -if you look at http://andrewmount.businesscatalyst.com/2015-on-paper.html you will see what i have been trying to describe in my post previous to this.
    -as contrast, there is an example of your template working well here:
    http://andrewmount.businesscatalyst.com/project-details.html
    as you will see, this is because i made no alterations in terms of images. i'm a little worried that this template is not very flexible, and that i will not be able to use it after all. this would be a shame as i have put lots of work into this up to now, and i like to way its formatted. finding a good artists template isnt that easy to do.
     
  18. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,458
    255
    Andrew, this template is a bit tricky, and one of our more advanced ones.
    I will be more than happy to try and help if I can.
    Let's start simple though, remember you know what you've done, and I'll need to come up to speed.
    So, give me one specific issue (identifying where it resides in the template by screen shot preferably) and what you have done and want to accomplish.
    For example, what Dr_E and I were working through may not be exactly what you are, or the image you want to replace may be close but different. He and I were working through the fact that the image on that page (see his screen shot) is a full width image and he was struggling with that issue. Mainly because the caption to the side of it is over the top of the image, making it look less wide.
    That's what I felt we had 'solved'
    So, sorry for being long winded, but as I said I will gladly try to help.
    Thanks
    Dj
     
  19. Andrew Mount

    Andrew Mount Member

    5
    0
    DJ,
    thanks for the reply. lets work very specifically on the way that the project details page handles images. i think that the issues that Dr. E was talking about are exactly the issues i had - he experienced clipping of images and could not find out how to control that in this flyout or with controlling image dimensions via photoshop. i have gone down the same path, and now just need clear answers in order to be able to use this template. I would hate to be put into a position of having to design and build my own template after having paid for this one in order to try to save myself time, just because i cannot get answers.

    above, i had provided some links to show working examples of the issues.
    here again:
    http://andrewmount.businesscatalyst.com/2015-on-paper.html
    this link shows the project details template with my adjustments. as you can see, there is clipping on the images, and there is white space on the left of the image: it appears that the container is made to display square images?
    FYI, I'm choosing the 'fit content proportionally' option in the flyout.
    another thing i notice is that something is happening to my original images. when i right click on the images in the link above, and select either save as or view image, it shows a cropped version of the image. see screenshot for original and cropped version downloaded from the test site side by side. as you can see, the downloaded version even has 'crop' added to the filename automatically by the code.
    please let me know why this is happening?

    i would like to know how to use this template. i have watched lots of your videos and i have learned a lot about different things. the very specific things i need answers to are:
    1. what are the hero image dimensions that this container can handle or is expecting, AND is there flexibility (clearly, not all of my images will be able to be the same size)?
    2. can this project details template handle images of different formats (landscape or portrait or square)?

    i have other questions, but please attend to these for now.
    many thanks,
    Andrew
     

    Attached Files:

  20. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,458
    255
    Andrew, for starters, your image will appear this way if you set the slideshow to 'Fit' instead of 'Fill'. This is the nature of the native Muse slideshow this design is using.
    One thing would help me, is if I'm being clear on the way the page functions (this is why I stated this isn't a simple/easy template to take on). The side bar (which is just a long 'State' button) is able to control the page to some degree. It keeps it long and is setting on top of the slide show (see layers panel). If you move the sidebar to the left, you will see your entire image. If you move it to the right (off the canvas) you will collapse the design. I hope that makes sense.
    As far as your images go, For this design they pretty much have to all be the same size and horiz.
    As far as a size, that you need to experiment with to see what looks good in your design. In my playing with this (for our conversation) I have been using images that range from 2000x1500 to 3000x2000. They all look good.
    Dj
     

Share This Page