i am trying to display a list of image from some link within a array of hashes. beside some other image from my own folder. Thanks in advance
$config = [
'gallery_name' => 'my_heading',
'unsplash_categories' => ['array','of','category','keywords'],
'local_images' =>
['folder/jpg1.jpg','folder/jpg2.jpg','folder/jpg1.jpg','folder/jpg4.jpg']
];
in HTML, what tried.
<?php foreach($config as $my_config => $gallery_name): ?>
<h1><?php echo $gallery_name; ?></h1>
<?php endforeach ?>
<p>
<?php foreach($config as $img)
{
foreach($img['local_images'] as $local_img)
{
echo "<img src='".$local_img['']."' alt=''>.<br>";
}
foreach($img['unsplash_categories'] as $unsplash_img)
{
echo "<img src='".$unsplash_img['']."' alt=''>.<br>";
}
}
?>
</p>
Welcome on SO, Shaik.
Not clear on what you want to exactly achieve but if you just want to display the images using your $config as sample, you can simplify it a bit to something like this:
<h1><?= $config["gallery_name"]; ?></h1>
<p>
<?php
foreach($config['local_images'] as $local_img)
{
echo "<img src='" . $local_img . "' alt=''>.<br>";
}
//same for unsplash_categories...
?>
</p>
Related
I would like to add a download link in my Fancybox. I'm new in programming and I can't seem to figure out what code to use and where to put it. Thank you in advance.
I'm using FancyBox v3.2.10.
Here's the code:
<?php $directory = "images/"; ?>
<?php $dir = glob ($directory . "*.{jpg,png,gif,JPG}",GLOB_BRACE) ?>
<?php foreach ($dir as $key => $value): ?>
<div class="thumb">
<a href="<?php echo $value; ?>" data-fancybox="images" data-caption="<?php echo $value; ?>">
<img src="<?php echo $value; ?>" alt="" />
</a>
</div>
<?php endforeach; ?>
Try something like this -
$('[data-fancybox="images"]').fancybox({
buttons : [
'download',
'thumbs',
'close'
]
});
Demo - https://codepen.io/anon/pen/MXjGQB
I have a foreach loop giving out the results of a landscape gallery images.
Basically starting with
<?php foreach ( $images as $image ) : ?>
and then the regular div + anchor + image tags for the gallery images.
<?php if ( $image->description == "portrait" ) : ?>
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box portrait" <?php echo $image->style ?> >
<div class="ngg-gallery-thumbnail" >
<a class="portrait-image" href="<?php echo $image->imageURL ?>" title=" " id="<?php echo $image->alttext ?>" rel="lightbox" <?php echo $image->thumbcode ?> >
<img title="<?php echo ' ' /* $image->alttext */ ?>" alt="<?php echo ' ' /* $image->alttext */ ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
<?php else: ?>
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box landscape" <?php echo $image->style ?> >
<div class="ngg-gallery-thumbnail" >
<a class="landscape-image" href="<?php echo $image->imageURL ?>" title=" " id="<?php echo $image->alttext ?>" rel="lightbox" <?php echo $image->thumbcode ?> >
<img title="<?php echo ' ' /* $image->alttext */ ?>" alt="<?php echo ' ' /* $image->alttext */ ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
<?php endif; ?>
I want to have special case, where I have two portrait images side-by-side, filling the space of one landscape image.
What I was thinking about is to have a tag in the admin area which would trigger the break out of the foreach loop to have two images in one container div, and then it would continue the regular loop just with the container + image for the landscape images.
Is it possible in the case of foreach loop, to jump out of the loop, make a case with different settings, and then return to the regular looping method?
You can try something like this:
foreach($images as $key => $image) {
if($image has special tag) { // <--- PSEUDOCODE
echo "<div class='SPECIAL_CSS_CLASS'><img src='" . $img->path . "' /></div>";
}
}
Then in your CSS just do your Magic!
I would go ahead and do something like this:
//Function to get all the images based on a specific portrait_group
function getImagesPortraitGroup($group, $images) {
$result = array();
foreach ($images as $image) {
if (isset($image['portrait_group']) && $image['portrait_group'] == $group) {
$result[] = $image;
}
}
return $result;
}
//The images to show
$images = array(
["url" => "http://lorempixel.com/400/200/", "caption" => "Lorem Image1", "portrait_group" => 1],
["url" => "http://lorempixel.com/400/200/", "caption" => "Lorem Image2", "portrait_group" => 1],
["url" => "http://lorempixel.com/800/200/", "caption" => "Lorem Image3"],
["url" => "http://lorempixel.com/400/200/", "caption" => "Lorem Image4", "portrait_group" => 2],
["url" => "http://lorempixel.com/400/200/", "caption" => "Lorem Image5", "portrait_group" => 2],
);
//Everytime we show a group, we track it by adding it to this array in order not to show it again
$addedGroups = array();
//Loop through all the images
for ($i = 0; $i < count($images); $i++) {
echo "<div>";
//If the image has a portrait_group that is not already shown, show it
if (isset($images[$i]['portrait_group']) && !in_array($images[$i]['portrait_group'], $addedGroups)) {
$groupImages = getImagesPortraitGroup($images[$i]['portrait_group'], $images);
foreach ($groupImages as $image) {
echo "<img src='{$image['url']}' title='{$image['caption']}' >";
}
//Save the group to the array in order not to show it again
$addedGroups[] = $images[$i]['portrait_group'];
} else {
echo "<img src='{$images[$i]['url']}' title='{$images[$i]['caption']}' >";
}
echo "</div>";
}
I managed to make the grouping by jQuery, this is the code
jQuery(".ngg-gallery-thumbnail-box.portrait").filter(":odd").each(function(){
$content = jQuery(this).find("a");
jQuery(this).prev().find(".ngg-gallery-thumbnail").append($content);
jQuery(this).remove();
});
I want to change some php code to select a random image from a specified directory rather than the same default image it currently selects. This is the piece of code that currently selects a default fallback image - if there is no image available:
<?php
$postCover = '';
if ($post->hasImage()) {
$postCover = $post->getImage($photoSize);
}
if (!$post->hasImage() && $params->get('photo_legacy', true)) {
$postCover = $post->getContentImage();
}
if (!$postCover && $params->get('show_photo_placeholder', false)) {
$postCover = $post->getImage($photoSize, true);
}
?>
<?php if ($postCover) { ?>
<div class="eb-mod-thumb<?php if ($photoAlignment) { echo " is-" . $photoAlignment; } ?> <?php if (isset($photoLayout->full) && $photoLayout->full) { echo "is-full"; } ?>">
<?php if (isset($photoLayout->crop) && $photoLayout->crop) { ?>
<a href="<?php echo $post->getPermalink();?>" class="eb-mod-image-cover"
style="
background-image: url('<?php echo $postCover;?>');
<?php if (isset($photoLayout->full) && $photoLayout->full) { ?>
width: 100%;
<?php } else { ?>
width: <?php echo $photoLayout->width;?>px;
<?php } ?>
height: <?php echo $photoLayout->height;?>px;"
></a>
<?php } else { ?>
<a href="<?php echo $post->getPermalink();?>" class="eb-mod-image"
style="
<?php if (isset($photoLayout->full) && $photoLayout->full) { ?>
width: 100%;
<?php } else { ?>
width: <?php echo (isset($photoLayout->width)) ? $photoLayout->width : '260';?>px;
<?php } ?>"
>
<img src="<?php echo $postCover;?>" alt="<?php echo $post->title;?>" />
</a>
<?php } ?>
</div>
<?php } ?>
I think it is this line I need to change:
<img src="<?php echo $postCover;?>" alt="<?php echo $post->title;?>" />
I have found this solution on here: PHP pull random image from folder
<?php
$dir = "images/";
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
?> <img src="images/<?php echo $images[$i]; ?>" alt="" />
Which seems to be able to do what I want, but I am unsure how to incorporate it (or where) in the code I have supplied (not having php experience, but trying to learn).
Can anyone help me?
Kind regards
Mel
Let's say the link to your default image is : /path/to/default_imge.jpg
So a little solution for someone who doesn't like to create a big mess for this is :
.....
if (!$postCover && $params->get('show_photo_placeholder', false)) {
$postCover = $post->getImage($photoSize, true);
}
?>
// New Code Starts
$path='/path/to/default_imge.jpg';
if(stristr($postCover,$path) !==false){
$dir = "images/";
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
$postCover="images/".$images[$i];
}
// New Code Ends
<?php if ($postCover) { ?>
.......
In this case you can go back to the normal behavior just be removing the new code.
This will not answer your question, but this will help you while learning PHP/HTML
You mix up html and PHP in a way that makes the code unreadable.
In place of doing this:
if ($var) { ?> <div>Some HTML</div> <?php }
else { ?> <div>Some other HTML</div> <?php } ?>
Do this:
if($var){
echo "<div>Some HTML</div>";
}
else{
echo "<div>Some other HTML</div>";
}
It's a common beginner mistake, that makes it more difficult to learn coding because it "obfuscate" your code.
This will make your code more understandable for you and for us :)
I get images in a array then i read it with a foreach this are images, but how can i get also image text, my example is here:
$slideImages = array('image/path/image1', 'image/path/image2', 'image/path/image13');
$slideText = array('image text 1', 'image text 2', 'image text 3');
if($slideImages) :
echo '<ul>';
foreach($slideImages as $slideImage) :
?>
<li>
<div>IMAGE TEXT</div>
<img src="<?php echo $slideImage; ?>" />
</li>
<?php
endforeach;
echo '</ul>';
endif;
I need to embed also image text from the true position, i know how to do it with for but so is not efficient... it's something like this possible?
Assuming the keys are the same, use the $key in the foreach:
foreach($slideImages as $key => $slideImage) :
?>
<li>
<div>IMAGE TEXT</div>
<img src="<?php echo $slideImage; ?>" />
<?php echo $slideText[$key]; ?>
</li>
<?php
endforeach;
You could also change the way you store the info and keep them in one multidimensional array.
$slides = array(
array( image => "image/path/image1", text => "image text 1"),
array( image => "image/path/image2", text => "image text 2"),
array( image => "image/path/image3", text => "image text 3")
);
Then you would iterate through the $slides array and just pull out the image and text for each:
foreach($slides as $slide)
{
echo "Text:".$slide["text"];
echo "Image Path:".$slide["image"];
}
This organizes your code a little better so you don't wind up with something crazy going on should your two arrays wind up out of sync.
simplified example:
foreach($slideImages as $key=>$var){
echo $var;
echo $slideText[$key];
}
I'm new to CakePHP, I was wondering if there is a way to echo information from the database using a foreach loop but only have HTML links on images where the id is 1 & 7. What's the best way of achieving this?
<?php if ( isset($articles) ){ ?>
<?php foreach($articles as $article):?>
<?php echo ($this->Html->image($article['Post']['picture'], array('alt' => 'storyimage', 'class' => 'smallimg'));?>
<h3 class="caps"><?php echo $article['Post']['genre'];?></h3>
<h2><?php echo $article['Post']['story'];?></h2>
<div id="contentbox2">
</div>
<?php endforeach; ?>
<?php } ?>
This is how it looks in the veiw, my database in looks image data is stored like this:
suki-burberry-sq_500_500_90_s_c1.jpg
Would it be best to echo all the data individually without the foreach loop or could I write an if statement?
If you want only to get the 1 & 7 id you can do this, assuming that it is a predefined number. If it is dynamic or changeable you can do that in your controller.
<?php if ( isset($articles) ){ ?>
<?php foreach($articles as $article):?>
<?php if ($article['Post']['id']==1 || if ($article['Post']['id']==7) ): ?>
<?php echo ($this->Html->image($article['Post']['picture'], array('alt' => 'storyimage', 'class' => 'smallimg'));?>
<h3 class="caps"><?php echo $article['Post']['genre'];?></h3>
<h2><?php echo $article['Post']['story'];?></h2>
<div id="contentbox2">
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php } ?>
Best way is to find from your Model only what you needed.
with the condition $conditions=array('Post.id'=>array(1,7));