How to manage links in an automatic way? - php

In my project's homepage there must be some images, these must link to other pages. Now, I want to manage these links in an automatic way using PHP. The only idea I came up with is to make a form and insert the images into some buttons and make their background invisible.
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>FRESH ALBUMS</h3>
</div>
</div>
<div id="myline"></div>
<div class="row">
<div class="col-md-3">
<img src="contentimg/abbeyroad.jpg" height="200px" width="200px">
<div class="caption">
<h4>Beatles</h4>
</div>
<p> test</p>
</div>
<div class="col-md-3">TEST2</div>
<div class="col-md-3">TEST3</div>
<div class="col-md-3">TEST4</div>
</div>
</div>
This is the HTML at the moment. I just want to know if there are better ideas, options and if it will stay responsive. Thanks in advance.

I do not understand exactly what you are asking, but I cannot leave comments so I will try to answer what I think you are asking.
For the HTML part, you don't need a form with buttons, you can make hyperlinks out of the images instead, and the PHP can get the images to match the hyperlinks when it sends the page to your users browser. The PHP code would look like:
echo "
<a href='".$newPageLink."'>
<img src='".$imageLocation."' width='100px' height='100px'>
</a>";
Where $newPageLink is a variable in your PHP script that holds the path information for your hyperlink, and $imageLocation is the path information for where the image is stored.
All you need is a foreach or while loop to go through all of the images that you want on the page and also all of the pages that each image should link to. If it is always a manageable and unchanging list, you could store the values in an array in your script. For larger lists, or lists that are dynamic/always changing you might need to use a MySQL database table to store the image and hyperlink information.

Related

PHP and HTML: Nested foreach loops with HTML interspersed

