HTML on Registry Set Pages 6 6

[Big Ronnie]

Is there a how to or a FAQ for this?  I can't find any information about what works and doesn't and I can't seem to just drop HTML in the description box.

Help Please

Ronnie

[Big Ronnie]

Here's an example: https://comics.www.collectors-society.com/registry/comics/PeopleSetDetail.aspx?PeopleSetID=119612

[Gotham Kid]

 just lookup how the poster set it up ...

(example below using Firefox)

select image, right mouse click to Inspect Element

 

type what is highlighted in your description box

Edited March 28, 2021 by Gotham Kid

[Gotham Kid]

for the red text, type in your description box

<b><font color="red"><center>bla bla whatever your text is</center></b>

Edited March 28, 2021 by Gotham Kid

[Iconic1s]

On 3/28/2021 at 9:12 AM, Big Ronnie said:

Here's an example: https://comics.www.collectors-society.com/registry/comics/PeopleSetDetail.aspx?PeopleSetID=119612

@Big Ronnie Hello, that is my set.  I learned from another Registry member and will be happy to pass along what I know.  Much was still trial and error as far as how I was able to lay things out. It’s late here right now and I have to work tomorrow, please give me a day or two to find some extra time to put something together on this and post it.

In the meantime you will need somewhere to host your images, I use Imgur.

More to follow but if you no longer need help please let me know though cause this is a busy week for me.  Thanks!  

Edited May 5, 2021 by Iconic1s

[Iconic1s]

@Big Ronnie First, thanks to StephenWA for getting me started!  Here is what he taught me as well as some of my own lessons learned.  It might seem confusing at first (I’m not a coder) but you just have to give it a try and it’ll come together.  I used one of my other sets and messed around in that description before moving anything into my main set, just in case I lost anything.

Adding photos requires a place to link to them. I used imgur (www.imgur.com). Create an an account and upload the photos you want to use.  I experimented a lot with the size of the pics.  If they were too large in imgur, they wouldn’t load to CGC, or would load distorted; too small and they look terrible  I was able to load pictures to imgur and then play around with the dimensions/size in imgur to get things where I wanted them.  I could then determine the exact size in the HTML code below.  So, for example, a pic may be 500 x 350 in imgur (to look sharp) but then I could code the exact size when writing the HTML code (as long as I had the right aspect ratio so it looked correct).

Here is the string of code you need for the pics:

<img src="https://i.imgur.com/XXXXXX.jpg?1[/img" alt="Reeves" width="350" height="265">

1. https://i .............jpg is the exact address from imgur

2.  Reeves is the name you give to the image

3. 350 and 265 are the width and height that you wish to display. 320 wide is half a page (you can do two wide at this size). 

