Joomla Templates Club 406,261 posts

[wendyp Friend wendypJoin date: October 2012Posts: 18Downloads:15Uploads:9 Thanks: 14 Thanked: 1 times in 1 posts]

#194557

Hi, I’m doing the final tweaking of my template Lens – I am selling photographs, the image size proportion is 900px x 600px (Large & XL) and Medium is 720px x 480. I apply a watermarking to my images which includes a border. I’ve noticed that the when the image is displayed in the masonry brick formation on the homepage, the large item display of the image, the proportions of the image is not quite correct. What happens is that – depending on how wide my browser window is, that the image is either cut off on the width or cut off on the depth. This is quite apparent because the watermarked border is chopped off on either width or height. I can see that the size that the image is displayed at is fluid depending on the device / browser display width, but is it possible to set that that the percentage of the height -v- width of the display area will match my image proportions which will always be 3:2 (w:h) ?
When the image is displayed on an item view page, it displays perfectly with the border even on all sides.
As I’m selling photographs, it’s sort of annoying that the layout of the website crops the image display.

Hoping you’ll be able to provide me with a solution — cheers.

Website: http://www.wendypaine.com.au

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#521746

On which browser window dimensions are you seeing the cutoff?

[wendyp Friend wendypJoin date: October 2012Posts: 18Downloads:15Uploads:9 Thanks: 14 Thanked: 1 times in 1 posts]

#521797

Hi Tom thanks for your reply. I’ve only looked at 2 browsers, Firefox and Safari, both show same results. I’m not sure I’m explaining myself very well, I’m therefore attaching 2 screenshots, the difference of the display between the masonry-brick full size image display and the display of the same image, correct and uncropped, on an item view page. If you focus your attention on the overlaid watermarking – you’ll see where the cropping is occuring. FYI, I’m also attaching a png of the watermark, you’ll see it has a border with crosses through the centre. I apply this watermark to the images before uploading, it goes from edge-to-edge of each image, it’s not applied by any sort of plugin/module function. All images are of the same proportion and size, XL is 900×600.

On the masonry-brick full size image, you’ll see that the image is cropped, – this is obvious to me as it’s my artwork, I realise that lots of people wouldn’t be paying so much attention to detail, but as it’s artwork that’s for sale, I don’t want the image to be cropped if possible, lots of viewers I’d imagine would use the masonry brick view rather than an item view page.

Is it possible to have the image display not hidden by the left/right content & scroller, or specify the proportions of the image (3:2) or have the width 100% + height 100% ?

Thanks Tom.

URL: http://www.wendypaine.com.au

---

Attachments:

1. 
2. 
3. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#521809

Hi wendyp: You can try to open /templates/ja_lens/css/component.css file at 227th line, change:

.BlogView .itemImageBlock {
margin: 0 -30px;
}

to

.BlogView .itemImageBlock {
margin: 0 -10px;
}

Remember to clear System Cache (Site >> Maintenance >> Clear Cache). Your images will be displayed fine without cropping.

1 user says Thank You to phong nam for this useful post

1. wendyp

[wendyp Friend wendypJoin date: October 2012Posts: 18Downloads:15Uploads:9 Thanks: 14 Thanked: 1 times in 1 posts]

#522871

Thankyou Leo, works great, problem solved.

[Author]

Posts