I'm having a terrible time trying to figure out what the proper HTML code is for adjusting the width of my layout's photoset area. I've looked through a handful of previous solutions given by stackoverflowers, but have gotten nowhere. There seems to be a specific sort of hangup in the code I'm using that I just can't find and it's driving me bonkers.
This is the theme I'm using: http://pastebin.com/qePrzu7d
I would very much like to readjust the photoset's width to 650px. I know this can be done because of others who have asked/received help from the members of this website, but I haven't been able to figure out exactly how. I even messaged the creator of this theme and asked her for help, but she replied saying she was too short on time and that it was too complicated to tell me how. If anyone could give me a hand, I'd be so grateful.
Replace the 500px photoset variable with the 700px photoset variable in your theme's html.
{block:Photoset}
<div class="image">{Photoset-700}</div>
{block:IfShowCaption}<div class="cap">
{block:Caption}{Caption}{/block:Caption}
</div>{/block:IfShowCaption}
{block:IfNotShowCaption}{block:PermalinkPage}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}{/block:IfNotShowCaption}
{/block:Photoset}
700px is closer to 650px than 500px is, but you cannot resize photosets easily using css or javascript because they are iframes — if you don't really care about the layout of the photos within the photosets, you can replace the photoset variable with this instead:
{block:Photos}
{block:Photo1}{/block:Photo1}
<div class="photoset_image">
<img src="{PhotoWidth-500}" alt="{PhotoAlt}" />
<div class="photoset_caption">{Caption}</div>
</div>
{/block:Photos}
This will display all of the photos within the photoset individually, and you can style them however you want.
Related
switching a content pipeline away from wordpress.
everything is going well but there is a tiny difference that has to be simple but throwing everyone for a loop.
on this production page, when you scroll the main page... you only see the 'main' content when it's visible:
https://pracplay.com/partners
(same as: https://pracplay.com/index.php/partners/ )
on the staging page, [if the window is resized, or you're on mobile] you can usually see the non-visible content from 'main' in the footer (see attached pic, or live at: https://stage.pracplay.com/partners )
what we've tried:
running diffs of production html (very little js used)
fixed everything obviously off
it appears to be something related to z-index of the footer div, or the transparency of the footer div.
also tried:
force zindex of footer absurdly high it has no effect
changing the opacity or playing with background color alpha channel of footer doesn't reproduce it.
Our issue should be even simpler than this since we're just reproducing an existing site, with all same css. So it should be a class name issue on a div or something even simpler... but the diff isn't pointing out anything so modifying raw html to identify the problem is where we're at in this post.
this has to be so simple to fix i figured i'd try to post my understanding here and see if it generated any suggestions or ideas.
attaching a screenshot for experts who don't want to look at site but know problem from observation/experience.
(we primarily develop non-web applications but it's been exciting to get away from wordpress and have web use same processes that our other apps use.)
any help appreciated!
Ok asked someone with fresh eyes take a look.
It was pretty simple and had nothing to do with fixed/relative, z-order nor transparency (at least not directly).
They ran staging-v-prod diffs again on the actual page mentioned here.
It was pretty clearly missing one div wrapper, with class id of 'page-content'
This page-content class was applying an explicit white background to the main/central content of pages. So when it was missing, these divs were transparent and were bleeding into the footers.
So while it appeared like a footer issue, it was actually a page content issue.
Now staging matches production in this respect.
A particularly helpful tool was textcompare's html comparator view:
https://www.textcompare.org/html/
Which was a little easier to spot the html differences than a regular diff.
Your Layout Structure is a bit weird but you can fix it by putting the footer container inside #page or inside of #main. The page is overlapping the footer because of the fixed positioning. I recommend using a common clean layout structure and avoid unnecessary usage of containers.
You could simply do something like this:
<body>
<div class="page-wrapper">
<header>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
</header>
<main>
<section>
<div class="grid">
....
</div>
</section>
</main>
<footer>
....
</footer>
</div>
</body>
I am just learning to code and have been looking everywhere for an answer on this one and for some reason cannot find anything.
I noticed that it seems to be common practice to put an image inside of a container or wrapper. For instance, rather just having:
<img src="url"/>
Everyone seems to be in agreement that it needs to be this way:
<div class="container">
<img=src"url"/>
</div>
What is the purpose of wrapping the img inside of a div in this way? It seems to have something to do with "responsive design", but I'm not 100% sure. Is it just so that we have something to size the image relative to, rather than using definite sizing like pixels on the image selector in css? The more I think about it as I write this, the more it seems to be the right answer, but I'm not sure if there's something else I'm missing on this one.
Any insight would be very much appreciated. Thank you.
unfortunately there is no "single" correct answer for this.
There can be many reasons as to why one would wrap any element in another element, it is not specific to <img /> tags :)
In your question I read something like this (converted to real world example):
I see that it is common practice to put a frame around a photo.
Where the "frame" would be the wrapper element, and the photo would be the <img />.
Looking at it this way might make it seem more clear. The photo is the most important part, technically speaking you don't need a frame to show the photo. If you have just a photo, you won't be able to hang it on your wall without damaging it by driving a nail through the top or applying some tape. If you have a frame though, you can make that photo take up any amount of available space within it, you can use the clip to hang it on a wall and if you put multiple photo's in the frame, you can move them all at once since they are in the same frame.
The reason most people put that image in a "container" is because they get some sort of advantage out of it over using an image alone, this could range from aspect-ratio locks to relative positioning. In some cases, a wrapper is required to achieve certain (notably more complex) animations as well.
Websites are built out of "logical" pieces that, together, form a website. The individual pieces are all "frames" that "flow" together to create any page layout you see on every website.
It is merely a structural way of thinking, if the purpose of that image was to be used as a background image for the entire page, a better alternative would be to use CSS background-image property on the <body> tag and not use the image at all. But if the image is meant to be part of a smaller part of your website, it should probably be contained as appropiate.
This answer is in no way a guide to go by, nor a ruleset or anything like that, they are just the thoughts of another developer. There are countless reasons for wrapping an element and this answer doesn't even cover 0.0000001% of those cases. I'm just saying -- there's no specific reason to do or don't here.
first a link to the site through github http://torgian.github.io/website-dev/gallery.html
Apologies for any spelling mistakes, been working on this for several hours today.
This is directly to the gallery.
UPDATE#2
Further updated code. HUGE thanks to msfoster for setting me on the right path. Amazing how simple the fix was... I just didn't know what it was! Ahahaha xD
slams down sake I feel like I want to run up a mountain now... but it's 10pm here in Japan, so I'll wait till tomorrow.
Code block coming up with fixes.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 image-wrapper"> <a href="img/nasarow-fo-to1.jpg" class="img-thumbnail">
<img src="img/nasarow-fo-to1.jpg" class="img-responsive img-height">
</a></div>
The above was a list of 7 image divs, separated into two rows. That was my first problem. So I removed the second row, but still had a problem with images not staying in one uniform row.
So I next put in this CSS:
.image-wrapper {
height: 300px;
width: auto;}
It took some experimenting to get the height and width right, but found that if I let the width to AUTO and kept the height at a fixed rate, the images were still responsive to viewport size and stayed in the same uniform row.
Gods that was hard.
I'm not sure if this is a permanent fix or not, but I will be revisiting it in the future when I add more galleries.
I'm using bootstrap to create a gallery with the grid system. Unfortunately, I've been trying to get things to line up correctly for the past few days. I cant quite seem to get clearfix to work correctly, I don't know if I'm putting the code into the wrong spot into the html or not.
Also tried nth-child code, but I'm stuck on that as well.
I'll continue to research as I wait for answers, but could definitely use some help.
Suggestions?
In CSS I have the height limited to 300px. You can see that some of the pictures are higher than others, and I think this is what's causing the break, but just cant figure out how to keep the pictures from dropping down to the next row instead of having the 2 or 3 pictures I need in each row.
Background: student of HTML and CSS right now. Updating my site as I go through Treehouse courses.
The reason it breaks is the fact that you create a new row for every third image.
# # #
will break to
# #
#
And then the next image is within a new row again:
# #
#
#
Put all images inside one row and they will breake according to the col-x-y you set for each image.
I have a div which contains the following layout (top image): http://tinypic.com/r/287eu88/8
I am trying to work out how to move the elements to the configuration shown in the bottom image on resize/ on mobile devices but I can't work it out.
Here is the jsfiddle: http://jsfiddle.net/9DZSA/1/
If someone could point me in the right direction that would be good, I am a beginner so my code is probably not very good so any pointers would be great too!
Thanks!
"Links to jsFiddle.net must be accompanied by code" - Well I am not targetting a specific element but here is the html to satisfy the requirement:
LATEST PROJECT
<h3 id="latestDescription">aboutaboutabout</h3>
<div id="latestSub">
<h4 id="latestSubheading">Insert Project Name</h4>
<p id="latestSubdescription">Out believe has request not how comfort evident.
<br>Extremity sweetness difficult behaviour he of.
<br>With my them if up many.</p>
</div>
<div id="latestIcons">
<div id="latestOne">
<img id="latestIcon1" src="http://placehold.it/80" alt ""/>
<h5 class="latestH5">Design</h5>
<p class="latestP">Instantly gentleman contained belonging exquisite now direction she ham.</p>
</div>
<div id="latestTwo">
<img id="latestIcon2" src="http://placehold.it/80" alt ""/>tH5">Accuracy & Details</h5>
<p class="latestP">Its hence ten smile age means. Seven chief sight far point any.</p>
</div>
<div id="latestThree">
<img id="latestIcon3" src="http://placehold.it/80" alt ""/>
<h5 class="latestH5">Posibilities</h5>
<p class="latestP">Children me laughing we prospect answered followed.</p>
</div>
</div>
<div id="latestPhotoDiv">
<img id="latestphoto" src="http://placehold.it/350" alt />
</div>
There are few possible ways to do it. You can select according to your need
You can use media queries in which you define different stylesheets for different screens. This is the most used way currently. Sneak Peek:
http://css-tricks.com/css-media-queries/ and
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can use the viewport meta tag. Sneak Peek:https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
You can design everything in % (fluid responsive) but that part is very tricky. From my experience I can say that designing a full
website giving everything in % is very difficult.
I will suggest you to learn media query. Its quite simple and reliable.
You will have to take a look at media queries.
Media queries give you a way to target certain CSS properties only to specific media properties (including of course the viewport size, but also if it's print, or black and white, and so on).
Many people would suggest that you begin with a mobile-first approach, that is, you start by applying the CSS for the mobile, minimal version, and apply media queries at break points as your viewports get wider, enclosing your CSS like so:
#media (min-width: 480px){
/* CSS goes here */
}
First post here, can't seem to get a narrow enough search to really help me figure this out. So I've edited a theme to look how I want, but the strange thing is that my photosets display as 500px as I want, but single photos display a lot smaller until you go to their individual post (where you see notes on the single post) and I cannot for the life of me figure it out. Same goes for any text posts and god forbid I post any videos. It's all aesthetics but it is driving me crazy! I've looked through all of the block:post/quote/picture etc but I can't find any size variables to edit therein. Any help will be great! Here's the pastebin code for my entire theme's HTML: http://pastebin.com/G1STM1LX
The max width only goes up to 350px from the theme's options but I got the photosets to work by editing them within their own block. I know a bit of HTML but this is driving me bonkers!
looked through your code and figured you could do it with CSS.
The problem is in this part:
#content .entry img{
{block:IndexPage}
{block:if300pxWidth}max-width:300px;{/block:if300pxWidth}
{block:if250pxWidth}max-width:250px;{/block:if250pxWidth}
{block:if200pxWidth}max-width:200px;{/block:if200pxWidth}
{block:if350pxWidth}max-width:350px;{/block:if350pxWidth}
{/block:IndexPage}
{block:PermalinkPage}max-width:500px;{/block:PermalinkPage}
}
You'll notice that there are max-widths set when you are in the blog's index. It resizes the image generated by the {PhotoURL-500} block. A quick fix would require you to change this:
{block:if350pxWidth}max-width:350px;{/block:if350pxWidth}
to this:
{block:if350pxWidth}max-width:500px;{/block:if350pxWidth}