I'm trying to put together a layout of items with an Accordion layout (from Bootstrap). In order to fill the accordions, I reach into a pgsql db to gather the data, and I'm able to retrieve this data.
What I'm having issues with is getting the data to show up at all. Right now I'm getting an HTML 500. It might be a layout issue or it might be a PHP interpretation issue (maybe out of depth? or something not visible to PHP), but I'm having issues determining which is the culprit.
I say this because I have a fairly complicated arrangement I'm attempting to make.
A sample:
<?php
// db connection info goes here
// pgsql query info goes here
$i = 0;
$result = pg_fetch_all($getData);
?>
<!-- Starting the container accordion -->
<div class="panel-group" id="main-accordion">
<?php
foreach($result as $row):
$title1 = $row['title1'];
$title2 = $row['title2'];
?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#main-accordion" href="#<?=$row['id']?>">
(<?=$row['category']?>) <?=$title1?> - <?=$title2?>
</a>
</h4>
</div>
<div id="<?=$row['id']?>" class="panel-collapse collapse">
<!-- The body of the accordion, contents go here. -->
<div class="panel-body">
<?php
// another pgsql query here
$newresult = pg_fetch_all($newgetData);
?>
<!-- In the accordion body, a new group of accordions. This is doable if hardcoded -->
<div class="panel-group" id="sub-accordion-<?=$i?>">
<?php
// I think this is where the issues start??
foreach($newresult as $newrow):
$subtitle = $newrow['subtitle'];
?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data toggle="collapse" data-parent="#sub-accordion" href="#<?=$newrow['subid']?>">
<?=$subtitle?>
</a>
</h4>
</div>
<div id="<?=$newrow['subid']?>" class="panel-collapse panel">
<div class="panel-body">
<!-- contents go here -->
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<?php
$i++;
endforeach; ?>
</div>
</div>
So, now my questions for the web dev people with HTML PHP and Bootstrap exp.:
Is it possible to nest foreach loops in this fashion without falling back to echo statements to print out the HTML (because ew)? Will it actually create (repeat) the HTML for the accordion objects this way or do I need to modify something here?
What might be triggering the HTML 500?
I realize this is a tough question to answer without live working code to mess with. If anyone knows a good resource to quickly sandbox a full stack for demo purposes I would be glad to know of it so I can put up some "working" code.
EDIT 1: User Sean pointed out that the sub-accordion is in a loop. Added in an iterator that modifies this id as the goal is to have multiple sub-accordions, not with the same id.
EDIT 2: Might have solved my own questions:
1. Turns out I used the wrong method when retrieving the ajax request: used PHP's $_POST['var'] instead of $_GET['var']
2. There was one syntax error on one of my shorthand PHP tags.
Now things are showing up! But, the formatting is still wrong. I can deal with that. Thank you all for all your help!
In your PHP.ini short tags might be turned off. In that case you either turned on or if you have no access to PHP.ini, then you should not use short echo tags `, try changing it to

Different Article Views for codeigniter

how would I go about having different views for an article in Code Igniter.
For example I have one Index for all articles and I also have a view. But what If I want to have say 10 pictures for one article and only three for another?
So my view is:
<div id="wrapper">
<div id="main-wrapper" class="col-md-10 pull-right">
<div id="main">
<div class="col-md-9">
<div id="sec#" class="">
<h2><?= $article['title']?></h2>
<img border="0" src="<?= assetUrl() ?>img/article/<?= $article['image']?>">
<h6>Date: <?= $article['date']?></h6>
<h6>Author: <?= $article['author']?></h6>
<br>
<p><?= $article['body']?></p>
</div>
</div>
</div><!--/right-->
</div><!--Main wrapper-->
</div><!--Wrapper-->
All the articles look the same. But what if I want to have pictures within the body of the article? And what if the number of pictures are different for each article.
I'm struggling with this, because all the articles look the same. And depending on the text, it would be nice to render pictures on different parts of the body.
Also, I've been adding HTML tags in the longtext and I save them in the database. Isn't this dangerous? I'm sure there must be a better way of doing this. But if I don't put any tags, the body just displays as one big blob of text.

WordPress is adding absolute path to my image multiple times

I have a quite specific problem to solve today - I just can't get my head wrapped around it. Makes totally no sense for me...
It's about a live site: http://rawrockchick.com/#testimonial-slider
If you scroll down to the testimonials on the home page (the link above should bring you there) you'll see that the slider arrows are missing. For a reason I can't figure out the URL is prepended a couple of times before the image src:
<img src="http://rawrockchick.comhttp://rawrockchick.comhttp://rawrockchick.com/media/manual/slider-arrow-left.png">
This wasn't the case two weeks ago, without anybody consciously touching it. I first thought of some Javascript thing happening with the bootstrap slider, but as you can see the testimonial image itself is not affected, even though it's placed in the exact way as the sliders are.
The whole slider is a very simple bootstrap carousel. Excerpts (relevant section) of the code:
<div class="item active">
<div class="row">
<div class="col-sm-8">
<p>"An up-and-coming UK raw food teacher and songstress, Barbara Fernandez has it going on! This girl can do food prep! Her Raw Mexican food is amazing"</p>
<p class="testimonial-author">Nomi Shannon</p>
<p class="testimonial-role">rawgourmet.com</p>
<a class="left carousel-control" href="#testimonial-slider" data-slide="prev"><img src="/media/manual/slider-arrow-left.png"></a>
<a class="right carousel-control" href="#testimonial-slider" data-slide="next"><img src="/media/manual/slider-arrow-right.png"></a>
</div>
<div class="col-sm-4">
<img src="/media/test-nomi-150.jpg" class="img-responsive hidden-xs hidden-sm img-circle" style="margin-left:25px;">
</div>
</div>
</div>
As you can see the images are inserted the exact same way.
What I tried already (no change):
I moved the <img src="/media/manual/slider-arrow-left.png"> out of the link and placed it directly under the working image, the same strange behavior occurs for the slider arrow (by this test I wanted to make sure there's no jquery rule affecting only that one column of the slider, or the a tag).
Hardcoding absolute image URL (src="http://rawrockchick.com/media/manual/slider-arrow-left.png")
WordPress PHP query for image URL (src="<?php echo home_url(); ?>/media/manual/slider-arrow-left.png")
I'd be very thankful if anyone had any ideas about that phenomena. Or idea how to debug it further.
I am not really sure why you are getting a double URL but using an absolute path to your image could help solve things.
<img src="<?php echo home_url(); ?>/media/test-nomi-150.jpg" class="img-responsive hidden-xs hidden-sm img-circle" style="margin-left:25px;">
Solved.
Found it out via disabling plugin for plugin that a Pinterest hover button plugin (this to be precise) was causing that mysterious phenomena.
Thanks for all the answers and hints!

php prevent items from loading, and load with trigger

I'm rather new to programming, but I'm trying to find a way to do what is described below.
<body>
<div class="gallery">
<img src="photo_1.jpg">
<img src="photo_2.jpg">
<img src="photo_3.jpg">
<!-- trigger for user to load items that weren't downloaded on page load -->
<img src="photo_4.jpg">
<img src="photo_5.jpg">
<img src="photo_6.jpg">
</div>
</body>
I'm trying to find PHP functions that would, ideally, only load the first 3 img embeds within a certain class/ID, and have a clickable trigger to request the remaining img embeds from the server.
I don't know if this is how the typical message board software(such as vBulletin) handles things with "spoiler tags" .. as in whether or not it actually prevents loading, or just hides the content from view. Something like that, if it actually prevents loading, is what I'd like to know about.
First, this has nothing to do with PHP.
The only way to prevent a page from loading the image is to not include the tags on the page.
You could accomplish this a couple ways:
Place the last three photos inside a hidden container and use a Javascript click event to display them when wanted, but that still loads the images when the page is loaded.
Or, you can use an AJAX call to retrieve the items only on demand. Unless they are really large images I would think the first option the best.
<div class="gallery">
<img src='photo1.jpg'/>
<img src='photo2.jpg'/>
<img src='photo3.jpg'/>
<a href="#" onClick='document.getElementById("hidden-gallery").display="visible"'>show more</a>
<div id="hidden-gallery" class="hidden-gallery" style="display:none">
<img src='photo4.jpg'/>
<img src='photo5.jpg'/>
<img src='photo6.jpg'/>
</div>
</div>
I recognize that embedding CSS styles and Javascript the way I did is not the preferred method but it is there just for the examples sake.

Preview a file on a webpage

I have many documents on my server that are available for my visitors to download. I have a display set up like so:
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320X200" alt="ALT NAME">
<div class="caption">
<h3>Header Name</h3>
<p>Description</p>
<p align="center">Download</p>
</div>
</div>
</li>
</ul>
Now within this I currently have a image as the main display for each document. I am wanting to display a preview of the document in that space. Maybe a screenshot completed by the browser on page load of just the first page of the document.
I have tried <iframe src="assets/documents/NHSHandbook1314.doc" width="230" height="144"></iframe> instead of the image but that resulted in nothing being displayed in the iframe and the document downloading as soon as the page loads.
I would like to do this using javascript or php on page load. I basically want the browser to take a "screenshot" of the external document and then display it for the visitor to preview. I don't want them to be able to interact "read" the document from the preview, just see what they are downloading. (at least the first page)
I hope that makes sense on what I am wanting to do!
Browsers cannot render Microsoft Word documents. You will need to generate some sort of thumbnail on the server and display that.

Categories