Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Gallery Settings - Change Image Size on Attachment Page

  1. dalozza
    Member

    Hi
    I use the new Theme Twenty Eleven and I would like to create a gallery where the thumbnails link to an attachment page.
    The images on the attachment page use a with of 926 pixels. So I uploaded all images with a with of 926 pixels.

    But on the attachment page the images are now "scaled" to 926 pixel. Which means that if I click on the image info it shows me a dimension of 741px × 1023px (scaled to 926px × 1278px). It makes this with all images although all images do have a width of 926 pixels.

    Why are the images scaled down and than scaled up to the original size?
    I changed already the large image size in the media settings on a width of 926 pixels and I uploaded all images for a second time.
    I also changed a piece of CSS Code:

    Original Code:
    .entry-content img, .comment-content img, .widget img {
    max-width: 97.5%;
    }

    Changed Code:
    .entry-content img, .comment-content img, .widget img {
    max-width: 100%;
    }

    But this all doesn't help. The images are still blurred.
    I'm sorry but I cannot post the link to my blog because it's not online yet.

    Do you have any idea why the images are scaled on the attachment page?

    The blog I need help with is danielalozza.wordpress.com.

  2. timethief
    Member

    I also changed a piece of CSS Code:

    I have flagged this thread so our Moderators move it to the CSS editing Forum for you. Please be patient while you wait for help. You may also want to check the threads produced by searching as they may contain and answer to your question.
    http://en.forums.wordpress.com/tags/twenty-eleven

    You may need to review the Gallery documentation and how it is designed to operate. A gallery will display a set of thumbnail images attached to a particular post or page. Normally we display thumbnail sized images linked to full sized images. http://en.support.wordpress.com/images/gallery/

  3. justjennifer
    Member

    Also, this may be difficult to pin down because your blog is private. If you don't want to make it public, then I suggest dropping a note to Support http://en.support.wordpress.com/contact/

  4. dalozza
    Member

    Hi, thanks for your reply!
    I'm sorry but I cannot publish my blog.

    The Gallery does use the following HTML code to resize the images:
    <img width="848" height="476" title="www.xxx.com" alt="www.xxx.com" class="attachment-848x1024" src="http://xxx.files.wordpress.com/2011/06/niche.jpg?w=848">

    I see this class=attachment-848x1024 and behind the link there is also a w=848 but I can not find this in the CSS Code.
    I don't understand why the system does first scale down the images to 848 pixels and extend them later to 926 pixels. A little bit strange isn't it?

    I think also there must be an error in the Gallery Template for the Twenty Eleven Theme: If I want to add an URL in the Link URL field (in the Gallery Settings) the system does not save the link.

  5. designsimply
    Happiness Engineer

    The img tag you mentioned shows that, at least for the attachment pages, the image width is hard coded in. That means you can adjust it with CSS, but what is really happening is that the theme sizes the image down to 848px and you size it back up to 926px with CSS. That's the cause of the slight blurring you mentioned. Because the 848px is hard coded in, that also means you can't change it directly with CSS.

    The images are set to 848px as part of the theme design. The 926px seems to be in the CSS to introduce a little padding.

    So, it should be possible to size the images up to 926px, but that won't get you the super crisp look you're after. The best route to get super crisp images would be to upload them at 848px instead of 926px.

  6. panaghiotisadam
    Member

    @designsimply: Sorry, but "the images are set to 848px as part of the theme design" of Duster. Whoever turned Duster into Twenty Eleven increased the max width for attachment pages but forgot to change its hard-coded counterpart. So "the best route to get super crisp images" would be to tell the theme wranglers to correct this oversight.

  7. designsimply
    Happiness Engineer

    Twenty Eleven contains this code, which sets the image sizes to 848px:
    $attachment_size = apply_filters( 'twentyeleven_attachment_size', 848 );

    Seems intentionally set to 848px. I can double check on it to make sure though!

  8. panaghiotisadam
    Member

    Thanks! My point is that this is a relic from Duster, in which attachment pages display images at a max width of 848px, while this was changed in Twenty Eleven. It doesn't make sense to have a 848 filter when the displayed max width is 926, so you should change the one or the other.

  9. designsimply
    Happiness Engineer

    Right. Good catch @panaghiotisadam. We updated this: 

    .image-attachment div.attachment img {
width: 100%
}

    To this: 

    .image-attachment div.attachment img {
max-width: 100%
}

    And that should fix the issue with the image getting sized back up to 926px (which it shouldn't have been doing before). It also fixes images that were smaller than 848px that were getting stretched to 100% but shouldn't have been.

  10. dalozza
    Member

    Hi, that you for your reply and help!
    I uploaded the images now with a width of 848 and they look finally super crisp now :D

    Note: The maximum size for images on the gallery attachment page is 848 x 1024. If the image is higher than 1024 pixels it will be scaled down.

  11. dalozza
    Member

    I just have an other question for the gallery attachment page.
    Is it possible, that the image link to an external website doesn't work?

    I can select "None", "File URL" or "Post URL" for the Link URL of an image. But I would like to link every image to an external website.

    When I insert an external URL with http://www.... the link simply is not saved after I clicked on "Save all changes" and the Link URL field is empty.

    The images in the gallery link all to the next image on the gallery. Can I change this within the CSS? I don't think, but If you have a hint for me I would be very happy :-)

    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags