image size

Started by ayhaner, 24 December 2012, 12:29:21

Previous topic - Next topic
A financial contribution is greatly appreciated as a support, to help us to keep live the project.
If you like this project you can donate some piece of BitCoin to this address: bc1qy5tgq6tvrckac2a57unxvqcnxamrvhduve9sj9

ayhaner

hello i need for edit cover image size.. i want make 80px to 250px
I edit style.css there was no change, still the same.

A financial contribution is greatly appreciated as a support, to help us to keep live the project.
If you like this project you can donate some piece of BitCoin to this address: bc1qy5tgq6tvrckac2a57unxvqcnxamrvhduve9sj9

federica

Hi ayhaner,
you have to modify the file manually.
Change width="80" to width="other_dimension" in these files:
components/com_abook/views/category/tmpl/default_items.php rows 23 and 25
components/com_abook/views/book/tmpl/default.php rows 46 and 49
components/com_abook/views/author/tmpl/default_items.php rows 24 and 26
components/com_abook/views/search/tmpl/default_results.php rows 35 and 37
components/com_abook/views/tag/tmpl/default_items.php rows 23 and 25

I will fix this trouble in the next version.
Al mondo ci sono 10 tipi di persone, quelli che hanno capito il codice binario e quelli che non l'hanno capito.
Informatizzati [url="https://informatizzati.org"]https://informatizzati.org[/url]
Stacca la spina [url="https://disconnessi.org"]https://disconnessi.org[/url]

A. Wayne Webb

Quote from: ayhaner on 24 December 2012, 12:29:21
hello i need for edit cover image size.. i want make 80px to 250px
I edit style.css there was no change, still the same.
Here is what worked for me.  I wanted a 130 pixel wide image.  First, copy the file <yoursite>/components/com_abook/assets/css/style.css to your computer.  Second, scroll to the bottom of the file and add the following code.
div.cover a.modal img{
margin-right: 10px;
width: 130px;
}


Now you need to allow enough space between the image and the text to the right of it.  The changes I made are as follows and yours may be different.
div.bookdetails {
/*float: left;*/
float:right;
/*width: 80%;*/
width:86%;
}

div.best {
clear: both;
/*width: 100%;*/
width:86%
padding: 5px 0px;
border-top: 1px solid #dedede;
margin-left:146px;
}

I also added a bit of spacing in between the rating bubbles as follows:
div.bookrating span.content_rating img {
margin-left:2px;
}


Hope this helps.

federica

Hi A. Wayne Webb
Thanks for your guide!
Al mondo ci sono 10 tipi di persone, quelli che hanno capito il codice binario e quelli che non l'hanno capito.
Informatizzati [url="https://informatizzati.org"]https://informatizzati.org[/url]
Stacca la spina [url="https://disconnessi.org"]https://disconnessi.org[/url]

A financial contribution is greatly appreciated as a support, to help us to keep live the project.
If you like this project you can donate some piece of BitCoin to this address: bc1qy5tgq6tvrckac2a57unxvqcnxamrvhduve9sj9

A. Wayne Webb

Quote from: federica on 11 January 2013, 10:21:06
Hi A. Wayne Webb
Thanks for your guide!
You are welcome Federica.  I try to contribute, being a poor person, by offering whatever help I can to other users.

That being said, I did learn something else after that posting.  Hopefully this will help others as well.  In my article describing the book I have a larger image for the cover.  Such as 00001.png which is 600 pixels wide, making for a large image both in dimensions and file size.  I was using that for the thumbnail.  This meant that when I listed a directory of books it took some time to list them all.

To rectify this I created another file, 00001_a.png, set to the same dimensions as set forth in <div.cover a.modal img>.  Now when I list a category it goes much faster.

Depending on your coding skills, you might in the next version consider taking the image and creating a thumbnail as set forth in the styles.css file.  Or, in the Options of the app have a spot where you can set the dimension by height or width, one or the other.  That way whatever file is placed in Edit book > Book information > Cover image is automatically resized to the desired <div.cover a.modal img> size.  The routine would then take the full size image (00001.png), no matter the dimension, and create the appropriate file (00001_thmb.png).

Cordially,
Wayne