Proportional crop of images

Mauer Themes Support Bild Proportional crop of images

This topic contains 5 replies, has 2 voices, and was last updated by  Paul 1 year, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1381

    SophieBech
    Participant

    Hi,

    Thank’s for a great theme.
    I love the portfolio projects, but find it problematic that the standard cropping of the images is proportionally centred in the middle.
    It does not fit all images, and not everybody tends to click on the image to see full size.
    See what I mean here: http://www.topbananas.co/proj/blazed/

    Also, I would like for the small text appearing when the curser rolls over the image to say “Click for more”, instead of the name of the project. Is that possible?

    Best, Sophie

    #1388

    Paul
    Keymaster

    Hi Sophie,

    It’s great to know you like the theme.

    As for “Click for more” instead of project names on archive pages (like the portfolio page) and also in the related projects section, please go to /js/general.js file in your theme folder and find a block of code starting with $(document).ready(function() { around line 452.

    Insert the following two lines at the beginning of that block — just as on the screenshot below, and save the file.

    $('.portfolio-project-or-gallery .entry-tile .entry-title, .portfolio-project-in-more .entry-tile .entry-title').text('Click for more'); $('.portfolio-project-or-gallery .entry-tile .entry-cats, .portfolio-project-in-more .entry-tile .entry-cats').hide();

    This will also remove category names from under project titles.

    You can actually control the area of the picture that is taken for the cropped version.



    With this plugin you can specify the area of a bigger picture which goes to the cropped version. Pretty similar to what you do when you upload a profile pic to Facebook.

    The image sizes that are used by the thumbs in portfolio projects are the following:
    
mauer_thumb_7 — big thumb

    mauer_thumb_8 — half-size thumb




    Regards,
    Paul

    #1428

    SophieBech
    Participant

    Hi Paul,

    Thanks for getting back. Thought I could reply straight back on email.
    I’m having a hard time to figure out your guide above with “click for more” and image cropping in the top or bottom. Could you be more specific to serve a rookie?

    Thank’s som much!

    X, Sophie

    #1431

    Paul
    Keymaster

    Hello Sophie,

    Did you manage to install the Post Thumbnail Editor plugin? To use it you basically need to go to ‘Media’ in the admin panel. And then to use it you need to do the following (keeping in mind the thumbnail names I provided above), as told by the plugin creator:

    1. Start with the Media Library
      1. Open Media Library
      2. Click the “Thumbnail” link in the rollover options.
    2. or start within image editor interface (when viewing image details)
      1. Click “Edit Image”
      2. Click the “Post Thumbnail Editor” link under the other thumbnail options.
    3. Using Post Thumbnail Editor Interface
      1. Select the thumbnails you want to edit. If a thumbnail defines a specific aspect ratio it will be applied to the editor. If you select thumbnails with different aspect ratios (width / height), this feature is disabled. Be careful or you might make some of your pictures look funny.
      2. Select the cropped/scaled area, by clicking and dragging on the left-hand image.
      3. Click the “Crop” button.
      4. Use the save icon to save the pictures, or use the view tab to compare the old and new versions before you commit.
    4. It’s possible that you might have to refresh the cache (ctrl+f5 on the page) to see changes, but they should be there.

    Select the cropped/scaled area, by clicking and dragging on the left-hand image.
    Click the “Crop” button.

    Use the save icon to save the pictures, or use the view tab to compare the old and new versions before you commit. It’s possible that you might have to refresh the cache (ctrl+f5 on the page) to see changes, but they should be there.

    Rerards,
    Paul

    #1440

    SophieBech
    Participant

    Hi again,

    So, I got the cropping to work. Thanks for your help with that.

    But I think we misunderstood each other about the “click for more” issue.
    It was’nt the hover text on the image I referred to. I meant the “alt”-text to the E.g

    #1469

    Paul
    Keymaster

    Hi Sophie,

    Excuse me for late reply. I’m not sure I understand what text you mean and the example link is empty. Can you please make a screenshot of it? Or just explain in in more detail? Thank you.

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

You must be logged in to reply to this topic.