How to change product image dimensions in WooCommerce

How to change product image dimensions in WooCommerce

In order to configure the image dimensions, follow the steps listed below:

  1. Open your WordPress admin panel and navigate to WooCommerce -> Products. Select Product tab and click Display. 
  2. Scroll down to change the parameters for the following options: Catalog image, Single Product image, Product Thumbnails;
  3. Uncheck the Hard Crop option if you do not want the images to be cropped, but re-sized. Save the changes. 
  4. Right now only the newly added images will be resized according to these parameters. In order to re-size previously added images, you can use the extension to re-generate the thumbnails. 
  5. Download the extension and install it in Plugins -> Add new. 
  6. After you install the extension, navigate to Tools > Regenerate thumbnails and click Regenerate All Thumbnails. 
  7. After the regenerating process, all the product images should appear with new dimensions set.

How to remove products images placeholder in WooCommerce

How to remove products images placeholder in WooCommerce

Sometimes, items in your store do not require product images. But if a product does not have an image associated with it, then WooCommerce automatically adds default placeholder image to the product.

Let’s find out how to remove placeholder images for products.

  1. Access your server, using any ftp client or FileManager.
  2. Navigate to ‘wp-content/themes/themeXXXXX/includes’ folder, where XXXXX is the number of your theme.
  3. Open ‘custom-function.php’ file with any php/text editor.
  4. Add the following line to the very beginning of the file, right under <?php tag:
    remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
  5. Refresh your website to see the changes.

This removes the product image placeholder from the product page, but can leave the column intact, pushing the page content over.

If this happens, you’ll have to fix the styling issue with some custom CSS. The exact rule you use, and how you make this modification will depend on your particular theme.

  1. We’d recommend that you use FireBug plugin for FireFox browser to inspect elements and edit CSS.
  2. Basically, you will just need to adjust the width value for the product description column.
  3. Change the width value to ‘100%’.
  4. Copy new rule declaration.
  5. Paste it to the Custom Css box of the Cherry Options.
  6. Refresh your website to see the changes.

How To Add Media In Your WordPress post

Adding photos, videos and music to your posts is an easy task with WordPress. Let's open your post. Click on the text where you want to add the content and click on the Add Media button in the top left part of the editor.

The WordPress Insert Media pop-up will appear. Click on the Select files button in the middle of the screen.

Once pick the local file, WordPress will upload it and refresh the page depending on the file format. For the purpose of this tutorial we will add an image to the post. For images there are two things you should take care of. First, describe the image itself - enter its Alt tag, title for the link and optionally a caption. The caption will appear under the actual image on your front end.

Once you do that, you need to specify the attachment settings of the image:

  • Alignment - How to align the image in your content. It depends on your actual theme how alignments will work on your site.
  • Link To - Select where to link the image to - the full size image file, the media page automatically created for each new attachment, custom URL or simply not to link it.
  • Size - When you upload an image, WordPress creates multiple copies of it in different sizes. Choose whether you want a thumbnail, medium sized image or the entire image added to your post.

After you enter the information for you photo and choose how to visualize it in your post, click the Insert into post button. You will see the image added to your editor window.

You can now update your post and go to the front end of your site. You will see the newly added image added to your post.

Following the same instructions, you can add music and video to your posts.


WordPress Images

WordPress Images

How to insert images, audio or video in WordPress?

WordPress makes it really easy to add media to your posts. To add media to a new post, go to your blog's admin area->Posts -> Add New.

In the WYSIWYG editor menu you can click any of the following buttons to add media to your post - "Add an image", "Add Video", "Add Audio" and "Add Media".

If, however, you need some extra gallery functionality, you may have to use a gallery plugin.

Gallery Plugin in WordPress

In this tutorial we will show you how to install and use the NextGEN gallery plugin. You can download it from this link.

Once the NextGEN plugin is installed, you can see its admin section included in WP.

This plugin has very intuitive interface and you will get the hang of it in no time.To add the NextGEN Gallery to your WordPress frontpage, you should add its widget to the WP sidebar. This can be done from the WP admin area > Appearance > Widgets. Click the Add button next to NextGEN Widget and then click the Save Changes button located on the right.

This will publish the widget and your gallery will be visible from your frontpage.


CSS Color Formats

CSS Color Formats

CSS offers you a variety of ways to specify the color you want for an element, such as: font color, borders, backgrounds etc. Plus with CSS3 you can also specify an opacity level for your colors, when using the RGBA or HSLA color format, more on this later.

Color values can be written in the following formats:
1. Hexadecimal
2. RGB or RGBA
3. HSL or HSLA
4. Color Name

