Page 1 of 11
Forum moderator: bigblog 
uCoz Community » For Webmasters » Design Customization » How do I change display size of $IMAGE1$ ?
How do I change display size of $IMAGE1$ ?
Boujohn
Posts: 36
Reputation: 0

Message # 1 | 6:00 PM
Being able to upload images directly into the web page via the Visual Editor is great ... and the pop-up behavior is excellent.

However there appears to be no control over the embedded-in-page image size when you upload images this way. In our situation we want to reduce the in-page image size from it's current default.

I looked around for the source code behind the system code $IMAGEx$ to add some sizing information, but I cannot find it.

I also cannot find any module setting for web pages that includes default image viewing size.

Please advise.

Thanks. John
Post edited by Boujohn - Tuesday, 2015-04-21, 3:24 AM
Sunny
Posts: 9296
Reputation: 456

Message # 2 | 9:14 AM
Boujohn, when you attach images to an entry, you can change their dimensions (width, height):



You can also change the default image settings in the module settings (Control Panel -> the module you need, e.g. Site News -> Module settings:


I'm not active on the forum anymore. Please contact other forum staff.
Ed05
Posts: 556
Reputation: 7

Message # 3 | 0:13 AM
Quote Sunny ()
You can also change the default image settings in the module settings (Control Panel -> the module you need

that not work i already wrote a post about that and left with out answer *(help) http://forum.ucoz.com/forum/56-19895-1

!
Sunny
Posts: 9296
Reputation: 456

Message # 4 | 9:34 AM
Ed05, I replied in your thread.
I'm not active on the forum anymore. Please contact other forum staff.
Boujohn
Posts: 36
Reputation: 0

Message # 5 | 12:35 PM
Quote Sunny ()
Boujohn, when you attach images to an entry, you can change their dimensions (width, height):

You can also change the default image settings in the module settings (Control Panel -> the module you need, e.g. Site News -> Module settings:



Hi Sunny,
The answer you reference appears to be for modules such as News or Blog ... my issue is with web page editing:



There appears to be no sizing fields next to the image upload control ... nor is there are there image size attributes on the Common Settings page (for page editing there is no Module Settings panel).

Thanks. John
Attachments: 4808536.png(55Kb)
Post edited by Boujohn - Saturday, 2015-04-25, 12:36 PM
Good
Posts: 349
Reputation: 12

Message # 6 | 1:32 AM
Yes, it has.

You select the photo then you will see the dimension as attached screenshot.
Attachments: 1211087.png(18Kb)
Boujohn
Posts: 36
Reputation: 0

Message # 7 | 6:21 PM
Okay, I played around with it ... and also with the "Maximum dimensions of a full-sized image" setting.

It looks as though the embedded image is created when you select the file -- that is why those sizing attribute appear only when you browse for the file to upload. Okay, so we will have to re-upload any image for which we want to change the display size on the page.

As for the expanded view of the image -- the "Maximum dimensions of a full-sized image" setting also appears only when you are uploading a file. Since this attribute seems to affect all images on the page, I assumed that setting would be found somewhere on the page HTML or on the CSS style sheet. But I cannot find them. it appears to be related to the "uLightbox" class, which is a javascript plugin? Please let me know where I can find more info on this, and if I can change the fully expanded image size without having to reload all of the images again.

Thanks. John
Sunny
Posts: 9296
Reputation: 456

Message # 8 | 12:46 PM
Boujohn, you can change the default size of a full-sized image (displayed in the lightbox window) by editing the following CSS classes:

Code
.fancybox-outer  
.fancybox-image


Please note that by default the lightbox window is responsive, i.e. it adapts to various screen resolutions.

I'm not active on the forum anymore. Please contact other forum staff.
Boujohn
Posts: 36
Reputation: 0

Message # 9 | 1:27 PM
Okay, I never would have guessed that wink

I can't find any sample style entries for fancybox elements, and they're not in our CSS ... can you provide me with examples to work from?

Thanks. John
Sunny
Posts: 9296
Reputation: 456

Message # 10 | 11:44 AM
Boujohn, if some class is not listed in the website's CSS but is present in the source code, it means that you should simply add this class with the necessary parameters to the CSS file. And if you need to find a class of some website element, use the 'Inspect element' option of your browser (right mouse click on the element -> Inspect element): http://screencast.com/t/WwEvvfhux8kM

A sample code will be:

Code
.fancybox-image {
   width: 100px;
   height: 100px
}


Please note that some parameters will need an !important attribute to override the default parameters set by the system, e.g.

Code
.fancybox-image {
   width: 100px !important;
   height: 100px
}

I'm not active on the forum anymore. Please contact other forum staff.
Boujohn
Posts: 36
Reputation: 0

Message # 11 | 12:26 PM
There are a few layers in there ... not sure which one I have to adjust ...
Attachments: 5710322.png(154Kb)
uCoz Community » For Webmasters » Design Customization » How do I change display size of $IMAGE1$ ?
Page 1 of 11
Search: