Home / Forums / DynamiX Support / Blurry portfolio post images

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts

  • eva
    Participant

    Hey There,

    So, the portfolio images are coming out blurry — no matter if I make them ‘full’ or ‘medium’. Can you tell why this is happening and fix it? I keep readjusting the image size in the media library, but it actually makes no difference. It seems to resize it regardless and stretch it so it looks low res. Please advise.

    -eva

    Here is an example.
    http://streetside.electricembers.net/portfolio/jeff/

    Hi @streetsidestories

    The images you are using on your portfolio items are small, thus, even if you select ‘full’ it will still be blurry since it will be stretched to fit the container.

    For example, here are the full images you are using on Jeff’s Portfolio:
    http://streetside.electricembers.net/wp-content/uploads/2016/08/Jeff-Huang-3-e1473786928789.jpg
    http://streetside.electricembers.net/wp-content/uploads/2016/08/Jeff-Huang-1-e1473786947827.jpg
    http://streetside.electricembers.net/wp-content/uploads/2016/08/Jeff-Huang-2-e1473786940444.jpg

    The 2 best options you have are:
    1. reduce the width of the column for the images
    2. reupload large versions of the images

    Regards,


    eva
    Participant

    Actually, I think you are incorrect. Originally, I had the large image files (all aprrox 2000×3000) and they were *still* blurry. Is there a best file size that I can aim for? Looks like I’m going to have to re-import them all, if you think the larger files are the way to go.

    -eva


    eva
    Participant

    Basically, we need the image to be big enough to not be blurry, but small enough so that the user doesn’t have to scroll too much to see it all on their computer. Please advise as to what would be the best size.

    Thanks,
    eva


    eva
    Participant

    On the page referenced above, I added another image gallery with full size photos. I can see that they are not blurry, but even as a ‘medium’ image, they are still very large. Is there any way to create the CSS for a smaller image, or alter the CSS that controls the size of the medium, large and full images?

    Please advise.

    Hi @streetsidestories

    As mentioned, the image dimension is dependent on the “container” width, so whatever image size you will specify, it will try to fill the column width. If you want the image to be smaller, then all you need to do is reduce the column width for the image and increase the column where you have the student’s information.

    Regards,


    eva
    Participant

    So, how come you have the gallery image slider with options such as “medium,” “full,” or “large” if it always just adjust to the container size? I know there’s got to be a way to make that smaller with added CSS. Can you please help me figure that out?

    Hi @streetsidestories

    This is because you can also use smaller image ‘containers’ or columns, that is why there is an option for the image dimensions. Some customers prefer it the gallery to appear on a smaller column, then they can use medium and so on. For your case, since you are using a wide image column, then you’d have to use a larger resolution of the image.

    Regards,


    eva
    Participant

    So, what you are saying is that there is no way to add custom CSS that will allow me to use different images sizes. That, the only way to change the image size is to make the column smaller?

    Hi @streetsidestories

    Image dimensions can be controlled via CSS, but sometimes it is not the best option.

    To avoid any further confusion on this, can you please send us a mockup on how you want each item to look so we can check if the better option is via CSS or by adjusting the column width?>

    Thanks!


    eva
    Participant

    To be honest – what we want is pretty simple. We want a non-blurry image which fits on most computer screens without having to scroll. I figure that creating CSS that gives values like 100% for full, 70% for medium, 40% for small would suffice. Do you really need a mock up just to see the image non-blurry and that fits in the screen without scrolling?

    Hi @streetsidestories

    We can use CSS to control the image’s dimension, but then again, this is still dependent on the image. If you had an image that is 600px wide, stretching it to fit into a container that is 800px will blur it out. This is what is happening to your site currently.

    The best you can do is have a uniform width on your images and have them around 1000px wide. This way, if you use full or large, you have a large enough image that does not need to stretch out.

    Regards,


    eva
    Participant

    Again, back to square one with you guys. I get that, but that’s why I want to have you create CSS that allows it to be smaller too. For the horizontal ones, at 1000px wide, would make it extremely long so that our users would have to scroll in order to see the whole image, and that is what we are trying to avoid.

    Hi @streetsidestories

    The better option would be to use a grid gallery. This way, image previews are presented as thumbs and when a visitor clicks on an image, it opens the image on a lightbox showing the whole image without any scroll.

    This way, the quality of the image is not compensated.

    Please check if that will work better for you.

    Thanks!

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.