Lets have a look at the color formats more closely now. In all of the examples that I provide below, I will be using the same color which will be ‘yellow’, so all of the different color formats will give you the same color.

Hexadecimal

Hexadecimal colors begin with the number sign (#) and usually have 6 hexadecimal characters following (#RRGGBB), with certain colors you may also be able to shorten the 6 digits to 3 (#RGB).

p { background: #FFFF00; }
p { background: #FF0; }

The above example will give you the same color background of yellow on all paragraphs.

RGB or RGBA

RGB stands for Red, Green and Blue. Instead of using hexadecimal characters to define the colors, we use three integer values ranging between 0 to 255 or three percentage values between 0% and 100%. The ‘A’ value in RGBA stands for alpha, this was introduced in CSS3 to include opacity for the specified color. The range for the alpha value is between 0.1 and 1.

p { background: rgb(255, 255, 0); }
p { background: rgba(255, 255, 0, 1); }
p { background: rgb(100%, 100%, 0%); }
p { background: rgba(100%, 100%, 0%, 1); }
All of the above will give you a color background of yellow.

HSL or HSLA

HSL stands for Hue, Saturation and Lightness. Hue is represented as an angle of the color circle ranging between 0 and 360 degrees, this value is represented by a number (no degrees symbol). Saturation and lightness are represented as percentages. 100% is full saturation, and 0% is a shade of gray. 0% lightness is black, 100% lightness is white, and 50% lightness is ‘normal’. The ‘A’ value in RGBA stands for alpha, this was introduced in CSS3 to include opacity for the specified color. The range for the alpha value is between 0.1 and 1.


p { background: hsl(60, 100%, 50%); }
p { background: hsla(60, 100%, 50%, 1); }
 

The above colors still represent the color yellow.

Color Name

Lastly we come to color name, with this format we can only specify 147 colors, Represented by 17 basic colors, with 130 other shades, these colors are referred to as X11 colors.

p { background: yellow; }

How to Edit Thousands of Images at Once in Photoshop with Batch Processing

How to Edit Thousands of Images at Once in Photoshop with Batch Processing

Final-Results

Don’t waste your time doing the same thing over and over in Photoshop. This tutorial will show you how to apply the same editing to thousands of images at once in Photoshop using your own Actions with the Batch automation. You’ll learn how to create a basic Photoshop Action and learn how to run it within the Batch automation window so you can quickly edit tons of images. Get ready to cut your editing time in half!

What you’ll be creating

In this tutorial we’ll create a Photoshop action that resizes the length of our images to 1000 pixels and then we’ll apply it to several images at once. Photoshop’s batch and action automation features have been available for a long time so you’ll be able to follow along in Photoshop CS3 or newer. There are a ton of free Photoshop actions here on Photoshop Tutorials that you can use to batch process your images using the same technique!

Final-Image

Step 1

First create a new 2000px by 1500px document. This will give us a workspace to create our action and record our changes for the image size dialogue box later on.

Step-001

Step 2

Go to Window > Actions to open the actions palette. Click on the Create New Set folder icon at the bottom of the actions palette and name it “Resizing Actions.” You can move sets and actions around in the actions palette simply by clicking and dragging.

Step-002Step-002a

Step 3

Click on our new Resizing Actions set to select it. We will create our action inside of this set so that we can save it for later. You cannot save actions out of Photoshop and open them on another computer unless they are in a set. Click on the Create New Action button and name the action “1000PX Wide

Step-003Step-003a

Step 4

Click Record to start recording your action. Anything you do now will be recorded in steps within the action for you to playback later in the batch automation. Go to Image > Image Size and change the Width to 1000px. Make sure that the Scale Styles, Constrain Proportion, and Resample Image tick boxes are checked. Set the resampling dropdown menu to Bicubic Automatic. Click OK. Don’t worry about the Document Size settings since the action will only record the values for the tick boxes, the width value we changed and the resampling settings in the dropdown menu.

Step-004

Step 5

Now we have to save our image in the action we are recording. Normally, you wouldn’t record a Save As command in an action, but the batch automation needs this step in order to export the correct file type for us. Go to File > Save As and save this blank document as a JPEG. Check the Embed Color Profiletick box. ClickSave. It doesn’t matter where you save the image while recording the action because we will define a destination folder where our batch of images will be saved later but you must click save to define the JPEG file type in the action.

Step-005

Step 6

Go back to the Actions Palette and click the Stop Icon. Our action is ready to go! See the Image Size and Save sequence we did? Simple.

Step-006

Step 7

Go to File > Automate > Batch to open the Batch window. Select Resizing Actions in the Set dropdown menu and 1000PX Wide in the Actions dropdown menu.

Step-007

Step 8

Click Choose underneath the Source: Folder heading and select the Distressed Paint Overlays folder wherever you saved it. We’ll be resizing these images.

Step-008

Step 9

Leave Override Action “Open” Commands unchecked since we didn’t open any files while recording our action. Leave Include All Subfolders uncheckedsince there aren’t any subfolders in the stock pack we’re using. Suppress File Open Options Dialogs and Suppress Color Profile Warnings should bechecked to avoid having to confirm profile changes and options dialogs for every image in the batch. Most JPEG images will have an embedded sRGB color profile and by default Photoshop’s Working RGB is sRGB so there shouldn’t be any Color Profile Warnings anyway. If there is no embedded profile in an image Photoshop can assign the working sRGB profile to the image. It’s important to have no dialogs pop up during the batch otherwise it defeats the purpose of the automation. You want to be able to click OK and walk away while Photoshop does the work for you.

Step-009

Step 10

Create a new folder on your Desktop called “Batch Process Images Resized.”Back in the batch window in Photoshop set this folder as the Destination folder. Make sure Override Action Save As Commands is ticked so that the batch uses only our file settings from the action and not the save location.

Step-0010

Step 11

Finally, choose a File Naming Template for your exported images. We can stick with the default template for now. Make sure the Windows and Mac OSCompatibility tick boxes are checked. Leave the Errors dropdown at Stop for Errors.

Step-0011

Step 12

Click OK in the batch dialog and you’re good to go. The images will open, resize to 1000 pixels wide and save right in front of you. Try it with another action and see what else is possible!

Final-Results-1


cPanel - Images

With this feature of cPanel, you can manage and modify your Images directly through its Interface. The image must be uploaded into your account to use this feature. To access cPanel Images, click Images Link found on your files section.

 

This feature includes the following tools −

 

Thumbnailer Converter

Thumbnailer creates small images or Thumbnails of the original image. This is done by using these images wherever required as it could save more bandwidth. For example, when we need to display a preview of the photo, which will then be opened into a new tab, when the user clicks preview image. We can use a small image here, rather than forcefully scaling the image to display in a small size.

To use Thumbnailer converter, we can open the application by clicking on theThumbnailer link from images section. We will get a similar dashboard as shown below.

 

Step 1 − Navigate to the desired directory from which you wish to create Thumbnails, to navigate within directories use folder icon on left hand side.

Step 2 − Select folder from which you wish to create thumbnails, by clicking on the name of folder displayed in middle.

Note − Thumbnailer is a bulk thumbnails creator tool, single image cannot be used in these tools.

Step 3 − In Scale Percent, text inputs enter the percentage by which you wish to shrink the image. Select Keep aspect ratio to maintain original proportion of the Image.

 

Step 4 − Finally click on Thumbnail Images to create thumbnails.

The system will automatically create a subfolder, Thumbnails into selected folder and all files in that folder will be converted and saved there with a prefixtn_. For example, if you have an image abc.png, then it will be saved into tn_abc.png.


cPanel - Image Scaler

Image Scaler is a very useful tool to scale an Image to increase or decrease its dimensions, or we can say to resize an Image. To scale an image, we need to follow these steps −

Step 1 − Open Image Scaler by clicking Scaler from Images section.

Step 2 − Navigate to the directories by clicking on folder icon on the left hand side, same way as done above.

Step 3 − Select the File which you want to resize by clicking on the Name of File.

Note − Image Scaler is a single image tool, and can be used with a single image at a Time.

Step 4 − Enter either new dimensions in Pixels or Enter Percentage by which you want to increase or decrease the Image. You can select, Keep Aspect Ratio, so that the Image ratio is not disturbed, and also you can retain the old copy of the file as Image Scalar replaces old Image to the new one.

 

Step 5 − Finally Click Scale Image.


cPanel - Image Converter

Image converter can be used for converting image format of any image. It can convert from one supported type to any other supported type. To use Image converter, open the interface by clicking Converter link from Images section.

Step 1 − Navigate to the directories by clicking on folder icon on the left hand side, as we did above.

Step 2 − Select the File or Folder which you want to resize by clicking on the Name of File or Folder.

Note − Image Converter can be used with a single file or folder.

Step 3 − Select new file type from the prompt as shown below, which can be −

  • Portable Network Graphics (.PNG)
  • JPEG (.JPG)
  • GIF (.GIF)
  • Bitmap (.BMP)

 

Step 4 − Finally Click on Convert to convert the file type.