I thought I should share another quick and dirty work around I found while messing with the code. To paste uploaded pics side by side copy like this:
To get the line, right click on the thumbnail and select Inspect element and it will show you the image line. Copy / paste it, remove the word square_thumb and save. You should now be able to just put pics next to each other in a line like I have here: https://adelaide-wrath-of-the-righteous.obsidianportal.com/wiki_pages/work-page/edit
I will make them buttons soon by adding :url-
The only thing I have not worked out yet is what code you would add to change their default size. For now, I have to make sure I upload them at the size I want.
I have posted some stuff about working with mobile devices in various threads, but rather than track them all down and link them I would be happy to post something of an overview here again. That way it is in another place that people can hopefully find it in the future as well.
There are a few things you can do when approaching mobile devices. The most beneficial is to have targeted CSS that handles those devices in instances where the content looks bad otherwise. The same can be done for desktops and laptops, or larger screens as well in the instances where it is useful. These are called *Media Queries* for those who want to research them further on their own. Some of the more common Media Queries that you would find helpful are going to be these:
/* SMARTPHONES (PORTRAIT AND LANDSCAPE) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* CSS HERE */
}
/* SMARTPHONES (LANDSCAPE) */
@media only screen and (min-width : 321px) {
/* CSS HERE */
}
/* SMARTPHONES (PORTRAIT) */
@media only screen and (max-width : 320px) {
/* CSS HERE */
}
/* TABLETS (PORTRAIT AND LANDSCAPE) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* CSS HERE */
}
/* TABLETS (LANDSCAPE) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* CSS HERE */
}
/* TABLETS (PORTRAIT) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* CSS HERE */
}
/* DESKTOPS AND LAPTOPS */
@media only screen and (min-width : 1224px) {
/* CSS HERE */
}
/* LARGE SCREENS */
@media only screen and (min-width : 1824px) {
/* CSS HERE */
}
This is all stuff you can just dump right in with your CSS as normal, it is actually a part of CSS3 (and works just fine here on OP). Things to consider with it, since it is just more CSS after all, is that it will work in the cascading way of normal CSS. If you put it high in your CSS it could be overwritten by things you have popping up later. As you can imagine with the way all of this is setup there are many variations you could make with this. If you do some Google digging you can even find Media Queries for specific devices and other such things that could be potentially useful depending on how much effort you want to put into mobile support on a hobby project.
In my own use of this on OP I have found that the above Media Queries tend to be more than enough for making the page mobile friendly without becoming overly invested in coding for my page. Of course if your troupe all uses one specific device (or just a couple) it could be beneficial to add in Media Queries for those devices on top of your basic mobile support to give your troupe an even better and customized experience when compared to other people that might be viewing your page.
The best part about all of this is that this method is also considered to be responsive (meaning no page reload is needed for these adjustments to take place, they happen dynamically as a browser is resized to meet the requirements). If you want to see an example of how this works take a peek at my Dragon Age campaign on a Desktop and resize your browser width down to see the page gradually adjust itself to better display the content. The effect is more pronounced on some pages compared to others, but it is present essentially everywhere on my campaign.
If you have some additional questions about all of this don't hesitate to hit me up, I am happy to help when I am able.
--
Alex
"Dragon Age: Requiem":https://da-requiem.obsidianportal.com/
OK. Anyone else having trouble with their sites? For some reason, even though I have changed no part of the CSS my Emerald City site is now all kinds of messed up. Fonts aren't recognized, images for buttons aren't working. What the hell?
Mine seems fine, save for the issues I posted about videos and inline PDFs stopped working. I just did a dig through of my site quick and all else looks to be in order.
Weird. Like I said it seems to only have effected my Emerald City site and none of my others. I am not sure why that would be since the code is pretty similar. But why would it spontaneously change regardless? Like I said I didn't change anything so it must be something on OPs end.
OK. I got it working by completely changing the code for my EC site (some of which was older code since that site was my first one) and updating it to my current stuff. It seems to be working again. I just hope this kind of thing doesn't happen often.
Well, as I said I got it working by using the CSS from my Star Wars site with the Emerald City images and fonts subbed in. I am not sure what it was that caused the original CSS to suddenly be broken. I hadn't changed it for quite a while.
Oh. Sorry. I am afraid you guys may have misunderstood what I was saying. I didn't have any Youtube videos on my site. Whatever change was made screwed up my fonts and links and buttons. I managed to get that to all to work again but I didn't have any videos so I didn't address that.
I am not sure why, but I cannot place images behind my wikis now.
I made a new site 2 days ago, inserted my image fine on the Front Page but the site refuses to the same now on any other wiki page I make. Code it same, new image uploaded fine. Very frustrating as I cannot work it out as it is identical to the front page.
The code I am using is:
Anyone else having issues and what can I possibly do? I have tried making other pages, different images, re-uploading the image.
The CSS for this on my own page is too much to post on the forums here (it take a bit to get the desired effect). You can take a look at the CSS on my page (I have it posted publicly), just look for the CLEAN PARCHMENT PAGES section of it. Again, I would post here if I could, but it is about 2000 characters too long for a forum post.
--
Alex
"Dragon Age: Requiem":https://da-requiem.obsidianportal.com/
Comments
@
CHARACTERS
MAGIC
LIFE IN ALFAYSIA
REGIONS AND GEOGRAPHY
POWERS AND DEITIES
COSMOLOGY
HISTORY
ORGANIZATIONS
RUNNING THE GAME
MONSTERS AND CREATURES
MAPS
TABLES AND RULES
@
Unconquered Kingdoms, July 2016 CotM
To get the line, right click on the thumbnail and select Inspect element and it will show you the image line. Copy / paste it, remove the word square_thumb and save. You should now be able to just put pics next to each other in a line like I have here: https://adelaide-wrath-of-the-righteous.obsidianportal.com/wiki_pages/work-page/edit
I will make them buttons soon by adding :url-
The only thing I have not worked out yet is what code you would add to change their default size. For now, I have to make sure I upload them at the size I want.
I hope this is useful to someone.
Will stretch the image into a 200 by 200 square.
Just using one, width for example, will keep the image in its default width-height ratio.
You can do a lot of cool things with this, borders, padding, etc
http://www.w3schools.com/css/
is a great place to learn more.
Bondoid
"Legacy of Fire":https://our-legacy-of-fire.obsidianportal.com/
Just trying to help out.
There are a few things you can do when approaching mobile devices. The most beneficial is to have targeted CSS that handles those devices in instances where the content looks bad otherwise. The same can be done for desktops and laptops, or larger screens as well in the instances where it is useful. These are called *Media Queries* for those who want to research them further on their own. Some of the more common Media Queries that you would find helpful are going to be these:
/* SMARTPHONES (PORTRAIT AND LANDSCAPE) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* CSS HERE */
}
/* SMARTPHONES (LANDSCAPE) */
@media only screen and (min-width : 321px) {
/* CSS HERE */
}
/* SMARTPHONES (PORTRAIT) */
@media only screen and (max-width : 320px) {
/* CSS HERE */
}
/* TABLETS (PORTRAIT AND LANDSCAPE) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* CSS HERE */
}
/* TABLETS (LANDSCAPE) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* CSS HERE */
}
/* TABLETS (PORTRAIT) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* CSS HERE */
}
/* DESKTOPS AND LAPTOPS */
@media only screen and (min-width : 1224px) {
/* CSS HERE */
}
/* LARGE SCREENS */
@media only screen and (min-width : 1824px) {
/* CSS HERE */
}
This is all stuff you can just dump right in with your CSS as normal, it is actually a part of CSS3 (and works just fine here on OP). Things to consider with it, since it is just more CSS after all, is that it will work in the cascading way of normal CSS. If you put it high in your CSS it could be overwritten by things you have popping up later. As you can imagine with the way all of this is setup there are many variations you could make with this. If you do some Google digging you can even find Media Queries for specific devices and other such things that could be potentially useful depending on how much effort you want to put into mobile support on a hobby project.
In my own use of this on OP I have found that the above Media Queries tend to be more than enough for making the page mobile friendly without becoming overly invested in coding for my page. Of course if your troupe all uses one specific device (or just a couple) it could be beneficial to add in Media Queries for those devices on top of your basic mobile support to give your troupe an even better and customized experience when compared to other people that might be viewing your page.
The best part about all of this is that this method is also considered to be responsive (meaning no page reload is needed for these adjustments to take place, they happen dynamically as a browser is resized to meet the requirements). If you want to see an example of how this works take a peek at my Dragon Age campaign on a Desktop and resize your browser width down to see the page gradually adjust itself to better display the content. The effect is more pronounced on some pages compared to others, but it is present essentially everywhere on my campaign.
If you have some additional questions about all of this don't hesitate to hit me up, I am happy to help when I am able.
--
Alex
"Dragon Age: Requiem":https://da-requiem.obsidianportal.com/
Just trying to help out.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Just trying to help out.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Just trying to help out.
Well, I tried to post that but apparently it makes my post 6516 characters too long.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Age of the Dragons - Homebrew Fantasy | Edurance of Hope - Age of Rebellion
Nominate a Campaign for Campaign of the Month!
Just trying to help out.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
I made a new site 2 days ago, inserted my image fine on the Front Page but the site refuses to the same now on any other wiki page I make. Code it same, new image uploaded fine. Very frustrating as I cannot work it out as it is identical to the front page.
The code I am using is:
Anyone else having issues and what can I possibly do? I have tried making other pages, different images, re-uploading the image.
Link to what I have:
https://hell-s-rebels.obsidianportal.com/
--
Alex
"Dragon Age: Requiem":https://da-requiem.obsidianportal.com/
Thank you for the code, I will work with that to ensure I am not stealing your whole page. I will add a thank you reference on my page for you.
Just trying to help out.