Image size

richnyc30

What are the original uploaded sizes for images as you resize images to fit each page and when used in different pages. What size should be uploaded for each image use on different pages and uses?
I found if the uploaded image is too small it pixilates and too large wastes space. What is the best image size?

saguaros

richnyc30 Hi

May I know images are you referring to? If you meant images for articles, there are 2 images of each article: Intro image and full text image.

The intro text image will have small size, it will show in modules / category page / featured articles page / ....

While full text image will show in detailed page of each article.

richnyc30

Yes, but what is the best size - in pixels - for uploading each image.
And what is the best size in pixels for logos.
I understand each page may resize the image for the page's layout. When I upload an image what is the best original size uploaded to the site.

saguaros

I'm not sure which layout you're using, you can try:

intro image: 352 x 264px
full text image: https://ja-blockk.demo.joomlart.com/images/joomlart/magz/full-images/item-4.jpg it depends 🙂

richnyc30

I will try the sizes for small and large article images.
What about the logo image for the header?
You should have the original image sizes to upload in the docs.
I'm trying to get the best image quality for all images which is why I am asking.
Probably I'll just setup several sized images in the media library and see what is best.
The issue is I would like to control the sizes of the pages in Content Listing module and that means controlling the size of images and text. I would like to have any of the content listing layouts to be half size. Now, without size control, the page layouts are big enough to be overwhelming to the viewer. I would like a page or overall control of layout size to affect, in particular, the large images in the layouts.
I like the Content Listing module very much except for the lack of size control.
I see the doc where the CSS file is accessible and things about overrides. I looked at the CSS files you mentioned and it is hard to determine which lines of the code can control the layout sizes. Could you help with what needs changing. Can I save the modified file as another layout? I would like a video to show how to modify the CSS files for the layouts.
Many of the simpler website creation programs, like WIX, allow for sizing the images on the pages directly which is very nice.
If you had a program that allowed visual resizing and could save the resizing as a new layout that would be great.
If I can resize objects with CSS would the issue of different screen sizes, Computer, tablet, and cell phones, be ok?

saguaros

Hi richnyc30 Template is a starting point that you use to build your site, we don't put the image sizes in the docs as it's often customized when used in a real website, someone want it bigger, other love smaller...

About JA Content Listing, we're also aware of image control option and I also forward to our dev team for further consideration.

Regards

duke3d

I don't know why JA has become reluctant to provide the information needed to make best use of their products. Typical is that the designer reports the image size that was used for each design layout as well as the smaller version sizes (and different aspect ratios) to use to optimize for smaller screens.

My simple answer using a quickstart installed on localhost is to go through the images/joomlart folders and check the source image sizes. If you are confused about where things are used, edit each image to overlay a text of its dimensions (and path?). Then, as you see a layout rendered on a demo page, you know how best to replace it. If designing for someone else, leave that example with dimensions on a page that has elevated administrator access requirements so it doesn't show to public, but shows to logged in staff users.

Hope this helps

richnyc30

duke3d
I need to spend my time on content. We've both done enough change this and see what happens. I've got my work to do and we all hope templates are a good idea. Hopefully.

richnyc30

saguaros Yes, but what do custom programmers change the image final size of the images on any page in any position? And how does the template do the resizing of the original image when displaying a page?
Give me something to start my testing.

saguaros

richnyc30 Let us know if you need any further helps 🙂

saguaros

richnyc30 Hi

Your question is quite general as not sure which page are you referring to. A Joomla page has different sections / elements on it: article, module, plugin... so it depends on style / configuration for that section.

richnyc30

What is the best original size of an image to upload for use in Content List module.
The small and big pictures for use in all the styles.
Can I change the size of images for each layout of Content List module that appears on the web page?
I would like to know the same for all article images.
I would like to know the same for Category Blog pages.
I would like to know the same for the logo images and favicons.
Again, please tell me the best pixel dimensions for each image to upload and how to control the size of images on any and all web pages.
Whether it is a plug-in, article, module, section I don't care. I need control of all images on all pages.
I looked at the CSS code and it is very complicated. Which lines of code affect what? Can I use the Custom.css to override the layouts for Content List and all other pages? What would code for Custom.css would control the images and layouts.
This is not a general question. I need specific answers.

saguaros

richnyc30 Hi

I may mention this before, we don't have option to control the size of images. And in a template like JA Blockk, it will have special style for image differently from different view: Joomla article, modules, etc... It totally depends on the layout you're using.

You can share me the URL of page of your site and how you want to show so I can suggest the image size for that part specific.

richnyc30

The image sizes are controlled by the size of the screen or template setup. Breaking up lines in the template style, like using a right side column, will make the image shrink. Which may or not be a useful user interface tool but at least some control.

saguaros

richnyc30 Hi

In a template which uses left/right sidebar, it will provide override style for them so it can display properly based on the concept and it may have style for image size too. It's different from template to template so it's hard to share the correct size of image which suits all cases though 🙂

richnyc30

Here's an example of why I want to control image sizes.This is the original graphic uploaded.

I tried uploading different sizes of the images and Blockk automatically resizes the image no matter what the original image size.. How do I make the image smaller? It is much too big now.

In the right column is a bunch of text overwriting themselves. Why?

saguaros

richnyc30 Any URL?

and share me the screenshot of how you want it should be, I will check for you.

richnyc30

Notice in the image above in the right column is a bunch of text overwriting themselves. Why?

richnyc30

I want the size of the images in the above uploaded screenshot to be only as high as about three lines of the article description. In other words, about 25% of the size of the current displayed size of the gold square with the arrow.
I'm not sure how to produce a screenshot with the image size I want as the template automatically resizes the images to be too large.
I need control of the size of the images from within the Blockk template.
I looked for a CSS class entry to size the images and didn't find anything in the article or category setup.

saguaros

richnyc30 Hello

JA Blockk supports various layouts which have different style, you should share the URL of that page or the URL from our demo site so I can check and help you out. It's quite hard to predict the issue and give you suggestion 🙂