I could not figure out how to center pics (I got code for that from someone else but it did not work) so I took a snip of the background color of the CGC site and loaded that to imgur.  I then inserted the code for that image to the left of what I wanted centered and sized it appropriately to push the other image into the center.  I also used this technique to insert the narrow amount of color you see between the front and back images of the TPB in my set description.  Once that colored snip/pic is in imgur you can size it really easily in the code and it works great (I am sure someone else here know how to center pics... maybe they'll chime in!).

Also, the large red text of my title at the top of my set description is an image I made using the snip of the CGC background color same as above, put it in word, put the text on top of it, and then snipped that and loaded it into imgur.

Here is some other useful code (these work in your book descriptions too):

To add a bullet type &bull;

To present in italics, add <i>XXXX</i> around your text (in this case XXXX).

For bold, replace both i with b

For underline, replace with u

If you want to change the color of your set name you can use this:

<p style="color:#000000;"><b>NAME OF YOUR SET HERE</b></p>

The six-digit code after # is the colour. 
000000 is black
ff0000 is red
3cb371 is green
0000ff is blue
DC143C is crimson

Note: If you do this and use the CGC signature in the forums your set name will look funny as it will appear on your signature as the code.  I did this and it drove me crazy for awhile.

Again, I am not coder… I took what StephenWA taught me and just experimented around to do what I wanted to do.  I imagine there are folks on here that can offer other techniques.

Have fun and best of luck!  If you need anything else feel free to PM me.

[SeanYork]

@Iconic1s @Big Ronnie if you start paragraph with something like this everything you put between the <p> and </p> should be centered including images

<p style="text-align: center; color: red; font-size: 20px;">

blah blah blah

<br>

<img src="https://blah.jpg" height="232" width="600">

</p>

Edited May 6, 2021 by SeanYork

[Iconic1s]

20 hours ago, SeanYork said:

@Iconic1s @Big Ronnie if you start paragraph with something like this everything you put between the <p> and </p> should be centered including images

<p style="text-align: center; color: red; font-size: 20px;">

blah blah blah

<br>

<img src="https://blah.jpg" height="232" width="600">

</p>

Thanks!  I’m going to give this a try this weekend.

[Big Ronnie]

Thanks Guys, will try.

[Sauce Dog]

Let me know if you need any help on code, it is all basic inline CSS (you can do a lot with this but to insure display compatibility I recommend keeping it simple). Some examples of my sets (so if you see something you want done here let me know)

https://comics.www.collectors-society.com/registry/comics/PeopleSetDetail.aspx?PeopleSetID=137866

https://comics.www.collectors-society.com/WCM/ComicCustomSetView.aspx?s=28969
 

[Iconic1s]

23 hours ago, Sauce Dog said:

Let me know if you need any help on code, it is all basic inline CSS (you can do a lot with this but to insure display compatibility I recommend keeping it simple). Some examples of my sets (so if you see something you want done here let me know)

https://comics.www.collectors-society.com/registry/comics/PeopleSetDetail.aspx?PeopleSetID=137866

https://comics.www.collectors-society.com/WCM/ComicCustomSetView.aspx?s=28969
 

@Sauce Dog Man, I really like how you’ve got yours laid out!  I especially like how you managed to offset some on the smaller pics and have them blend in with the text, really nice!  I’m not planning on messing with mine right now but I might reach out later with help on how to do that.

That really tall Stilt-Man is a fun artistic choice too!

Edited May 26, 2021 by Iconic1s

[SeanYork]

On 5/25/2021 at 6:09 PM, Sauce Dog said:

Let me know if you need any help on code, it is all basic inline CSS (you can do a lot with this but to insure display compatibility I recommend keeping it simple). Some examples of my sets (so if you see something you want done here let me know)

https://comics.www.collectors-society.com/registry/comics/PeopleSetDetail.aspx?PeopleSetID=137866

https://comics.www.collectors-society.com/WCM/ComicCustomSetView.aspx?s=28969
 

For some reason your images won't load up for me.  I can see the placeholders for them.

[Sauce Dog]

26 minutes ago, SeanYork said:

For some reason your images won't load up for me.  I can see the placeholders for them.

You must be using a Chrome based browser then, correct? Chrome will not load mixed content, that is to say Collectors Society site uses https, and since my images are hosted on a non SSL domain Chrome opts to just not load the images. I've been too lazy to fix this but will do so one day soon.

[SeanYork]

2 minutes ago, Sauce Dog said:

You must be using a Chrome based browser then, correct? Chrome will not load mixed content, that is to say Collectors Society site uses https, and since my images are hosted on a non SSL domain Chrome opts to just not load the images. I've been too lazy to fix this but will do so one day soon.

Yeah I was using Chrome.  I did try it in Edge also but it did the same thing.

[Sauce Dog]

3 minutes ago, SeanYork said:

Yeah I was using Chrome.  I did try it in Edge also but it did the same thing.

Edge IS a Chrome based browser 

[ADAMANTIUM]

On 5/5/2021 at 8:26 PM, Iconic1s said:

 

@Big Ronnie First, thanks to StephenWA for getting me started!  Here is what he taught me as well as some of my own lessons learned.  It might seem confusing at first (I’m not a coder) but you just have to give it a try and it’ll come together.  I used one of my other sets and messed around in that description before moving anything into my main set, just in case I lost anything.

Adding photos requires a place to link to them. I used imgur (www.imgur.com). Create an an account and upload the photos you want to use.  I experimented a lot with the size of the pics.  If they were too large in imgur, they wouldn’t load to CGC, or would load distorted; too small and they look terrible  I was able to load pictures to imgur and then play around with the dimensions/size in imgur to get things where I wanted them.  I could then determine the exact size in the HTML code below.  So, for example, a pic may be 500 x 350 in imgur (to look sharp) but then I could code the exact size when writing the HTML code (as long as I had the right aspect ratio so it looked correct).

Here is the string of code you need for the pics:

<img src="https://i.imgur.com/XXXXXX.jpg?1[/img" alt="Reeves" width="350" height="265">

1. https://i .............jpg is the exact address from imgur

2.  Reeves is the name you give to the image

3. 350 and 265 are the width and height that you wish to display. 320 wide is half a page (you can do two wide at this size). 

I could not figure out how to center pics (I got code for that from someone else but it did not work) so I took a snip of the background color of the CGC site and loaded that to imgur.  I then inserted the code for that image to the left of what I wanted centered and sized it appropriately to push the other image into the center.  I also used this technique to insert the narrow amount of color you see between the front and back images of the TPB in my set description.  Once that colored snip/pic is in imgur you can size it really easily in the code and it works great (I am sure someone else here know how to center pics... maybe they'll chime in!).

Also, the large red text of my title at the top of my set description is an image I made using the snip of the CGC background color same as above, put it in word, put the text on top of it, and then snipped that and loaded it into imgur.

Here is some other useful code (these work in your book descriptions too):

To add a bullet type &bull;

To present in italics, add <i>XXXX</i> around your text (in this case XXXX).

For bold, replace both i with b

For underline, replace with u

If you want to change the color of your set name you can use this:

<p style="color:#000000;"><b>NAME OF YOUR SET HERE</b></p>

The six-digit code after # is the colour. 
000000 is black
ff0000 is red
3cb371 is green
0000ff is blue
DC143C is crimson

Note: If you do this and use the CGC signature in the forums your set name will look funny as it will appear on your signature as the code.  I did this and it drove me crazy for awhile.

Again, I am not coder… I took what StephenWA taught me and just experimented around to do what I wanted to do.  I imagine there are folks on here that can offer other techniques.

Have fun and best of luck!  If you need anything else feel free to PM me.

Yes I was going to PM you, but thanks for this!

I thought after reading your registry that you might be willing to pay it forward. Unfortunately I'm not (at this moment) willing to learn imgur 

I am long enough a member to remember photobucket going from "free" to pay, and I remember pics being lost in transition 

Not sure I have the heart to keep up with it all at the moment...

Tomorrow is a new day though I hope to remember this thread, I may bookmark it 

Thanks for being great about paying it forward!

 

Edited June 26, 2021 by ADAMANTIUM

[Badger]

On 5/25/2021 at 5:09 PM, Sauce Dog said:

Let me know if you need any help on code, it is all basic inline CSS (you can do a lot with this but to insure display compatibility I recommend keeping it simple). Some examples of my sets (so if you see something you want done here let me know)

https://comics.www.collectors-society.com/registry/comics/PeopleSetDetail.aspx?PeopleSetID=137866

https://comics.www.collectors-society.com/WCM/ComicCustomSetView.aspx?s=28969
 

What you did on here inspired me to at least add pictures to my Registry description. Your sets look fantastic!

[Badger]

On 6/25/2021 at 8:06 PM, ADAMANTIUM said:

Yes I was going to PM you, but thanks for this!

I thought after reading your registry that you might be willing to pay it forward. Unfortunately I'm not (at this moment) willing to learn imgur 

I am long enough a member to remember photobucket going from "free" to pay, and I remember pics being lost in transition 

Not sure I have the heart to keep up with it all at the moment...

Tomorrow is a new day though I hope to remember this thread, I may bookmark it 

Thanks for being great about paying it forward!

 

You do not have to use an outside hosting service. I used the Registry Set picture. Take a look at my All Select Registry set to see how it looks. Here is the code for the All Select #2 picture.

<img src="https://s3.amazonaws.com/collectors-society-production/Collectibles/5167/1999334_Full_Obv.jpg?t=NS82LzIwMTQgOTo1MzoyNyBQTQ%3d%3d" alt="AS2" width="300" height="450">

[ADAMANTIUM]

On 7/27/2021 at 9:08 AM, Badger said:

You do not have to use an outside hosting service. I used the Registry Set picture. Take a look at my All Select Registry set to see how it looks. Here is the code for the All Select #2 picture.

<img src="https://s3.amazonaws.com/collectors-society-production/Collectibles/5167/1999334_Full_Obv.jpg?t=NS82LzIwMTQgOTo1MzoyNyBQTQ%3d%3d" alt="AS2" width="300" height="450">

So did you just copy and past the url from the pic in the registry, and just add the quote and percentage or all the other added stuff?

I tried to use you link and copy and past, then

replaced my url or copy and pasted the pic from my registry into the "" quotes, since mine is a different htttp

It didn't work, but I'm wondering if I'm on the right track  

[Badger]

On 7/27/2021 at 9:20 AM, ADAMANTIUM said:

So did you just copy and past the url from the pic in the registry, and just add the quote and percentage or all the other added stuff?

I tried to use you link and copy and past, then

replaced my url or copy and pasted the pic from my registry into the "" quotes, since mine is a different htttp

It didn't work, but I'm wondering if I'm on the right track  

You are on the right track. Find the picture, from your registry,  you wish to use. Right click on it and select "Copy link address".  In the example code I supplied, remove everything between the first 2 quotes and paste the copied link address.