Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Image Sizes?

    • 10 years, 1 month ago Bikul
      Participant

      Expired

      Hello,

      Thank you for this wonderful theme.

       

      Can you give some advice for image sizes, if I want to use it also with Retina Displays?

      Are there any formats I have to consider?

      Thank you

      Bernd

    • 10 years, 1 month ago Bikul
      Participant

      Expired

      Forgot to tell you that I want use the Micro Demo

    • 10 years, 1 month ago Mirela
      Participant

      Hello,

      You can check all needed image sizes in function.php file:
      `add_image_size( ‘port3’, 600, 600, true );
      add_image_size( ‘port3_grayscale’, 627, 470, true );
      add_image_size( ‘port2’, 460, 275, true );
      add_image_size( ‘port2_grayscale’, 940, 470, true );
      add_image_size( ‘port4’, 600, 600, true );

      add_image_size( ‘blog’, 825, 340, true );
      add_image_size( ‘alternate_blog’, 440, 195, true );
      add_image_size( ‘alternate_blog_side’, 355, 235, true );
      add_image_size( ‘blog_grid’, 350, 350, true );

      add_image_size( ‘staff’, 400, 270, true );
      add_image_size( ‘staff_full’, 500, 340, true );`

      To use with the Retina Display, just make sure to upload bigger images (almost double size).

      Best regards!

    • 10 years, 1 month ago Bikul
      Participant

      Expired

      Hi Mihaila,

      thank you

      If you look into your demo here https://codeless.co/specular/micro/?portfolio=single-portfolio-5

      you will find that the first image is shown in the browser with

      960 x 440 px.

      The original image you uploaded https://104.131.255.213/specular/minimal/wp-content/uploads/2014/09/23eaef27ba0e96f0ddd26ca0c6776124.jpg

      is 736 x 440

      I guess that the picture is then upscaled to 960 px and then cropped.

       

      The second image is shown in the browser with 960 x 470

      The original image you uploaded https://104.131.255.213/specular/minimal/wp-content/uploads/2014/09/732e1a97c384ee4f475a08ae7c0fdf87.jpg

      is 600 x 908

      I guess that the picture is then upscaled to 960 px and then cropped.

      Why do both images do not have the same height in the browser ?

      If I would like to show this images in a browser size of 960 x 470 for retina displays too you recommend double size. Does that mean in this case 1920 x 940 ?

      Will the browser detect if someone is coming with a retina display and show different images accordingly?

      What about the WP Retina 2x Plugin, you installed with the theme. In the configuration panel I see this:

       

      Do I have to check all the boxes? Is there a manual from your side, how to configure it with your theme?

      A little bit confused
      and glad about help

      Bernd

    • 10 years, 1 month ago Bikul
      Participant

      Expired

      Hello,

      another question regarding the image sizes

      I uploaded an additional image with size 960 x 576 in demo “Single Portfolio 5”

      When I check it in Browser it is cropped and downsized to 825 x 340.

      Why is that and how can I change it to show the image size I did upload?

      And what image size do I have to upload for Retina Displays in that case?

      Thanks for Feedback
      Bernd

    • 10 years, 1 month ago Ruco
      Keymaster

      Hello,

      You must install retina plugin https://wordpress.org/plugins/wp-retina-2x/ if you want your images retina.

      It will request you to upload a bigger image (x2 bigger) per image you have uploaded.

      Retina plugin support page: https://wordpress.org/support/plugin/wp-retina-2x
      Retina plugin FAQ: https://apps.meow.fr/wp-retina-2x/faq/
      Best regards!

    • 10 years, 1 month ago Bikul
      Participant

      Expired

      Thanks Ruco

      What about this:

      I uploaded an additional image with size 960 x 576 in demo “Single Portfolio 5”

      When I check it in Browser it is cropped and downsized to 825 x 340.

      Why is that and how can I change it to show the image size I did upload?

      Thanks for Feedback
      Bernd

    • 10 years, 1 month ago Mirela
      Participant

      Hello,

      You can change it at functions.php

      add_image_size( 'port3', 825, 340, true );
      Then re-upload the image.

      Best regards!

      • This reply was modified 10 years, 1 month ago by Mirela.
    • 10 years, 1 month ago Bikul
      Participant

      Expired

      Hello

      I am not sure if I understand this right.

      ‘blog’ is used only for all Portfolios? Or other items as well?

      What if I have a Portfolio item which has a different size. Is that possible then?

      Thanks for Feedback
      Bernd

       

    • 10 years, 1 month ago Mirela
      Participant

      Hello,

      I am very sorry, there was a speedy mistake. I edited it now. Please change (or add if missing) the respective line in functions.php for the type of portfolio you need to use.

      Best regards!

    • 10 years, 1 month ago Bikul
      Participant

      Expired

      sorry, but now I understand nothing anymore.

      yesterday I changed in functions.php

      add_image_size( ‘blog’, 825, 340, true );
      to
      add_image_size( ‘blog’, 960, 640, true );

      and uploaded pictures to demo Single Portfolio 3 and the pictures came out like I wanted in 960 x 640.

      “blog” – “port3” = confusion?

      What do you mean by “I edited it now”? In my template? In your template? Here?

      If I want to have different portfolio image sizes like i.e 960 x 640, 960 x 320 where do I edit this?

      Thanks
      Bernd

    • 10 years, 1 month ago Mirela
      Participant

      Hello,

      I edited only the ticket above.
      If you are using portfolio with two colums, edit:add_image_size( 'port2', 825, 340, true );
      If you are using portfolio 3 columns with grayscale, edit this:add_image_size( 'port3_grayscale', 627, 470, true ); ..so on if you’ll use other portfolio types and want to change the image size.

      Best regards!

    • 10 years, 1 month ago Bikul
      Participant

      Expired

      Thanks Mihaila!

      but if I want to have different portfolio image sizes like i.e 960 x 640, 960 x 320 for one portfolio template what can I do then?

      add_image_size( ‘blog’, 960, 640, true );

      Can I copy this, change it and a new portfolio template will be available? i.e:

      add_image_size( ‘blog’, 960, 340, true );

       

      Thanks for Feedback
      Bernd

    • 10 years, 1 month ago Ruco
      Keymaster

      Hello,

      Sorry you can’t use different thumbnail sizes in a portfolio template. But you can change them by using css. Assign an image size for the portfolio images them customize the images sizes as you want with css. You can add css code at Custom Css Box at general options.

      Best regards!

Viewing 13 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password