How to Increase the Image Size in Joomla

Hello Community,

I have an image that has the dimensions of 2400 x 3104, but when I upload the image into my webpage it keeps on showing up as 646 x 1200.
gjdgCan someone please explain why this is happening?

Cheers

Carlton
cpatte7372Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

V4nP3rs13Commented:
646v2-1200 is the file name... it is not the image size :)
0
cpatte7372Author Commented:
V4n

I know its not the image size. The image size is 2400 x 3104, but as I said when published it still shows up a lot smaller than 2400 x 3104.

I need to know how to make it appear as 2400 x 3104?
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
This is what i understand from your question: you are uploading an image as shown in screenshot...  but when you check it in the site (view it in browser) it is being resized to 1200 pixels wide... correct?

if this is what is happening, then your problem is because of the CSS rule used for 'responsive images' where you set image width to 100%....

You need to check the CSS being applied to the image (or the DIV around it) by using some tools like Firefox / Firebug,

a way to show the full image is to show it in a popup using extension like 'JCE mediabox-popup plugin'.

let me know if I am correct in above assumptions, if correct maybe I will be able to help you.

thanks,
Prasadh
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Go Premium
cpatte7372Author Commented:
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hello cpatte,
the link you have given is for admin back-end... maybe you posted a wrong link...

anyways I checked the site and did not find any OBVIOUS big image which you might be referring to in this question..

let me know more clearly on which page it is so i can help if possible.
0
cpatte7372Author Commented:
Hello prasadhbaapaat

Thanks again for responding. Sorry for the delayed response.

The following link shows the image that I would like expand/increase.

http://keyloop.co.uk/index.php/wookbook/exercise-4/ex4-task-1

Can you help?

Cheers
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
The link is taking me to a login page... I guess the link is only visible if you are logged in...

can you take a screenshot and show so at-least I can understand what is the problem with image and if I understand it, only then can I help you :)
0
cpatte7372Author Commented:
Hi prasadhbaapaat

You can login with username barlow password barlow1


Cheers
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
ok... i logged into the site, but its not correct of you giving the login openly on a forum.... please change password or delete login immediately as you read this reply.

well you need to know some basic of how a webpage is displayed on a desktop or any device...

as per your template an area is allotted to show the page or 'Article' content in the component. in your template it is 9 columns wide... & 3 columns are given to the left menu.

now this essentially means that your CONTENT AREA or the image is going to get maximum 9 parts of horizontal space to display itself....  it cannot EXCEED this... whatever size you make the image... even if you make a 10000 pixel wide image, it cannot exceed the viewable area of 9 available parts of the screen width.

moral is its always going to be shown that way... so no use in banging your head on the wall.

ways around it to ENHANCE the user experience:

I checked your 1200 pixels image... as per me it is wasting 300 pixels of  computer real-estate space :-)   check the attached image.
Wasted space in the image
so if you crop your image and use it again.... what is going to happen is that your content READABILITY is going to increase...

check the 2 images for image info ... the image is getting scaled to 885px and 901px in 1200 to 1700 pixels range of resolution.  
as seen on 1280 pixels resolutionas seen on 1680 pixels resolutiongo for increasing 'readability' instead of calculations like my image is 1200 but shown as 900....

if you cut off the wasted 300 pixels from your image, your user is going to see better readable content.

Added advantage will be that your file size is going to drop to 160 kb from 260 kb... saving 100kb in bargain is simply great :-)

try and use the image attached and see how it looks... maybe you can take screenshots and compare if readability has improved or not and then take a decision about what should be the standard size of the image.

let me know if you have any doubts or did not understand anything explained above.
619-1200.jpg
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
cpatte7372Author Commented:
prasadhbaapaat

Going to change login information now before reading your response.
0
cpatte7372Author Commented:
Wow! prasadhbaapaat

Amazing, amazing response. Thanks so much.

I'm going to crop just as you suggested.

Thanks a lot mate. That really helped.

Cheers
0
cpatte7372Author Commented:
Absolutely fantastic solution.

Thank you soooooo much
0
cpatte7372Author Commented:
prasadhbaapaat

Your image looks great on my site.

Can you please show me how to go about cropping my images to look like the one you attached.

Alternatively, would you like to submit another question for this?

Cheers
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hello cpatte,
Thank you very much for your nice comments to my answer :-)

Yes, sure I will show you how to crop images for website. Do you use Photoshop? as the cropping can be done using Photoshop effectively.

If you do not have Photoshop, then I can show how to do it using some free software.

yes in another question I will answer

let me know.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Joomla

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.