Portfolio problems... « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Replete

Portfolio problems...

8 posts from 3 voices

Started 3 months ago by AlainTernet
Latest reply from Nick
This topic is not a support question

Tags:

AlainTernet
Member

I switched from Abundance to Replete because the portfolio but I am not able to set it like I want.
I want to set some size for picture. I tried with the "Simple Image Size" plug-in but and "Regenerate Thumbnails" that
nothing working right (change de image size but not the display size). Finally, after searching the forum, I tried to
modify the functions.php but it work just a little better (but not right).

In addition, the "Responsive Layout" seems to enlarge or upscales images (by blurring them)
that is confusing. So, after a few nights to try, I have some questions for you:

----------------------------------------------------------------------------------------------------
1- Is it possible to prevent the enlarging (and bluring) of portfolio thumbnail and big picture ? (reducing images
size are ok, but not enlarging them; everything becomes blurred)
If not, is it possible to keep the responsive layout for the website but desactivate it into the portfolio page ?
----------------------------------------------------------------------------------------------------
2- Because I have some images not available larger or because copyright, I can not display
very big image. I would like to display the big portfolio images to something like 500 pixels wide maximum
and 500 pixels height maximum, so, rectangular horizontal will be something like 500x300 and
rectangular vertical image will be something like 300x500.

I was able to do the first part (horizontal image at 300x300) but I am not able to restrict the vertical image to 500 height max ...
I used these settings in config.php:
$avia_config['imgSize']['fullsize'] = array('width'=>500, 'height'=>500, 'crop'=>false); // big images for lightbox and portfolio single entries
(work only in non responsive layout...)

I also tried this for the thumbnails:
$avia_config['imgSize']['portfolio_small'] = array('width'=>75, 'height'=>75 ); // images for portfolio 4 columns
But I never obtain the right size ! (I obtain something like 220 x 220px ?)
----------------------------------------------------------------------------------------------------
3- I was wondering if there a better way to create portfolio faster than creating a "portfolio item" for each photo.
This is rather long if the portfolio is large ...
----------------------------------------------------------------------------------------------------

Can someone explain how the portfolio work ?
Thanks !

Alain

Posted 3 months ago #
Nick
Moderator

Hi,

Answers:

1) Yes. Make sure (a) the images you are uploading are larger then the size where you want to display them. So both the width and the height of the image you are uploading has to be bigger then the size you want it to display. (b) Keep aspect ratio of the image you are uploading in mind compared to aspect ratio of the constraint in the simple image sizes plugin.

2) You need to do it like 500x500, 300x500, 500x300 , that will work without a problem. But 300x300 will not fit in that mix

2b) Please try to understand what $avia_config['imgSize']['fullsize'] = array('width'=>500, 'height'=>500, 'crop'=>false); actually means if you upload an image 900x900 or an image 850x710. with your settings, the 900x900 image will be 500x500 but 850x710 will be scaled to 599x500 or so.

2c) Always bigger! never smaller. IF you set 500x500 then the images you are uploading the width is bigger or equal to 500 and the height is bigger or equal to 500.

3) I can do 100 items in 1.5 hours .. how big is your portfolio? I am sorry but there are no shortcuts that completely elliminate clicking add new portfolio item, and attaching an image. If you got thousands, building an importer would be easier.

Thanks,

Nick

If you are having problems, drop me a temp admin account to usjahm (at) gmail (dot) com , and i will set your images at least.

Posted 3 months ago #
Nick
Moderator

Hi,

In reference to your email.

Your images are 320x400 saved on server. http://vestiges.ca/?page_id=932 this image is 320x400 but is enlarged to fit the space to 676x845 making it blurry. The key here is to have images on the server bigger than the area you want them to fit in, this way they shrink which never causes blurriness if done proportionally.

I uploaded an image grandpa-vase.jpg that was 1000x1000 originally. I saved image as full size !!!this is important!!! ( http://i.imgur.com/uimw2Cx.png ). The grandpa-vase.jpg image was saved 12 times on server automatically, each image in different size, based on sizes in Settings > Media. Some you will never use, but Wordpress doesn't know that. So for portfolio thumbnail, a 241x179 image was cropped and created just as you told it to make in Settings > Media for portfolio_small ...

However there is enough space available to fit a 250 x 185 image so the 241x179 image was stretched *size didn't change*. Now, your options are (a) change the definition of portfolio_small to be 250x185; or (b) to force the size of the container that holds the image to shrink to 241x179. The correct thing to do if you don't care, would be to change the portfolio_small to 250x185 (which I already did). The image however will continue to be the same since you need to regenerate it , otherwise nothing changes. I instead will upload the same image with a new name for portfolio item -> grandpa vase 2

But first we will look how the first vase is on the big image of portfolio item. The original was shrunk down from 1000x1000 to 600x600 based on your setting full_size size setting (with no crop). However the page has no constraints so the image will grow and shrink however it wants , so we need to add some CSS to give it some rules - add the next code to you /css/custom.css file or to quick css located in Replete > Theme Options > Styling, at the bottom of the page (which i already did).

Ok now lets do grandpa's vase 2. Done. Now lets look http://vestiges.ca/?page_id=932 . and look at the individual page with the vase - http://vestiges.ca/?portfolio=grandpas-vase-part-2-the-legend-of-the-vase

Thanks,

Nick

Posted 1 month ago #
AlainTernet
Member

Thanks again nick for your help.
I am embarrassed to come back but I'm still not able to make my portfolio properly working...

I uploaded an image grandpa-vase.jpg that was 1000x1000 originally. I saved image as full size !!!this is important!!! ( http://i.imgur.com/uimw2Cx.png ). The grandpa-vase.jpg image was saved 12 times on server automatically, each image in different size, based on sizes in Settings > Media. Some you will never use, but Wordpress doesn't know that. So for portfolio thumbnail, a 241x179 image was cropped and created just as you told it to make in Settings > Media for portfolio_small …

Ok, I understand this. But it is necessary to upload the picture bigger than 600x600 if I dont want to use it bigger than 600x600 ?

However there is enough space available to fit a 250 x 185 image so the 241x179 image was stretched *size didn't change*. Now, your options are (a) change the definition of portfolio_small to be 250x185; or (b) to force the size of the container that holds the image to shrink to 241x179. The correct thing to do if you don't care, would be to change the portfolio_small to 250x185 (which I already did). The image however will continue to be the same since you need to regenerate it , otherwise nothing changes. I instead will upload the same image with a new name for portfolio item -> grandpa vase 2

Ok, I understand this part, 250x185 is ok. I will keep this.

But first we will look how the first vase is on the big image of portfolio item. The original was shrunk down from 1000x1000 to 600x600 based on your setting full_size size setting (with no crop). However the page has no constraints so the image will grow and shrink however it wants , so we need to add some CSS to give it some rules - add the next code to you /css/custom.css file or to quick css located in Replete > Theme Options > Styling, at the bottom of the page (which i already did).

Your code seem to have some effect on other pictures like the top big one on the homepage ?

And now, all non-square pictures seem deformed and scaled to 600x600 ?
http://vestiges.ca/?portfolio=test2-2

I wonder if the simplest way is it to set the portfolio to 600x600 and make all my photo to 600x600 ?
(vertical pictures will have vertical white space on each side and horizontal ones will have horizontal white space on top and bottom)
Is it possible to do otherwise ?

All ok, image of vase was 30k at 1000x1000 (very compressed) but everything ok. Did you notice that the image
of vase fits on thumbnail and has even a little shadow while the big image does not have a shadow? :)

Yes I notice this but I not understand why or how ?
How do you make it to fit the square picture on the rectangular thumbnail without cropping ?

I think that the Replete Portfolio are verry difficult to setup.
I just want to make something "identical" to the kriesi sample
at this address: http://www.kriesi.at/themes/replete/template-files/portfolio-4-columns/
The only difference is that I have to display vertical image too. How I can make this ?
What is the simple way ?

Thank !

Alain

Posted 1 month ago #
Devin
Moderator

Hi Alain,

Typically, you just upload your images for each portfolio item and that is it. If you want to let the theme take care of cropping and position that is. Otherwise, you need to adjust the settings to fit your need.

If you want to make it simple, save all your images at the same size and put your vertical image on a white/blank background but keep the scale of the image (600px by 600px for example) the same.

This is just the way Wordpress in general handles images, it has a bit of an odd proportional cropping mechanism and you either need to be okay with not having full control of the images crop or modify the image thumbnail sizes to get the best result possible.

Regards,

Devin

Posted 1 month ago #
Nick
Moderator

Hi,

Devin is correct. Keeping everything the same size with a white background to replace any width or height less than 600px is the right way to go.

Replete is not difficult to set up if you ever set up any other Wordpress websites. If this is your first one, then the level of difficulty will be the same as with anything else since everything is new to you.

I understand you want your site to look like Kriesi's demo, and you can, but I guarantee you one thing, that the demo portfolio wasn't just slapped together and some careful work went into ensuring that the thumbnails are all as attractive as the big images.

For example, if you look at the grandpa-2 portfolio I created, the reason why the thumbnail fits perfectly and has a shadow that the big image lacks, is because I created that image myself , so that portfolio item actually has 2 different images, with the first one only showing up as the thumbnail while the second image only showing up as the big portfolio item image. This way , I used Photoshop to make sure that the thumbnail was 250x185 and that the vase fit into that size. I also added a shadow to it using a photoshop tool. If you want to have a portfolio where you control how thumbnails look , thereby making sure each item fits perfectly with no cropping, using an image editor such as Photoshop to create you own thumbnail images is one way to ensure your site looks professional.

Thanks,

Nick

Posted 1 month ago #
AlainTernet
Member

Hi !
I understand about thumbnail, I already think to make "customs ones" in photoshop to control the crop.

I agree about Replete, I find him easier than some other theme I tried before (like Abundance), but
it's just about the portfolios that I find it more difficult (for example, I made a Portfolio site with Flashlight in no time.
But, ok, I will make all picture to fit into a 600x600 square and it will be easier.

But, the problem I have is related to the code that you added (Nick) in custom css, this
have some effect on other pictures on the site, like the top big one on the homepage ?
Can you check this ?

Alain

Posted 1 month ago #
Nick
Moderator

Hi,

Sorry , forgot to mention but I changed the CSS before I ever wrote my previous reply, so now that css only hits the portfolio section. I sent you an email but I think we have a large time difference between us, hehe.

Thanks,

Nick

Posted 1 month ago #